:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --text: #0f172a;
    --muted: #64748b;
    --line: #dbe3ee;
    --line-strong: #cbd5e1;
    --primary: #155eef;
    --primary-dark: #0f4bcc;
    --primary-soft: #eaf1ff;
    --success: #067647;
    --success-soft: #ecfdf3;
    --warning: #b54708;
    --warning-soft: #fffaeb;
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --shadow: 0 20px 60px rgba(15, 23, 42, .08);
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
    --radius: 18px;
    --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "DM Sans", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 20px; height: 20px; stroke-width: 1.8; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 40px)); }
.card { background: var(--surface); border: 1px solid rgba(203, 213, 225, .75); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(203,213,225,.72); }
.nav-shell { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, #0f172a, #263b60); box-shadow: 0 9px 20px rgba(15,23,42,.2); }
.brand-mark svg { width: 23px; height: 23px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font: 800 18px/1 "Manrope", sans-serif; letter-spacing: -.03em; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; color: #475569; font-weight: 600; font-size: 14px; }
.main-nav a:hover, .main-nav a.active { color: var(--primary); background: var(--primary-soft); }
.main-nav svg { width: 17px; height: 17px; }

.hero { padding: 82px 0 70px; color: white; background: radial-gradient(circle at 85% 10%, rgba(62, 119, 255, .32), transparent 28%), linear-gradient(135deg, #0b1221 0%, #142544 62%, #13213a 100%); }
.hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 80px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-size: 12px; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.hero .eyebrow { color: #bcd0ff; }
.eyebrow svg { width: 15px; height: 15px; }
.hero h1 { max-width: 800px; margin: 18px 0; font: 800 clamp(42px, 6vw, 68px)/1.04 "Manrope", sans-serif; letter-spacing: -.055em; }
.hero p { max-width: 680px; margin: 0; color: #c5d2e6; font-size: 18px; line-height: 1.7; }
.hero-actions, .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 17px; border-radius: 11px; font-weight: 700; font-size: 14px; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button-primary { color: white; background: var(--primary); box-shadow: 0 10px 24px rgba(21,94,239,.22); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { color: var(--text); background: white; border: 1px solid var(--line); }
.hero .button-secondary { color: white; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.button-large { min-height: 54px; padding-inline: 24px; font-size: 15px; }
.hero-panel { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.metric { display: flex; align-items: center; gap: 14px; padding: 17px; border-radius: 14px; background: rgba(255,255,255,.08); }
.metric > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.1); }
.metric div { display: flex; flex-direction: column; }
.metric strong { font: 800 22px/1 "Manrope", sans-serif; }
.metric small { color: #b9c8dc; margin-top: 6px; }

.tools-section, .page-section { padding: 68px 0 90px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.section-heading h1, .section-heading h2 { margin: 8px 0 0; font: 800 34px/1.15 "Manrope", sans-serif; letter-spacing: -.035em; }
.section-heading p { margin: 10px 0 0; color: var(--muted); }
.search-box { min-width: 300px; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--muted); }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); }
.tool-category + .tool-category { margin-top: 40px; }
.tool-category h3 { margin: 0 0 14px; font: 700 15px/1 "Manrope", sans-serif; color: #334155; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tool-card { min-height: 154px; position: relative; display: flex; align-items: flex-start; gap: 15px; padding: 22px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 15px rgba(15,23,42,.03); transition: .2s ease; }
.tool-card:hover { transform: translateY(-3px); border-color: #a8c1fa; box-shadow: 0 16px 35px rgba(15,23,42,.08); }
.tool-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 12px; }
.tool-icon.large { width: 58px; height: 58px; border-radius: 16px; }
.tool-icon.large svg { width: 27px; height: 27px; }
.tool-copy { min-width: 0; display: flex; flex-direction: column; padding-right: 18px; }
.tool-copy strong { font: 700 16px/1.3 "Manrope", sans-serif; }
.tool-copy small { margin-top: 9px; color: var(--muted); line-height: 1.55; }
.tool-arrow { position: absolute; right: 18px; top: 20px; width: 18px; color: #94a3b8; }

.tool-page { padding: 34px 0 90px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--muted); font-weight: 700; font-size: 14px; }
.back-link:hover { color: var(--primary); }
.back-link svg { width: 17px; }
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 22px; }
.tool-main { padding: 30px; }
.tool-title { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.tool-title.compact { padding: 0; border: 0; align-items: center; }
.tool-title h1 { margin: 8px 0 7px; font: 800 32px/1.15 "Manrope", sans-serif; letter-spacing: -.035em; }
.tool-title.compact h1 { margin: 3px 0; font-size: 24px; }
.tool-title p { margin: 0; color: var(--muted); }
.converter-form { margin-top: 26px; }
.dropzone { position: relative; min-height: 275px; display: grid; place-items: center; overflow: hidden; border: 1.5px dashed #aebbd0; border-radius: 16px; background: var(--surface-2); transition: .18s ease; }
.dropzone:hover, .dropzone.dragging { border-color: var(--primary); background: #f2f6ff; }
.dropzone.has-files { min-height: 190px; }
.dropzone > input { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.dropzone-content { text-align: center; pointer-events: none; padding: 30px; }
.dropzone-content > span { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 16px; color: var(--primary); background: var(--primary-soft); }
.dropzone-content > span svg { width: 27px; height: 27px; }
.dropzone h2 { margin: 0; font: 700 18px/1.3 "Manrope", sans-serif; }
.dropzone p { margin: 6px 0 12px; color: var(--muted); }
.dropzone small { color: #7c8ba1; font-size: 12px; font-weight: 700; }
.selected-files { display: grid; gap: 8px; margin-top: 12px; }
.selected-file { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; }
.selected-file > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--primary); border-radius: 9px; background: var(--primary-soft); }
.selected-file div { min-width: 0; display: flex; flex-direction: column; }
.selected-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.selected-file small { color: var(--muted); }
.selected-file em { min-width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); border-radius: 8px; font-size: 12px; font-style: normal; }
.options-panel { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
.options-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.options-heading h2 { margin: 0; font: 700 18px/1 "Manrope", sans-serif; }
.options-heading span { color: var(--muted); font-size: 13px; }
.fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { min-width: 0; }
.field > label:not(.check-row), .editor-toolbar label { display: block; margin: 0 0 7px; color: #334155; font-size: 13px; font-weight: 700; }
.field > label span { color: var(--danger); }
.field input:not([type="checkbox"]):not([type="range"]), .field select, .filter-bar select, .inline-field input, .editor-toolbar input:not([type="file"]) { width: 100%; height: 45px; padding: 0 12px; color: var(--text); background: white; border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.field input:focus, .field select:focus, .editor-toolbar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,94,239,.1); }
.field input[type="file"] { padding: 9px; }
.field input[type="color"] { padding: 5px !important; }
.field-range { align-self: end; }
.range-wrap { display: flex; align-items: center; gap: 12px; height: 45px; }
.range-wrap input { flex: 1; accent-color: var(--primary); }
.range-wrap output { min-width: 50px; padding: 5px 8px; text-align: center; color: var(--primary); background: var(--primary-soft); border-radius: 8px; font-weight: 700; }
.check-row { display: inline-flex; align-items: flex-start; gap: 10px; color: #475569; font-size: 13px; font-weight: 600; }
.check-row input { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--primary); }
.field-checkbox { display: flex; align-items: center; min-height: 45px; }
.consent-row { display: flex; margin: 22px 0 18px; }
.tool-aside { display: grid; gap: 12px; }
.info-card { display: flex; align-items: flex-start; gap: 13px; padding: 18px; }
.info-card > svg { flex: 0 0 auto; color: var(--primary); }
.info-card strong { font: 700 14px/1.2 "Manrope", sans-serif; }
.info-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.flash { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 13px 16px; border: 1px solid; border-radius: 12px; font-weight: 600; font-size: 14px; }
.flash-error { color: var(--danger); border-color: #fecdca; background: var(--danger-soft); }
.flash-success { color: var(--success); border-color: #abefc6; background: var(--success-soft); }
.empty-state { padding: 70px 30px; text-align: center; }
.empty-state > svg { width: 46px; height: 46px; color: #94a3b8; }
.empty-state h1, .empty-state h2, .empty-state h3 { margin: 16px 0 8px; font-family: "Manrope", sans-serif; }
.empty-state p { color: var(--muted); }
.empty-state .button { margin-top: 14px; }

.status-page { padding: 42px 0 90px; }
.status-card { padding: 42px; text-align: center; }
.status-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 22px; color: var(--primary); border-radius: 22px; background: var(--primary-soft); }
.status-icon svg { width: 34px; height: 34px; }
.status-icon-queued svg, .status-icon-processing svg { animation: spin 1.2s linear infinite; }
.status-icon-completed, .status-icon-completed_with_errors { color: var(--success); background: var(--success-soft); }
.status-icon-failed, .status-icon-cancelled, .status-icon-expired { color: var(--danger); background: var(--danger-soft); }
@keyframes spin { to { transform: rotate(360deg); } }
.status-card h1 { margin: 10px 0 8px; font: 800 32px/1.2 "Manrope", sans-serif; }
.status-card > p { margin: 0; color: var(--muted); }
.progress-track { height: 10px; margin-top: 30px; overflow: hidden; border-radius: 999px; background: #e9eef5; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #155eef, #62a1ff); transition: width .35s ease; }
.progress-meta { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font-size: 12px; }
.status-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0; }
.status-stats div { display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.status-stats span { color: var(--muted); font-size: 12px; }
.status-stats strong { margin-top: 4px; font-family: "Manrope", sans-serif; }
.outputs { display: grid; gap: 9px; text-align: left; }
.output-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.output-row:hover { border-color: #9bbaf9; background: #f8faff; }
.output-row > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--success); border-radius: 10px; background: var(--success-soft); }
.output-row div { min-width: 0; display: flex; flex-direction: column; }
.output-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-row small { color: var(--muted); }
.status-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.jobs-list { display: grid; gap: 10px; }
.job-row { display: grid; grid-template-columns: 44px minmax(200px, 1fr) 110px 110px auto 22px; align-items: center; gap: 16px; padding: 16px; }
.job-row:hover { border-color: #b2c7f8; }
.job-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 11px; }
.job-main { min-width: 0; display: flex; flex-direction: column; }
.job-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.3 "Manrope", sans-serif; }
.job-main small, .job-size small { margin-top: 5px; color: var(--muted); }
.job-size { display: flex; flex-direction: column; }
.job-size strong { margin-top: 4px; font-size: 13px; }
.job-arrow { color: #94a3b8; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border-radius: 999px; color: #475569; background: #f1f5f9; font-size: 11px; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.status-completed { color: var(--success); background: var(--success-soft); }
.status-completed_with_errors, .status-processing, .status-queued { color: var(--warning); background: var(--warning-soft); }
.status-failed, .status-cancelled, .status-expired { color: var(--danger); background: var(--danger-soft); }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.pagination a { min-width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; font-weight: 700; }
.pagination a.active { color: white; border-color: var(--primary); background: var(--primary); }

.admin-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.admin-metrics .card { position: relative; display: flex; flex-direction: column; padding: 22px; }
.admin-metrics small { color: var(--muted); }
.admin-metrics strong { margin-top: 10px; font: 800 26px/1 "Manrope", sans-serif; }
.admin-metrics svg { position: absolute; right: 18px; top: 18px; color: #94a3b8; }
.table-card { overflow: hidden; }
.card-heading { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.card-heading h2 { margin: 0; font: 700 18px/1 "Manrope", sans-serif; }
.card-heading a { color: var(--primary); font-weight: 700; font-size: 13px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
th { color: #64748b; background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
td a { color: var(--primary); font-weight: 700; }
.tool-admin-row { display: grid; grid-template-columns: 44px minmax(240px, 1fr) auto 110px auto; align-items: center; gap: 14px; padding: 15px; }
.inline-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.inline-field input { width: 72px; }
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px; }
.filter-bar .search-box { flex: 1; }
.filter-bar select { min-width: 180px; height: 46px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 11px; background: white; }

.editor-page { padding: 28px 0 80px; }
.editor-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; }
.editor-actions { display: flex; gap: 10px; }
.editor-actions label { cursor: pointer; }
.editor-workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; align-items: start; gap: 14px; margin-top: 14px; }
.editor-toolbar, .editor-inspector { position: sticky; top: 92px; padding: 16px; }
.editor-toolbar h2, .editor-inspector h2 { margin: 0 0 12px; font: 700 13px/1 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #475569; }
.editor-toolbar h2:not(:first-child), .editor-inspector h2:not(:first-child) { margin-top: 22px; }
.editor-toolbar button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px; color: #334155; background: transparent; border: 0; border-radius: 9px; cursor: pointer; text-align: left; font-weight: 600; font-size: 13px; }
.editor-toolbar button:hover { color: var(--primary); background: var(--primary-soft); }
.editor-toolbar button.danger:hover { color: var(--danger); background: var(--danger-soft); }
.editor-toolbar hr { height: 1px; margin: 14px 0; border: 0; background: var(--line); }
.editor-toolbar label { margin-top: 10px; }
.editor-toolbar input { height: 38px !important; margin-top: 5px; }
.editor-file-label { padding: 10px; border: 1px dashed var(--line-strong); border-radius: 9px; }
.editor-file-label input { width: 100%; height: auto !important; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.editor-canvas-shell { min-height: 680px; padding: 18px; }
.editor-empty { display: grid; place-items: center; align-content: center; min-height: 640px; text-align: center; }
.editor-empty svg { width: 48px; height: 48px; color: #94a3b8; }
.editor-empty h2 { margin: 18px 0 5px; font-family: "Manrope", sans-serif; }
.editor-empty p { margin: 0; color: var(--muted); }
.editor-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.editor-page-card { min-width: 0; padding: 10px; text-align: left; color: var(--text); background: white; border: 2px solid transparent; border-radius: 12px; cursor: pointer; box-shadow: 0 5px 16px rgba(15,23,42,.08); }
.editor-page-card:hover, .editor-page-card.selected { border-color: var(--primary); }
.editor-page-card.deleted { opacity: .42; filter: grayscale(1); }
.page-canvas-wrap { position: relative; aspect-ratio: .71; display: grid; place-items: center; overflow: hidden; background: #e9eef5; border-radius: 7px; }
.page-canvas-wrap canvas { max-width: 90%; max-height: 90%; box-shadow: 0 2px 8px rgba(15,23,42,.2); transition: transform .2s; }
.page-rotation { position: absolute; right: 6px; top: 6px; padding: 3px 5px; color: white; background: rgba(15,23,42,.75); border-radius: 5px; font-size: 10px; }
.editor-page-card strong { display: block; margin-top: 9px; font-size: 12px; }
.editor-page-card small { color: var(--muted); font-size: 10px; }
#editor-page-details { display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: 10px; background: var(--surface-2); font-size: 12px; }
.operation-list { display: grid; gap: 6px; }
.operation-item { padding: 8px 10px; color: #334155; background: var(--surface-2); border-radius: 8px; font-size: 11px; font-weight: 700; text-transform: capitalize; }

.site-footer { border-top: 1px solid var(--line); background: white; }
.footer-shell { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 12px; }

@media (max-width: 1040px) {
    .hero-grid { grid-template-columns: 1fr; gap: 38px; }
    .hero-panel { grid-template-columns: repeat(3, 1fr); }
    .tool-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-layout { grid-template-columns: 1fr; }
    .tool-aside { grid-template-columns: repeat(3, 1fr); }
    .admin-metrics { grid-template-columns: repeat(2, 1fr); }
    .editor-workspace { grid-template-columns: 190px 1fr; }
    .editor-inspector { display: none; }
}

@media (max-width: 760px) {
    .container, .narrow { width: min(100% - 24px, 1180px); }
    .nav-shell { min-height: 66px; }
    .brand small { display: none; }
    .main-nav a { padding: 9px; }
    .main-nav span { display: none; }
    .hero { padding: 56px 0; }
    .hero h1 { font-size: 42px; }
    .hero p { font-size: 16px; }
    .hero-panel { grid-template-columns: 1fr; }
    .tools-section, .page-section { padding: 44px 0 70px; }
    .section-heading { align-items: stretch; flex-direction: column; }
    .search-box { min-width: 0; width: 100%; }
    .tool-grid { grid-template-columns: 1fr; }
    .tool-main { padding: 20px; }
    .tool-title { flex-direction: column; }
    .fields-grid { grid-template-columns: 1fr; }
    .tool-aside { grid-template-columns: 1fr; }
    .job-row { grid-template-columns: 42px 1fr auto; }
    .job-size, .job-row .status-pill { display: none; }
    .status-card { padding: 28px 18px; }
    .status-stats { grid-template-columns: 1fr; }
    .admin-metrics { grid-template-columns: 1fr; }
    .tool-admin-row { grid-template-columns: 42px 1fr; }
    .tool-admin-row .button, .tool-admin-row .check-row, .tool-admin-row .inline-field { grid-column: 2; }
    .filter-bar { align-items: stretch; flex-direction: column; }
    .filter-bar select { width: 100%; }
    .editor-header { align-items: flex-start; flex-direction: column; }
    .editor-actions { width: 100%; }
    .editor-actions .button { flex: 1; }
    .editor-workspace { grid-template-columns: 1fr; }
    .editor-toolbar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .editor-toolbar h2, .editor-toolbar hr, .editor-toolbar label, .editor-toolbar .two-fields { grid-column: 1 / -1; }
    .editor-canvas-shell { min-height: 480px; }
    .editor-pages { grid-template-columns: repeat(2, 1fr); }
    .footer-shell { align-items: flex-start; flex-direction: column; justify-content: center; }
}
.health-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; padding: 16px; }
.health-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
.health-icon.ok { color: var(--success); background: var(--success-soft); }
.health-icon.bad { color: var(--danger); background: var(--danger-soft); }
.diagnostic-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 18px; }
.diagnostic-note > svg { color: var(--primary); }
.diagnostic-note strong { font-family: "Manrope", sans-serif; }
.diagnostic-note p { margin: 6px 0 0; color: var(--muted); }
.diagnostic-note code { color: var(--primary); font-weight: 700; }

/* EduCoast preview-first upgrade */
.visual-workspace{margin-top:24px;border:1px solid #dbe3ee;border-radius:20px;background:#f8fafc;padding:20px}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.workspace-heading h2{margin:3px 0 0}.workspace-actions{display:flex;gap:8px}.button-small{padding:9px 13px;font-size:.86rem}.preview-stage{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}.preview-stage.mode-watermark,.preview-stage.mode-first-page{justify-content:center;background:#e7edf5;border-radius:16px;padding:24px;overflow:auto}.preview-loading,.preview-error{width:100%;padding:32px;text-align:center;color:#64748b}.preview-loading svg{animation:spin 1s linear infinite}.preview-note{font-size:.82rem;color:#64748b;margin:14px 0 0}.page-thumbnail{position:relative;width:180px;border:2px solid transparent;border-radius:14px;background:#fff;padding:8px;box-shadow:0 8px 24px rgba(15,23,42,.08);cursor:pointer;transition:.18s}.page-thumbnail:hover{transform:translateY(-2px)}.page-thumbnail.selected{border-color:#2563eb;background:#eff6ff}.page-thumbnail.dragging-page{opacity:.45}.page-canvas{border-radius:8px;overflow:hidden;background:white}.page-canvas canvas{display:block;width:100%;height:auto}.page-thumbnail label{display:flex;align-items:center;gap:8px;padding:9px 4px 2px;font-weight:700}.page-thumbnail input{accent-color:#2563eb}.page-drag{position:absolute;right:8px;bottom:8px;color:#64748b}.watermark-preview{position:relative;display:inline-block;line-height:0;box-shadow:0 18px 45px rgba(15,23,42,.2);background:white;overflow:hidden}.watermark-preview canvas{max-width:100%;height:auto;display:block}.live-watermark{position:absolute;left:35%;top:42%;width:30%;min-width:80px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;line-height:1.1;cursor:move;user-select:none;border:1px dashed #2563eb;background:rgba(255,255,255,.15);transform-origin:center;opacity:.25}.live-watermark span{font-size:32px;font-weight:800;white-space:nowrap;color:#64748b}.live-watermark img{width:100%;height:auto;object-fit:contain}.resize-handle{position:absolute;right:-7px;bottom:-7px;width:15px;height:15px;border:2px solid white;border-radius:50%;background:#2563eb;cursor:nwse-resize}.seo-content{margin-top:26px;padding:28px}.seo-content h2{margin-top:0}.seo-content ol{padding-left:22px;line-height:1.8}.popular-grid{margin-bottom:12px}@media(max-width:700px){.workspace-heading{align-items:flex-start;flex-direction:column}.page-thumbnail{width:calc(50% - 7px)}.visual-workspace{padding:12px}.preview-stage.mode-watermark{padding:10px}}

/* Public trust metrics: never expose queue failures or operational health. */
.public-stat-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-stat-panel .metric {
    min-width: 0;
}
.public-stat-panel .metric strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .public-stat-panel {
        grid-template-columns: 1fr;
    }
}

/* Professional PDF editor */
.pro-editor.container { width: min(1500px, calc(100% - 32px)); }
.pro-editor .editor-header { padding: 20px 22px; border-radius: 16px 16px 10px 10px; box-shadow: 0 8px 28px rgba(15, 23, 42, .06); }
.editor-header-status { display: flex; align-items: center; gap: 18px; }
.retention-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; color: #087052; border: 1px solid #a9e6cf; border-radius: 9px; background: #effcf6; font-size: 12px; font-weight: 800; white-space: nowrap; }
.retention-chip svg { width: 16px; height: 16px; }
.editor-commandbar { min-height: 54px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: 8px; padding: 7px 12px; border-radius: 10px; box-shadow: none; }
.editor-commandbar > div:first-child { display: flex; gap: 3px; }
.icon-command { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px; color: #334155; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.icon-command:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); }
.icon-command:disabled { opacity: .35; cursor: default; }
.icon-command svg { width: 17px; }
.editor-file-summary { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; }
.editor-file-summary svg { flex: 0 0 auto; width: 17px; color: var(--success); }
.editor-file-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoom-control { display: flex; align-items: center; gap: 9px; color: #475569; font-size: 11px; font-weight: 700; }
.zoom-control input { width: 100px; accent-color: var(--primary); }
.zoom-control output { width: 34px; color: var(--primary); }

.pro-editor .editor-workspace { grid-template-columns: 310px minmax(500px, 1fr) 250px; gap: 10px; margin-top: 10px; }
.pro-editor .editor-toolbar { top: 86px; max-height: calc(100vh - 105px); padding: 0; overflow: hidden auto; border-radius: 12px; box-shadow: 0 8px 28px rgba(15, 23, 42, .06); }
.editor-tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); }
.editor-toolbar .editor-tabs button { justify-content: center; flex-direction: column; gap: 4px; min-height: 50px; padding: 5px 2px; border-radius: 7px; color: #64748b; font-size: 10px; }
.editor-toolbar .editor-tabs button svg { width: 17px; height: 17px; }
.editor-toolbar .editor-tabs button.active { color: var(--primary); background: var(--primary-soft); }
.editor-panel { display: none; padding: 16px; }
.editor-panel.active { display: block; }
.panel-heading { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.panel-heading > span { font: 800 15px/1.2 "Manrope", sans-serif; }
.panel-heading small { color: var(--muted); line-height: 1.45; }
.tool-button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.pro-editor .editor-toolbar button { min-height: 40px; border: 1px solid transparent; }
.pro-editor .editor-toolbar button:hover { border-color: #cad9fb; }
.pro-editor .editor-toolbar button.primary-tool { justify-content: center; margin-top: 12px; color: #fff; background: var(--primary); }
.pro-editor .editor-toolbar button.primary-tool:hover { color: #fff; background: var(--primary-dark); }
.pro-editor .editor-toolbar button.redact-tool { justify-content: center; margin-top: 12px; color: #fff; background: #202939; }
.pro-editor .editor-toolbar button.redact-tool:hover { color: #fff; border-color: #202939; background: #111827; }
.editor-toolbar textarea, .editor-toolbar select { width: 100%; margin-top: 5px; padding: 9px 10px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: #fff; outline: none; resize: vertical; }
.editor-toolbar select { height: 38px; padding-block: 0; }
.editor-toolbar textarea:focus, .editor-toolbar select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21, 94, 239, .1); }
.pro-editor .editor-toolbar label { margin-top: 11px; }
.pro-editor .editor-toolbar input { border-radius: 8px; }
.four-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.four-fields label { min-width: 0; font-size: 10px; }
.four-fields input { min-width: 0; padding: 0 6px !important; }
.editor-disclosure { margin-top: 10px; padding: 3px 10px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; }
.editor-disclosure summary { display: flex; align-items: center; gap: 8px; padding: 9px 0; cursor: pointer; color: #334155; font-size: 12px; font-weight: 800; list-style: none; }
.editor-disclosure summary::-webkit-details-marker { display: none; }
.editor-disclosure summary svg { width: 16px; color: var(--primary); }
.editor-disclosure p { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.panel-divider { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; color: #94a3b8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.panel-divider::before, .panel-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tool-warning { display: flex; gap: 7px; margin: 8px 0 14px; padding: 9px; color: #9a3412; border: 1px solid #fed7aa; border-radius: 8px; background: #fff7ed; font-size: 10px; line-height: 1.45; }
.tool-warning svg { flex: 0 0 auto; width: 15px; }
.editor-file-label span { display: block; margin-bottom: 5px; }
.editor-tool-links { display: grid; gap: 6px; }
.editor-tool-links a { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.editor-tool-links a:hover { border-color: #aac2f8; background: #f8faff; }
.editor-tool-links > a > svg { width: 17px; margin: auto; color: var(--primary); }
.editor-tool-links span { min-width: 0; display: flex; flex-direction: column; }
.editor-tool-links strong { font-size: 11px; }
.editor-tool-links small { color: var(--muted); font-size: 9px; }
.capability-note { display: flex; gap: 8px; margin-top: 12px; padding: 10px; color: #475569; border-radius: 8px; background: #f1f5f9; font-size: 10px; }
.capability-note svg { flex: 0 0 auto; width: 15px; color: var(--primary); }
.capability-note p { margin: 0; }
.reset-editor { margin: 0 16px 16px; width: calc(100% - 32px) !important; justify-content: center; color: var(--danger) !important; background: var(--danger-soft) !important; }

.pro-editor .editor-canvas-shell { min-height: 740px; padding: 24px; overflow: auto; border-radius: 12px; background: #e9eef5; box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .55); }
.pro-editor .editor-empty { min-height: 685px; }
.pro-editor .editor-empty > span { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 18px; color: var(--primary); background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .1); }
.pro-editor .editor-empty > span svg { width: 33px; height: 33px; color: inherit; }
.pro-editor .editor-empty p { max-width: 480px; margin-bottom: 20px; }
.pro-editor .editor-pages { --editor-page-width: 182px; grid-template-columns: repeat(auto-fill, minmax(var(--editor-page-width), 1fr)); align-items: start; gap: 20px; }
.pro-editor .editor-page-card { padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 23, 42, .14); }
.pro-editor .editor-page-card:hover { transform: translateY(-2px); }
.pro-editor .editor-page-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21, 94, 239, .14), 0 12px 30px rgba(15, 23, 42, .16); }
.pro-editor .page-canvas-wrap { min-height: 180px; display: grid; place-items: center; padding: 10px; background: #dce3ec; }
.pro-editor .page-canvas-wrap canvas { max-height: 360px; object-fit: contain; transform-origin: center; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.page-index { position: absolute; left: 8px; top: 8px; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 6px; color: #fff; border-radius: 6px; background: rgba(15, 23, 42, .78); font-size: 10px; font-weight: 800; }
.page-card-meta { position: relative; display: flex; flex-direction: column; padding: 10px 32px 10px 11px; background: #fff; }
.page-card-meta strong { margin: 0 !important; }
.page-card-meta > svg { position: absolute; right: 8px; top: 13px; width: 15px; color: #94a3b8; }
.editor-page-card.dragging-page { opacity: .4; }

.pro-editor .editor-inspector { top: 86px; padding: 16px; border-radius: 12px; box-shadow: 0 8px 28px rgba(15, 23, 42, .06); }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: 800 13px/1 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.edit-count { padding: 5px 7px; color: var(--primary); border-radius: 6px; background: var(--primary-soft); font: 800 9px/1 "DM Sans", sans-serif; }
.selected-page-card { display: flex; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc; }
.selected-page-card > div { display: flex; flex-direction: column; gap: 3px; font-size: 10px; }
.selected-page-card strong { font-size: 11px; }
.selected-page-preview { width: 34px; height: 42px; display: grid; place-items: center; color: var(--primary); border: 1px solid #cad9fb; border-radius: 5px; background: #fff; }
.selected-page-preview svg { width: 16px; }
.operation-list { display: grid; gap: 5px; max-height: 330px; overflow: auto; }
.operation-item { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; color: #475569; background: #fff; font-size: 10px; font-weight: 700; text-transform: none; }
.operation-item svg { width: 13px; color: var(--success); }
.editor-integrity { display: flex; gap: 9px; margin-top: 18px; padding: 11px; border-radius: 9px; color: #245c4c; background: #effaf6; }
.editor-integrity > svg { flex: 0 0 auto; width: 17px; }
.editor-integrity strong { font-size: 10px; }
.editor-integrity p { margin: 4px 0 0; font-size: 9px; line-height: 1.45; }
.editor-seo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; margin-top: 18px; padding: 28px; }
.editor-seo h2 { margin: 9px 0 8px; font: 800 24px/1.2 "Manrope", sans-serif; }
.editor-seo p { max-width: 820px; margin: 0; color: var(--muted); }
.editor-feature-list { display: grid; grid-template-columns: repeat(2, auto); gap: 8px; }
.editor-feature-list span { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; font-weight: 800; }
.editor-feature-list svg { width: 15px; color: var(--primary); }
.editor-loading .editor-canvas-shell { cursor: progress; }
.pro-editor .tool-icon > i:not(:has(svg))::before { content: "PDF"; font: 800 10px/1 "Manrope", sans-serif; }
.pro-editor .editor-empty > span > i:not(:has(svg))::before { content: "+ PDF"; font: 800 11px/1 "Manrope", sans-serif; }

@media (max-width: 1250px) {
    .pro-editor .editor-workspace { grid-template-columns: 300px minmax(450px, 1fr); }
    .pro-editor .editor-inspector { display: none; }
    .editor-header-status { align-items: flex-end; flex-direction: column; gap: 8px; }
}
@media (max-width: 900px) {
    .pro-editor.container { width: min(100% - 20px, 1500px); }
    .pro-editor .editor-workspace { grid-template-columns: 1fr; }
    .pro-editor .editor-toolbar { position: static; display: block; max-height: none; }
    .editor-commandbar { grid-template-columns: auto 1fr; }
    .zoom-control { display: none; }
    .editor-seo { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .pro-editor .editor-header { padding: 16px; }
    .editor-header-status, .editor-actions { width: 100%; align-items: stretch; }
    .retention-chip { justify-content: center; }
    .editor-actions { display: grid; grid-template-columns: 1fr; }
    .editor-commandbar { grid-template-columns: 1fr; }
    .editor-file-summary { justify-content: flex-start; padding: 0 7px 7px; }
    .pro-editor .editor-canvas-shell { min-height: 520px; padding: 12px; }
    .pro-editor .editor-empty { min-height: 490px; }
    .pro-editor .editor-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tool-button-grid, .editor-feature-list { grid-template-columns: 1fr; }
    .editor-seo { padding: 20px; }
}

/* Direct visual PDF editor */
.direct-editor-page { --editor-chrome: #fff; width: 100%; color: #172033; background: #dfe5ed; }
.direct-editor-page form { min-height: 760px; }
.direct-editor-head { min-height: 66px; display: grid; grid-template-columns: auto auto minmax(160px, 1fr) auto; align-items: center; gap: 14px; padding: 8px 18px; border-bottom: 1px solid #d7dee9; background: var(--editor-chrome); }
.direct-back, .direct-head-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; color: #46536a; border: 1px solid #dce3ed; border-radius: 8px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }
.direct-back { width: 42px; padding: 0; }
.direct-title { display: flex; align-items: center; gap: 9px; }
.direct-pdf-mark { width: 38px; height: 42px; display: grid; place-items: center; color: #fff; border-radius: 7px; background: #155eef; font-size: 9px; font-weight: 900; }
.direct-title > div { display: flex; flex-direction: column; }
.direct-title span:not(.direct-pdf-mark) { color: #155eef; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.direct-title h1 { margin: 2px 0 0; font: 800 18px/1 "Manrope", sans-serif; }
.direct-document-name { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: #617086; font-size: 11px; }
.direct-document-name svg { flex: 0 0 auto; width: 16px; color: #07916c; }
.direct-document-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-head-actions { display: flex; gap: 7px; }
.direct-apply { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 17px; color: #fff; border: 0; border-radius: 8px; background: #155eef; box-shadow: 0 7px 18px rgba(21,94,239,.22); cursor: pointer; font-size: 12px; font-weight: 900; }
.direct-apply:disabled { opacity: .45; cursor: not-allowed; }

.direct-toolbar { min-height: 64px; display: flex; align-items: stretch; gap: 2px; padding: 6px 14px; overflow-x: auto; border-bottom: 1px solid #d4dce7; background: #f8fafc; box-shadow: 0 4px 13px rgba(15,23,42,.04); }
.direct-toolbar button { flex: 0 0 auto; min-width: 54px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 4px 7px; color: #526079; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.direct-toolbar button svg { width: 18px; height: 18px; }
.direct-toolbar button:hover, .direct-toolbar button.active { color: #155eef; border-color: #c9d9fb; background: #eaf1ff; }
.direct-toolbar button:disabled { opacity: .3; cursor: default; }
.direct-tool-separator { width: 1px; flex: 0 0 auto; margin: 5px 5px; background: #d7dee8; }
.direct-toolbar output { min-width: 42px; display: grid; place-items: center; color: #155eef; font-size: 10px; font-weight: 900; }

.direct-editor-shell { min-height: calc(100vh - 205px); display: grid; grid-template-columns: 150px minmax(480px, 1fr) 260px; }
.direct-editor-page.properties-closed .direct-editor-shell { grid-template-columns: 150px minmax(480px, 1fr) 0; }
.direct-editor-page.properties-closed .direct-properties { display: none; }
.direct-pages-panel, .direct-properties { min-width: 0; background: #fff; }
.direct-pages-panel { display: flex; flex-direction: column; border-right: 1px solid #ccd5e2; }
.direct-properties { border-left: 1px solid #ccd5e2; }
.direct-panel-heading { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 13px; border-bottom: 1px solid #e3e8ef; font: 800 11px/1 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.direct-panel-heading > span { min-width: 23px; height: 23px; display: grid; place-items: center; color: #155eef; border-radius: 6px; background: #eaf1ff; font-size: 9px; }
.direct-panel-heading button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.direct-panel-heading button svg { width: 15px; }
.direct-thumbnails { flex: 1; display: grid; align-content: start; gap: 8px; padding: 10px; overflow-y: auto; background: #f5f7fa; }
.direct-thumbnail { min-width: 0; padding: 6px; color: #334155; border: 2px solid transparent; border-radius: 7px; background: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(15,23,42,.08); }
.direct-thumbnail:hover, .direct-thumbnail.selected { border-color: #155eef; }
.direct-thumbnail.removed { opacity: .42; filter: grayscale(1); }
.thumbnail-canvas { display: grid; place-items: center; overflow: hidden; background: #e7ecf3; }
.thumbnail-canvas canvas { display: block; width: 100%; height: auto; }
.direct-thumbnail strong { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.direct-thumbnail.dragging { opacity: .35; }
.direct-page-actions { display: grid; grid-template-columns: repeat(3, 1fr); padding: 7px; border-top: 1px solid #e3e8ef; }
.direct-page-actions button { display: flex; align-items: center; flex-direction: column; gap: 3px; padding: 6px 2px; color: #64748b; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 8px; font-weight: 800; }
.direct-page-actions button:hover { color: #155eef; background: #eaf1ff; }
.direct-page-actions svg { width: 15px; }

.direct-stage { position: relative; min-width: 0; max-height: calc(100vh - 130px); overflow: auto; background: #dfe5ed; }
.direct-stage.loading { cursor: progress; }
.direct-upload-state { min-height: calc(100vh - 205px); display: grid; place-items: center; align-content: center; padding: 45px 20px; text-align: center; background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.8), rgba(255,255,255,0) 33%); }
.direct-upload-icon { width: 82px; height: 82px; display: grid; place-items: center; margin-bottom: 18px; color: #155eef; border-radius: 20px; background: #fff; box-shadow: 0 15px 42px rgba(15,23,42,.13); }
.direct-upload-icon svg { width: 36px; height: 36px; }
.direct-upload-state h2 { max-width: 690px; margin: 12px 0 8px; font: 800 clamp(28px,4vw,44px)/1.1 "Manrope",sans-serif; letter-spacing: -.04em; }
.direct-upload-state p { max-width: 670px; margin: 0; color: #64748b; font-size: 15px; }
.direct-upload-state .button { margin-top: 22px; }
.direct-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.direct-trust-row span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: #536278; border-radius: 7px; background: rgba(255,255,255,.75); font-size: 9px; font-weight: 800; }
.direct-trust-row svg { width: 14px; color: #07916c; }
.direct-pages { min-width: max-content; display: grid; justify-items: center; gap: 32px; padding: 35px 60px 90px; }
.direct-loading { width: min(580px,80vw); min-height: 400px; display: grid; place-items: center; align-content: center; gap: 9px; color: #64748b; }
.direct-loading svg { width: 35px; animation: spin 1s linear infinite; }
.direct-loading strong { color: #1e293b; }
.direct-pdf-page { position: relative; flex: 0 0 auto; transition: width .15s ease; }
.direct-pdf-page.selected-page .direct-page-surface { box-shadow: 0 0 0 3px rgba(21,94,239,.22), 0 18px 50px rgba(15,23,42,.23); }
.direct-page-label { margin-bottom: 6px; color: #657388; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.direct-page-surface { position: relative; overflow: hidden; background: #fff; box-shadow: 0 16px 44px rgba(15,23,42,.2); transform-origin: center; }
.direct-page-surface > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.direct-text-layer, .direct-object-layer { position: absolute; inset: 0; }
.direct-text-layer { z-index: 2; }
.direct-object-layer { z-index: 3; pointer-events: none; }
.direct-text-hit { position: absolute; padding: 0; color: transparent; border: 1px solid transparent; background: transparent; cursor: text; }
[data-active-tool="text"] .direct-text-hit, [data-active-tool="select"] .direct-text-hit:hover { border-color: rgba(21,94,239,.5); background: rgba(21,94,239,.06); }
.direct-draw-preview { position: absolute; z-index: 20; border: 2px dashed #155eef; background: rgba(21,94,239,.1); pointer-events: none; }
.preview-whiteout { border-color: #64748b; background: rgba(255,255,255,.9); }
.preview-cutout { border-color: #e11d48; background: repeating-linear-gradient(45deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 6px,rgba(225,29,72,.12) 6px,rgba(225,29,72,.12) 12px); }
.preview-redact { border-color: #111827; background: rgba(17,24,39,.82); }
.preview-highlight { border-color: #eab308; background: rgba(250,204,21,.38); }
.direct-freehand-preview { position:absolute; inset:0; z-index:20; width:100%; height:100%; overflow:visible; pointer-events:none; }
.direct-freehand-preview polyline { fill:none; stroke:#155eef; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }

.direct-object { position: absolute; z-index: 3; min-width: 4px; min-height: 4px; border: 1px solid transparent; cursor: move; }
.direct-object { pointer-events: auto; }
[data-active-tool="whiteout"] .direct-object,
[data-active-tool="cutout"] .direct-object,
[data-active-tool="redact"] .direct-object,
[data-active-tool="highlight"] .direct-object,
[data-active-tool="draw"] .direct-object,
[data-active-tool="rectangle"] .direct-object,
[data-active-tool="ellipse"] .direct-object,
[data-active-tool="arrow"] .direct-object,
[data-active-tool="link"] .direct-object,
[data-active-tool="form"] .direct-object { pointer-events: none; }
.direct-object:hover, .direct-object.selected { border-color: #155eef; box-shadow: 0 0 0 2px rgba(21,94,239,.14); }
.direct-resize-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; display: none; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #155eef; cursor: nwse-resize; }
.direct-object.selected .direct-resize-handle { display: block; }
.direct-inline-text { width: 100%; height: 100%; min-height: 100%; padding: 1px 2px; overflow: hidden; background: rgba(255,255,255,.88); outline: none; line-height: 1.15; white-space: pre-wrap; cursor: text; }
.object-image img, .object-signature img { width: 100%; height: 100%; display: block; object-fit: contain; }
.object-whiteout { background: #fff; box-shadow: inset 0 0 0 1px #e2e8f0; }
.object-cutout { color: #be123c; border: 1px dashed #e11d48; background: repeating-linear-gradient(45deg,rgba(255,255,255,.86),rgba(255,255,255,.86) 7px,rgba(225,29,72,.12) 7px,rgba(225,29,72,.12) 14px); }
.object-redact { display: grid; place-items: center; color: #fff; background: #111827; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.object-highlight { background: var(--object-color); mix-blend-mode: multiply; }
.object-rectangle { border: var(--object-line-width) solid var(--object-color); }
.object-ellipse { border: var(--object-line-width) solid var(--object-color); border-radius: 50%; }
.object-arrow svg,.object-draw svg { display:block; width:100%; height:100%; overflow:visible; color:var(--object-color); }
.object-arrow line { stroke:currentColor; stroke-width:var(--object-line-width); vector-effect:non-scaling-stroke; }
.object-arrow marker path { fill:currentColor; }
.object-draw polyline { fill:none; stroke:currentColor; stroke-width:var(--object-line-width); stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.object-link, .object-form { display: grid; place-items: center; color: #155eef; border: 1px dashed #155eef; background: rgba(21,94,239,.1); font-size: 8px; font-weight: 900; }

.direct-no-selection { display: grid; place-items: center; padding: 30px 18px; text-align: center; }
.direct-no-selection svg { width: 30px; color: #94a3b8; }
.direct-no-selection strong { margin-top: 10px; font-size: 12px; }
.direct-no-selection p { margin: 5px 0 0; color: #718096; font-size: 10px; }
.direct-property-form { display: grid; gap: 10px; padding: 13px; border-bottom: 1px solid #e3e8ef; }
.direct-property-form label { display: flex; flex-direction: column; gap: 4px; color: #526079; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.direct-property-form input, .direct-property-form select, .direct-property-form textarea { width: 100%; min-width: 0; padding: 8px; color: #172033; border: 1px solid #d7dee9; border-radius: 6px; background: #fff; outline: none; font-size: 11px; text-transform: none; letter-spacing: 0; }
.direct-property-form input[type="color"] { height: 36px; padding: 3px; }
.direct-property-form input[type="range"] { padding: 0; accent-color: #155eef; }
.direct-property-form output { color:#155eef; font-size:9px; font-weight:900; }
.property-two, .property-form-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.direct-object-type { width: fit-content; padding: 5px 7px; color: #155eef; border-radius: 5px; background: #eaf1ff; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.direct-property-form:not([data-type="text"]) .property-text-field, .direct-property-form:not([data-type="text"]) .property-text-style { display: none; }
.direct-property-form:not([data-type="link"]) .property-url-field { display: none; }
.direct-property-form:not([data-type="form"]) .property-form-fields { display: none; }
.direct-property-form:not([data-type="form"]) .property-form-choices { display: none; }
.property-line-width { display:none!important; }
.direct-property-form[data-type="draw"] .property-line-width,
.direct-property-form[data-type="rectangle"] .property-line-width,
.direct-property-form[data-type="ellipse"] .property-line-width,
.direct-property-form[data-type="arrow"] .property-line-width { display:flex!important; }
.direct-delete-object { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 3px; color: #b42318; border: 1px solid #fecdca; border-radius: 6px; background: #fef3f2; cursor: pointer; font-size: 10px; font-weight: 900; }
.direct-delete-object svg { width: 14px; }
.direct-tool-help, .direct-security-note { margin: 12px; padding: 11px; border-radius: 8px; background: #f3f6fa; }
.direct-tool-help strong { font-size: 10px; }
.direct-tool-help p, .direct-security-note p { margin: 4px 0 0; color: #627086; font-size: 9px; line-height: 1.5; }
.direct-security-note { display: flex; gap: 7px; color: #9a3412; border: 1px solid #fed7aa; background: #fff7ed; }
.direct-security-note svg { flex: 0 0 auto; width: 15px; }
.direct-security-note p { margin: 0; color: inherit; }

.direct-editor-page:fullscreen, .direct-editor-page.forced-fullscreen { position: fixed; inset: 0; z-index: 9999; overflow: auto; background: #dfe5ed; }
.direct-editor-page:fullscreen .direct-editor-shell, .direct-editor-page.forced-fullscreen .direct-editor-shell { min-height: calc(100vh - 130px); }
.direct-editor-page:fullscreen .direct-stage, .direct-editor-page.forced-fullscreen .direct-stage { max-height: calc(100vh - 130px); }
.direct-editor-seo { padding: 52px 0 90px; }
.direct-seo-intro { padding: 32px; }
.direct-seo-intro h2 { margin: 10px 0 9px; font: 800 30px/1.15 "Manrope",sans-serif; letter-spacing: -.035em; }
.direct-seo-intro p { max-width: 960px; margin: 0; color: #64748b; font-size: 15px; line-height: 1.7; }
.direct-seo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 12px; }
.direct-seo-grid article { padding: 20px; border: 1px solid #dbe3ee; border-radius: 12px; background: #fff; }
.direct-seo-grid svg { color: #155eef; }
.direct-seo-grid h3 { margin: 13px 0 6px; font: 800 14px/1.3 "Manrope",sans-serif; }
.direct-seo-grid p { margin: 0; color: #64748b; font-size: 11px; line-height: 1.55; }
.direct-faq { max-width: 850px; margin: 42px auto 0; }
.direct-faq h2 { margin: 7px 0 16px; font: 800 24px/1.2 "Manrope",sans-serif; }
.direct-faq details { border-top: 1px solid #dbe3ee; background: #fff; }
.direct-faq details:last-child { border-bottom: 1px solid #dbe3ee; }
.direct-faq summary { padding: 16px 4px; color: #172033; cursor: pointer; font: 800 13px/1.4 "Manrope",sans-serif; }
.direct-faq details p { margin: -3px 4px 17px; color: #64748b; font-size: 11px; line-height: 1.65; }

@media (max-width: 1050px) {
    .direct-editor-shell { grid-template-columns: 120px minmax(400px,1fr); }
    .direct-properties { position: fixed; z-index: 70; right: 0; top: 130px; bottom: 0; width: 280px; overflow-y: auto; box-shadow: -12px 0 30px rgba(15,23,42,.13); }
    .direct-document-name { display: none; }
    .direct-editor-head { grid-template-columns: auto 1fr auto; }
    .direct-seo-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px) {
    .direct-editor-head { min-height: 58px; padding: 7px; gap: 6px; }
    .direct-title > div span, .direct-title > div h1 { display: none; }
    .direct-pdf-mark { width: 34px; height: 38px; }
    .direct-head-button span, .direct-apply span { display: none; }
    .direct-head-button, .direct-apply { width: 42px; padding: 0; }
    .direct-editor-shell { grid-template-columns: 1fr; }
    .direct-pages-panel { display: none; }
    .direct-properties { top: 122px; width: min(300px,88vw); }
    .direct-stage { max-height: calc(100vh - 122px); }
    .direct-pages { gap: 20px; padding: 24px 10px 70px; }
    .direct-pdf-page { max-width: calc(100vw - 24px); }
    .direct-upload-state { min-height: calc(100vh - 122px); }
    .direct-toolbar { min-height: 64px; padding-inline: 5px; }
    .direct-toolbar button { min-width: 50px; }
    .direct-seo-grid { grid-template-columns: 1fr; }
    .direct-editor-seo { padding: 34px 0 60px; }
}

/* Visual PDF Brander */
.brander-page { width: min(1480px,calc(100% - 30px)); padding: 28px 0 85px; }
.brander-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-radius: 14px; }
.brander-head-actions { display: flex; align-items: center; gap: 8px; }
.brander-head-actions > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: #087052; border: 1px solid #a9e6cf; border-radius: 8px; background: #effcf6; font-size: 10px; font-weight: 900; }
.brander-head-actions > span svg { width: 14px; }
.brander-shell { display: grid; grid-template-columns: 290px minmax(500px,1fr) 220px; align-items: start; gap: 10px; margin-top: 10px; }
.brander-controls, .brander-layers { position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow: hidden auto; border-radius: 12px; }
.brander-controls { padding: 0; }
.brander-tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); padding: 6px; border-bottom: 1px solid #e1e7ef; background: rgba(255,255,255,.97); }
.brander-tabs button { min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 3px; padding: 7px 2px; color: #657388; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: 8px; font-weight: 900; }
.brander-tabs button svg { width: 16px; }
.brander-tabs button.active { color: #155eef; background: #eaf1ff; }
.brand-panel { display: none; padding: 15px; }
.brand-panel.active { display: block; }
.brand-panel > label, .brand-panel .two-fields > label { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; color: #536177; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.brand-panel input:not([type="checkbox"]):not([type="range"]), .brand-panel select, .brand-panel textarea { width: 100%; min-width: 0; padding: 8px; color: #172033; border: 1px solid #d7dee9; border-radius: 7px; background: #fff; outline: none; font-size: 11px; text-transform: none; }
.brand-panel input[type="color"] { height: 38px; padding: 3px !important; }
.brand-panel input[type="range"] { width: 100%; accent-color: #155eef; }
.brand-panel output { color: #155eef; font-size: 9px; }
.brand-panel .check-row { flex-direction: row; align-items: flex-start; text-transform: none; letter-spacing: 0; }
.brand-add-button, .brand-secondary-action { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; color: #fff; border: 0; border-radius: 8px; background: #155eef; cursor: pointer; font-size: 11px; font-weight: 900; }
.brand-secondary-action { color: #155eef; border: 1px solid #c9d9fb; background: #eef4ff; }
.brander-tip { display: flex; gap: 7px; margin: 15px 0 0; padding: 10px; color: #64748b; border-radius: 8px; background: #f2f5f9; font-size: 9px; }
.brander-tip svg { flex: 0 0 auto; width: 14px; color: #155eef; }
.brand-page-buttons { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.brand-page-buttons button { min-height: 42px; display: flex; align-items: center; gap: 6px; padding: 7px; color: #536177; border: 1px solid #e1e7ef; border-radius: 7px; background: #fff; cursor: pointer; text-align: left; font-size: 9px; font-weight: 800; }
.brand-page-buttons button svg { width: 14px; }
.brand-page-buttons button:hover { color: #155eef; border-color: #b7caf5; }
.brand-page-buttons button.danger { color: #b42318; }
.brand-panel-copy { margin: 0; color: #64748b; font-size: 10px; }
.brand-presets { display: grid; gap: 6px; margin-top: 12px; }
.brand-presets button { display: grid; grid-template-columns: 26px 1fr 20px; align-items: center; gap: 6px; padding: 8px; color: #334155; border: 1px solid #e1e7ef; border-radius: 7px; background: #fff; cursor: pointer; text-align: left; }
.brand-presets button span { display: flex; flex-direction: column; }
.brand-presets strong { font-size: 9px; }.brand-presets small { color: #64748b; font-size: 8px; }

.brander-workspace { min-height: 760px; overflow: hidden; border-radius: 12px; }
.brander-workspace-bar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; border-bottom: 1px solid #dce3ed; }
.brander-workspace-bar > div:first-child { min-width: 0; display: flex; flex-direction: column; }
.brander-workspace-bar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.brander-workspace-bar span { color: #64748b; font-size: 9px; }
.brander-workspace-bar > div:last-child { display: flex; gap: 4px; }
.brander-workspace-bar button { display: inline-flex; align-items: center; gap: 5px; padding: 7px; color: #536177; border: 1px solid #dce3ed; border-radius: 6px; background: #fff; cursor: pointer; font-size: 9px; font-weight: 800; }
.brander-workspace-bar button:disabled { opacity: .35; }
.brander-workspace-bar svg { width: 14px; }
.brander-empty { min-height: 705px; display: grid; place-items: center; align-content: center; padding: 30px; text-align: center; background: #e9eef5; }
.brander-empty > span { width: 76px; height: 76px; display: grid; place-items: center; color: #155eef; border-radius: 20px; background: #fff; box-shadow: 0 15px 38px rgba(15,23,42,.12); }
.brander-empty > span svg { width: 32px; }
.brander-empty h2 { margin: 18px 0 7px; font: 800 26px/1.2 "Manrope",sans-serif; }
.brander-empty p { max-width: 500px; margin: 0 0 18px; color: #64748b; }
.brander-preview { min-height: 705px; display: grid; place-items: start center; padding: 34px; overflow: auto; background: #dfe5ed; }
.brander-page-canvas { width: min(760px,100%); }
.brander-loading { min-height: 600px; display: grid; place-items: center; align-content: center; gap: 8px; color: #64748b; }
.brander-loading svg { animation: spin 1s linear infinite; }
.brander-surface { position: relative; width: 100%; overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.24); }
.brander-surface > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-preview-object { position: absolute; z-index: 3; display: grid; place-items: center; transform-origin: center; cursor: move; user-select: none; }
.brand-preview-object:hover, .brand-preview-object.selected { outline: 2px solid #155eef; outline-offset: 2px; }
.brand-preview-object img { width: 100%; height: 100%; object-fit: contain; }
.brand-preview-object span { white-space: nowrap; font-weight: 700; }
.brand-preview-object.brand-stamp { border: 4px double currentColor; border-radius: 5px; }
.brand-resize { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; display: none; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #155eef; cursor: nwse-resize; }
.brand-preview-object.selected .brand-resize { display: block; }
.brand-tile-copy { pointer-events: none; }
.brand-tile-copy:hover { outline: 0; }

.brander-layers { padding: 0; }
.brander-layer-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #e1e7ef; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.brander-layer-head span { padding: 4px 6px; color: #155eef; border-radius: 5px; background: #eaf1ff; font-size: 8px; }
.brander-layer-list { display: grid; gap: 5px; padding: 9px; }
.brander-no-layers { padding: 24px 10px; color: #64748b; text-align: center; }
.brander-no-layers svg { width: 25px; }.brander-no-layers p { margin: 7px 0 0; font-size: 9px; }
.brand-layer-row { display: grid; grid-template-columns: 25px 1fr 17px; align-items: center; gap: 6px; padding: 8px; color: #334155; border: 1px solid #e1e7ef; border-radius: 7px; background: #fff; cursor: pointer; text-align: left; }
.brand-layer-row.selected { border-color: #155eef; background: #eef4ff; }
.brand-layer-row > svg { width: 14px; }.brand-layer-row span { display: flex; flex-direction: column; }.brand-layer-row strong { font-size: 9px; text-transform: capitalize; }.brand-layer-row small { color: #64748b; font-size: 8px; }
.brander-thumbnails { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; padding: 9px; border-top: 1px solid #e1e7ef; background: #f5f7fa; }
.brander-thumb { min-width: 0; padding: 4px; border: 2px solid transparent; border-radius: 6px; background: #fff; cursor: pointer; }
.brander-thumb.selected { border-color: #155eef; }.brander-thumb.removed { opacity: .4; filter: grayscale(1); }
.brander-thumb canvas { display: block; width: 100%; height: auto; }.brander-thumb span { display: block; margin-top: 3px; font-size: 8px; }
.brander-page:fullscreen { width: 100%; padding: 10px; overflow: auto; background: #f4f7fb; }
.brander-seo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 35px; margin-top: 16px; padding: 27px; }
.brander-seo h2 { margin: 9px 0 7px; font: 800 24px/1.2 "Manrope",sans-serif; }.brander-seo p { max-width: 850px; margin: 0; color: #64748b; }
.brander-seo-points { display: grid; grid-template-columns: repeat(2,auto); gap: 7px; }.brander-seo-points span { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #dce3ed; border-radius: 7px; font-size: 9px; font-weight: 900; }.brander-seo-points svg { width: 14px; color: #155eef; }

@media(max-width:1200px){.brander-shell{grid-template-columns:280px 1fr}.brander-layers{display:none}.brander-head-actions>span{display:none}}
@media(max-width:820px){.brander-page{width:min(100% - 18px,1480px)}.brander-head{align-items:flex-start;flex-direction:column}.brander-head-actions{width:100%}.brander-head-actions .button{flex:1}.brander-shell{grid-template-columns:1fr}.brander-controls{position:static;max-height:none}.brander-seo{grid-template-columns:1fr}.brander-workspace{min-height:600px}.brander-preview,.brander-empty{min-height:540px}}
@media(max-width:560px){.brander-head-actions{display:grid;grid-template-columns:1fr}.brander-workspace-bar{align-items:flex-start;flex-direction:column}.brander-preview{padding:15px}.brander-seo-points{grid-template-columns:1fr}.brand-page-buttons{grid-template-columns:1fr}}

/* Cohesive document-tool cards and workflow */
.tool-grid { gap: 12px; }
.tool-card { min-height: 166px; padding: 20px; overflow: hidden; border-radius: 12px; box-shadow: 0 6px 20px rgba(15,23,42,.045); }
.tool-card::after { content: ""; position: absolute; right: -42px; bottom: -48px; width: 120px; height: 120px; border: 20px solid #eef4ff; border-radius: 50%; opacity: .75; transition: .2s ease; }
.tool-card:hover::after { transform: scale(1.12); border-color: #dfeaff; }
.tool-card .tool-icon { position: relative; z-index: 1; border-radius: 10px; }
.tool-card .tool-copy { position: relative; z-index: 1; }
.tool-card-meta { display: flex; gap: 5px; margin: 0 0 8px; }
.tool-card-meta em { padding: 4px 6px; color: #5d6b80; border-radius: 5px; background: #f1f5f9; font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.tool-card-meta em:last-child { color: #087052; background: #eafaf4; }
.tool-card .tool-arrow { z-index: 2; }
.tool-card:hover .tool-arrow { color: #155eef; transform: translate(2px,-2px); }
.tool-card:hover { transform: translateY(-4px); border-color: #9fbcfa; box-shadow: 0 16px 38px rgba(15,23,42,.09); }
.tool-main.card { border-radius: 14px; box-shadow: 0 14px 42px rgba(15,23,42,.07); }
.dropzone { border-radius: 12px; background: linear-gradient(145deg,#f8fafc,#f2f6fb); }
.dropzone-content > span { border-radius: 12px; box-shadow: 0 8px 20px rgba(21,94,239,.1); }
.options-panel { border-radius: 11px; }

.workflow-page { width: min(1080px,calc(100% - 30px)); padding: 34px 0 86px; }
.workflow-shell { display: grid; grid-template-columns: 285px 1fr; overflow: hidden; border-radius: 16px; box-shadow: 0 18px 54px rgba(15,23,42,.09); }
.workflow-rail { display: flex; flex-direction: column; padding: 28px 23px; color: #dce6f5; background: linear-gradient(155deg,#0c1729,#162a4a); }
.workflow-product { display: flex; align-items: center; gap: 8px; color: #fff; font: 800 12px/1 "Manrope",sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.workflow-product svg { width: 18px; color: #82a9ff; }
.workflow-steps { display: grid; gap: 3px; margin-top: 42px; }
.workflow-steps > div { position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; min-height: 70px; opacity: .48; }
.workflow-steps > div:not(:last-child)::after { content:""; position:absolute; left:17px; top:52px; width:2px; height:35px; background:#526783; }
.workflow-steps > div.active, .workflow-steps > div.complete { opacity: 1; }
.workflow-steps > div > span { width: 36px; height: 36px; display:grid;place-items:center;border:1px solid #526783;border-radius:50%;background:#172a47; }
.workflow-steps > div.active > span { color:#fff;border-color:#6d99ff;background:#155eef;box-shadow:0 0 0 5px rgba(109,153,255,.12); }
.workflow-steps > div.complete > span { color:#fff;border-color:#1fba8a;background:#07916c; }
.workflow-steps svg { width:16px; }.workflow-steps .active svg { animation:spin 1.2s linear infinite; }
.workflow-steps > div > div { display:flex;flex-direction:column; }.workflow-steps strong{font-size:11px}.workflow-steps small{margin-top:4px;color:#9fb0c8;font-size:9px}
.workflow-privacy { display:flex;gap:9px;margin-top:auto;padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.05); }
.workflow-privacy > svg{flex:0 0 auto;width:18px;color:#6ee7b7}.workflow-privacy strong{font-size:9px}.workflow-privacy p{margin:4px 0 0;color:#9fb0c8;font-size:8px;line-height:1.55}
.workflow-main { min-width:0;padding:35px 42px;background:#fff; }
.workflow-tool-line{display:flex;align-items:center;gap:10px;padding-bottom:21px;border-bottom:1px solid #e6ebf2}.workflow-tool-icon{width:40px;height:40px;display:grid;place-items:center;color:#155eef;border-radius:9px;background:#eaf1ff}.workflow-tool-icon svg{width:19px}.workflow-tool-line>div{display:flex;flex-direction:column}.workflow-tool-line span:not(.workflow-tool-icon){color:#64748b;font-size:8px;text-transform:uppercase;letter-spacing:.06em;font-weight:900}.workflow-tool-line strong{margin-top:3px;font-size:11px}
.workflow-status-visual{text-align:center;padding:34px 0 5px}.workflow-status-visual .status-icon{margin-bottom:16px;border-radius:18px}.workflow-status-visual h1{margin:10px 0 7px;font:800 30px/1.15 "Manrope",sans-serif;letter-spacing:-.035em}.workflow-status-visual p{margin:0;color:#64748b}
.workflow-progress{margin-top:22px}.workflow-stats{margin-bottom:8px}.workflow-downloads{margin-top:22px;padding:18px;border:1px solid #a9e6cf;border-radius:11px;background:#f4fcf8}.workflow-download-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px}.workflow-download-heading h2{margin:5px 0 3px;font:800 18px/1.2 "Manrope",sans-serif}.workflow-download-heading p{margin:0;color:#527065;font-size:10px}.workflow-download-heading>svg{width:34px;height:34px;color:#07916c}.workflow-downloads .output-row{background:#fff}.workflow-downloads .output-row:last-child{border-bottom:1px solid var(--line)}
.workflow-actions{margin-top:23px}.workflow-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:14px;color:#64748b;font-size:9px;font-weight:800}.workflow-trust span{display:flex;align-items:center;gap:5px}.workflow-trust svg{width:14px;color:#07916c}
@media(max-width:760px){.workflow-page{width:min(100% - 18px,1080px)}.workflow-shell{grid-template-columns:1fr}.workflow-rail{padding:18px}.workflow-product,.workflow-privacy{display:none}.workflow-steps{grid-template-columns:repeat(3,1fr);margin:0}.workflow-steps>div{grid-template-columns:1fr;justify-items:center;text-align:center}.workflow-steps>div:not(:last-child)::after{left:calc(50% + 25px);top:18px;width:calc(100% - 50px);height:2px}.workflow-main{padding:24px 17px}.workflow-status-visual h1{font-size:25px}}