:root {
  --suite-accent: #d95b43;
  --suite-accent-dark: #9f3827;
  --suite-soft: #fff0ea;
  --suite-ink: #17212b;
  --suite-muted: #65717e;
  --suite-line: #dfe4e8;
  --suite-paper: #fffdf9;
  --suite-shadow: 0 22px 60px rgba(27, 37, 48, .12);
}

body[data-theme="watermark"] { --suite-accent:#6d4be8; --suite-accent-dark:#4931a8; --suite-soft:#f1edff; }
body[data-theme="scan"] { --suite-accent:#147d72; --suite-accent-dark:#0b554d; --suite-soft:#e8f7f4; }
body[data-theme="metadata"] { --suite-accent:#bd6a13; --suite-accent-dark:#7f4308; --suite-soft:#fff4dd; }
body[data-theme="markdown"] { --suite-accent:#2367bd; --suite-accent-dark:#16447e; --suite-soft:#eaf3ff; }

.suite-topbar { background:#101923; color:#fff; }
.suite-topbar .container { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.suite-brand { display:flex; align-items:center; gap:12px; color:#fff; font-size:.82rem; }
.suite-brand img { width:128px; max-height:38px; object-fit:contain; filter:brightness(0) invert(1); }
.suite-brand span { padding-left:12px; border-left:1px solid rgba(255,255,255,.25); }
.suite-nav { display:flex; align-items:center; gap:10px; font-size:.85rem; }
.suite-nav a { color:#fff; opacity:.8; }
.suite-nav a:hover { opacity:1; }

.suite-hero { padding:58px 0 40px; background:
  radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--suite-accent) 22%, transparent), transparent 31%),
  linear-gradient(145deg, #fff 0%, var(--suite-soft) 100%); border-bottom:1px solid var(--suite-line); }
.suite-crumb { margin:0 0 24px; font-size:.82rem; color:var(--suite-muted); }
.suite-crumb a { color:var(--suite-accent-dark); text-decoration:underline; }
.suite-kicker { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; background:var(--suite-soft); color:var(--suite-accent-dark); border:1px solid color-mix(in srgb, var(--suite-accent) 30%, white); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.suite-hero h1 { max-width:850px; margin:16px 0 14px; font-size:clamp(2.35rem, 6vw, 4.7rem); letter-spacing:-.045em; color:var(--suite-ink); }
.suite-hero .lead { max-width:760px; margin:0; color:var(--suite-muted); font-size:clamp(1rem, 2vw, 1.2rem); }
.suite-trust { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.suite-trust span { background:#fff; border:1px solid var(--suite-line); border-radius:999px; padding:7px 11px; font-size:.8rem; color:var(--suite-muted); }

.suite-workspace { padding:34px 0 22px; }
.suite-panel { max-width:980px; margin:auto; background:#fff; border:1px solid var(--suite-line); border-radius:24px; box-shadow:var(--suite-shadow); overflow:hidden; }
.suite-panel-head { padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:14px; background:#f8fafb; border-bottom:1px solid var(--suite-line); }
.suite-panel-head strong { color:var(--suite-ink); }
.suite-local { font-size:.78rem; font-weight:700; color:#176b50; }
.suite-panel-body { padding:clamp(20px,4vw,38px); }
.suite-drop { display:grid; place-items:center; min-height:190px; padding:28px; border:2px dashed color-mix(in srgb, var(--suite-accent) 50%, var(--suite-line)); border-radius:18px; background:var(--suite-soft); cursor:pointer; text-align:center; transition:.2s ease; }
.suite-drop:hover, .suite-drop.is-drag { transform:translateY(-2px); border-color:var(--suite-accent); }
.suite-drop input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.suite-drop-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:#fff; color:var(--suite-accent-dark); font-size:1.7rem; box-shadow:0 8px 22px rgba(0,0,0,.08); }
.suite-drop strong { display:block; margin-top:15px; color:var(--suite-ink); font-size:1.05rem; }
.suite-drop small { display:block; margin-top:6px; color:var(--suite-muted); }
.suite-file { display:flex; align-items:center; gap:12px; margin:16px 0 0; padding:12px 14px; border:1px solid var(--suite-line); border-radius:14px; background:#fff; }
.suite-file[hidden] { display:none; }
.suite-file-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:var(--suite-soft); color:var(--suite-accent-dark); font-weight:800; }
.suite-file-info { min-width:0; flex:1; }
.suite-file-info strong, .suite-file-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suite-file-info small { color:var(--suite-muted); margin-top:3px; }

.suite-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:24px 0; }
.suite-field { display:grid; gap:8px; align-content:start; }
.suite-field.is-wide { grid-column:1/-1; }
.suite-field > span { color:var(--suite-ink); font-size:.84rem; font-weight:700; }
.suite-field small { color:var(--suite-muted); font-size:.78rem; }
.suite-field input:not([type="checkbox"]):not([type="color"]), .suite-field select, .suite-field textarea {
  width:100%; padding:12px 13px; border:1px solid var(--suite-line); border-radius:11px; background:#fff; color:var(--suite-ink); font:inherit;
}
.suite-field input:focus, .suite-field select:focus, .suite-field textarea:focus { outline:3px solid color-mix(in srgb, var(--suite-accent) 20%, transparent); border-color:var(--suite-accent); }
.suite-range-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; }
.suite-range-row output { min-width:54px; padding:6px 8px; border-radius:8px; background:var(--suite-soft); color:var(--suite-accent-dark); text-align:center; font-weight:800; }
.suite-field input[type="range"] { width:100%; accent-color:var(--suite-accent); }
.suite-field input[type="color"] { width:54px; height:42px; padding:3px; border:1px solid var(--suite-line); border-radius:10px; background:#fff; }
.suite-check { display:flex; align-items:center; gap:9px; color:var(--suite-ink); font-size:.9rem; }
.suite-check input { width:18px; height:18px; accent-color:var(--suite-accent); }

.suite-action { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:48px; padding:12px 20px; border:0; border-radius:12px; background:var(--suite-accent); color:#fff; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 10px 25px color-mix(in srgb, var(--suite-accent) 25%, transparent); }
.suite-action:hover { background:var(--suite-accent-dark); transform:translateY(-1px); }
.suite-action:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.suite-action.secondary { background:#fff; color:var(--suite-accent-dark); border:1px solid var(--suite-line); box-shadow:none; }
.suite-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.suite-status { min-height:24px; margin:15px 0 0; color:var(--suite-muted); font-size:.86rem; }
.suite-status.is-error { color:#a42a2a; }
.suite-result { margin-top:18px; padding:17px; border-radius:14px; border:1px solid color-mix(in srgb, var(--suite-accent) 35%, var(--suite-line)); background:var(--suite-soft); color:var(--suite-ink); }
.suite-result[hidden] { display:none; }
.suite-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 0; }
.suite-metric { padding:11px; background:#fff; border-radius:10px; border:1px solid var(--suite-line); }
.suite-metric strong, .suite-metric span { display:block; }
.suite-metric span { margin-top:3px; color:var(--suite-muted); font-size:.76rem; }
.suite-progress { height:7px; border-radius:999px; overflow:hidden; background:#e7ebee; margin-top:11px; }
.suite-progress > span { display:block; width:0; height:100%; background:var(--suite-accent); transition:width .2s ease; }

.metadata-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:16px; }
.metadata-item { padding:12px; border-radius:11px; background:#f8fafb; border:1px solid var(--suite-line); }
.metadata-item span, .metadata-item strong { display:block; overflow-wrap:anywhere; }
.metadata-item span { color:var(--suite-muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; }
.metadata-item strong { margin-top:4px; color:var(--suite-ink); font-size:.9rem; }

.markdown-layout { display:grid; grid-template-columns:1fr 1fr; min-height:620px; border:1px solid var(--suite-line); border-radius:18px; overflow:hidden; }
.markdown-editor { padding:18px; background:#111923; color:#e9f1f8; border:0; resize:vertical; min-height:620px; font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }
.markdown-editor:focus { outline:3px solid var(--suite-accent); outline-offset:-3px; }
.markdown-preview { padding:clamp(22px,4vw,44px); background:#fff; overflow:auto; color:#222; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3 { margin:1.25em 0 .55em; color:#17212b; }
.markdown-preview h1:first-child { margin-top:0; }
.markdown-preview p, .markdown-preview li { line-height:1.7; }
.markdown-preview pre { overflow:auto; padding:14px; border-radius:10px; background:#111923; color:#eef6ff; }
.markdown-preview code { padding:.12em .35em; border-radius:5px; background:#edf1f4; }
.markdown-preview pre code { padding:0; background:none; }
.markdown-preview blockquote { margin:18px 0; padding:4px 0 4px 16px; border-left:4px solid var(--suite-accent); color:#5d6872; }
.markdown-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:14px; }
.markdown-count { margin-left:auto; color:var(--suite-muted); font-size:.8rem; }

.suite-note { max-width:980px; margin:16px auto 0; padding:12px 15px; border-radius:12px; background:#f6f8f9; color:var(--suite-muted); font-size:.82rem; text-align:center; }
.suite-content { padding:58px 0; }
.suite-section-head { max-width:720px; margin-bottom:28px; }
.suite-section-head h2 { margin:9px 0; font-size:clamp(1.8rem,4vw,2.8rem); color:var(--suite-ink); }
.suite-section-head p { color:var(--suite-muted); }
.suite-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.suite-card { padding:22px; border:1px solid var(--suite-line); border-radius:18px; background:#fff; }
.suite-card b { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--suite-soft); color:var(--suite-accent-dark); }
.suite-card h3 { margin:14px 0 8px; font-size:1.05rem; color:var(--suite-ink); }
.suite-card p { margin:0; color:var(--suite-muted); font-size:.9rem; }
.suite-related { background:#f6f8f9; }
.suite-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.suite-related a { display:block; padding:18px; border:1px solid var(--suite-line); border-radius:15px; background:#fff; color:var(--suite-ink); font-weight:800; }
.suite-related a span { display:block; margin-top:6px; color:var(--suite-muted); font-size:.82rem; font-weight:400; }
.suite-faq details { max-width:850px; padding:16px 0; border-bottom:1px solid var(--suite-line); }
.suite-faq summary { cursor:pointer; color:var(--suite-ink); font-weight:800; }
.suite-faq p { color:var(--suite-muted); }

.suite-footer { padding:30px 0; background:#101923; color:#cbd5df; }
.suite-footer .container { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.suite-footer-brand { display:flex; align-items:center; gap:12px; }
.suite-footer-brand img { width:116px; filter:brightness(0) invert(1); }
.suite-footer a { color:#fff; text-decoration:underline; }
.suite-footer-links { display:flex; flex-wrap:wrap; gap:14px; font-size:.8rem; }

@media (max-width:760px) {
  .suite-nav a:not(:last-child), .suite-brand span { display:none; }
  .suite-hero { padding:40px 0 30px; }
  .suite-controls, .metadata-grid, .suite-grid, .suite-related-grid { grid-template-columns:1fr; }
  .markdown-layout { grid-template-columns:1fr; }
  .markdown-editor { min-height:360px; }
  .markdown-preview { min-height:420px; }
  .suite-footer .container { align-items:flex-start; flex-direction:column; }
  .suite-metrics { grid-template-columns:1fr; }
}

@media print {
  body[data-pdf-tool="markdown"] .suite-topbar,
  body[data-pdf-tool="markdown"] .suite-footer,
  body[data-pdf-tool="markdown"] main > section:not(.suite-workspace) { display:none !important; }
  body[data-pdf-tool="markdown"] .suite-workspace,
  body[data-pdf-tool="markdown"] .suite-workspace .container,
  body[data-pdf-tool="markdown"] .suite-panel,
  body[data-pdf-tool="markdown"] .suite-panel-body,
  body[data-pdf-tool="markdown"] .markdown-layout,
  body[data-pdf-tool="markdown"] .markdown-preview { display:block !important; margin:0; padding:0; border:0; box-shadow:none; }
  body[data-pdf-tool="markdown"] .suite-panel-head,
  body[data-pdf-tool="markdown"] .markdown-toolbar,
  body[data-pdf-tool="markdown"] .markdown-editor { display:none !important; }
  @page { margin:18mm; }
}