:root{
  --bg:#090909;--bg-soft:#0d0d0d;--ink:#f4f0e8;--ink-soft:#d6d2ca;--body-copy:#bbb8b1;
  --muted:#9b9a96;--muted-dim:#73716c;--line:rgba(244,240,232,.15);--line-strong:rgba(244,240,232,.28);
  --surface:rgba(255,255,255,.018);--surface-hover:rgba(0,156,255,.055);--header-bg:rgba(9,9,9,.82);
  --option-bg:#111;--button-text:#0a0a0a;--blue:#009cff;--blue-soft:#71caff;--max:1460px;
  --serif:"Playfair Display",Georgia,serif;--sans:"Manrope","DM Sans",Arial,sans-serif;
}
html[data-theme="light"]{
  --bg:#f3f0e9;--bg-soft:#ebe7de;--ink:#111;--ink-soft:#2f2f2d;--body-copy:#4f4e49;--muted:#6f6d66;
  --muted-dim:#85827a;--line:rgba(17,17,17,.14);--line-strong:rgba(17,17,17,.27);--surface:rgba(255,255,255,.42);
  --surface-hover:rgba(0,156,255,.07);--header-bg:rgba(243,240,233,.88);--option-bg:#fff;--button-text:#f4f0e8;
  --blue:#007fcf;--blue-soft:#0069ad;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}::selection{background:var(--blue);color:#03131e}.wrap{width:min(var(--max),calc(100% - clamp(36px,8vw,136px)));margin:auto}
.sitebar{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}.sitebar-in{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.015em}.brand-mark{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,156,255,.38);background:rgba(0,156,255,.08);display:grid;place-items:center;box-shadow:0 0 36px rgba(0,156,255,.08)}.brand-mark:before{content:"D";font-family:var(--serif);font-style:italic;font-size:21px;color:var(--blue)}.brand small{display:block;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.05em;margin-top:-2px}.nav{display:flex;align-items:center;gap:28px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}.nav a:hover{color:var(--blue-soft)}.cta-mini{border-bottom:1px solid var(--line-strong);padding-bottom:6px}.theme-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:17px;transition:.2s}.theme-btn:hover{border-color:var(--line-strong);background:var(--surface);transform:translateY(-1px)}
.hero{padding:clamp(70px,9vw,132px) 0 clamp(50px,7vw,90px);border-bottom:1px solid var(--line)}.hero>.wrap{display:grid;grid-template-columns:minmax(190px,.55fr) 2fr;gap:22px 7vw;align-items:start}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--body-copy);font-size:13px;font-weight:700;padding-top:10px;letter-spacing:.02em}.dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px rgba(0,156,255,.72);flex:0 0 auto}.hero h1{grid-column:2;margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(58px,7.7vw,124px);line-height:.9;letter-spacing:-.055em;max-width:1100px}.hero h1 br+*{color:var(--blue)}.hero p{grid-column:2;max-width:760px;color:var(--body-copy);font-size:clamp(16px,1.35vw,21px);line-height:1.65;margin:16px 0 0}.hero-actions{grid-column:2;display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.btn{border:0;cursor:pointer;min-height:50px;padding:0 18px;border-radius:13px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s transform,.2s background,.2s color,.2s border-color}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--ink);color:var(--button-text)}.btn-primary:hover{background:var(--blue);color:#001520}.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}.btn-secondary:hover{border-color:var(--blue);color:var(--blue-soft)}.btn-danger{background:transparent;color:#e0715b;border:1px solid rgba(224,113,91,.35)}.stats{grid-column:2;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}.stat{padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}.stat strong{display:block;font-family:var(--serif);font-size:25px;font-weight:600}.stat span{color:var(--muted);font-size:12px}
.section{padding:clamp(70px,8vw,120px) 0;border-bottom:1px solid var(--line)}.section-head{display:grid;grid-template-columns:minmax(190px,.55fr) 2fr;gap:22px 7vw;align-items:start;margin-bottom:28px}.section-head>div{display:contents}.section-head .eyebrow{grid-column:1}.section h2,.section-head h2{grid-column:2;font-family:var(--serif);font-size:clamp(38px,5vw,72px);font-weight:500;line-height:.98;letter-spacing:-.045em;margin:0}.section-head>p{grid-column:2;margin:4px 0 0;color:var(--muted);max-width:680px;font-size:14px;line-height:1.7}.searchbar{margin:0 0 20px;display:flex;justify-content:flex-end}.searchbar input{width:min(100%,720px);min-height:54px;padding:0 16px;border-radius:14px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);outline:0}.searchbar input::placeholder{color:var(--muted)}.searchbar input:focus{border-color:rgba(0,156,255,.65);box-shadow:0 0 0 3px rgba(0,156,255,.08)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tool-card{position:relative;padding:24px 22px 21px;border-radius:18px;background:var(--surface);border:1px solid var(--line);min-height:210px;display:flex;flex-direction:column;transition:.28s transform,.28s border-color,.28s background}.tool-card:hover{transform:translateY(-4px);border-color:rgba(0,156,255,.45);background:linear-gradient(145deg,rgba(0,156,255,.06),var(--surface))}.tool-icon{width:44px;height:44px;border-radius:50%;background:rgba(0,156,255,.11);border:1px solid rgba(0,156,255,.24);display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:var(--blue);font-size:18px;margin-bottom:22px}.tool-card h3{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.025em;margin:0 0 8px}.tool-card p{color:var(--muted);font-size:13px;line-height:1.65;margin:0 0 18px}.tag{margin-top:auto;color:var(--blue-soft);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.badge{position:absolute;right:15px;top:15px;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.07em;background:rgba(0,156,255,.08);border:1px solid rgba(0,156,255,.22);color:var(--blue-soft)}.empty{display:none;padding:32px;text-align:center;color:var(--muted)}
.tool-shell{padding:clamp(42px,6vw,82px) 0 clamp(76px,8vw,118px)}.breadcrumbs{display:flex;flex-wrap:wrap;gap:7px;font-size:12px;letter-spacing:.03em;color:var(--muted);margin-bottom:30px}.breadcrumbs a:hover{color:var(--blue-soft)}.tool-title{font-family:var(--serif);font-weight:500;font-size:clamp(52px,7vw,96px);letter-spacing:-.055em;line-height:.92;margin:8px 0 15px}.tool-sub{color:var(--body-copy);max-width:800px;font-size:clamp(16px,1.35vw,20px);line-height:1.65;margin:0}.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;margin-top:36px}.tool-panel,.side-panel{border:1px solid var(--line);background:var(--surface);border-radius:18px}.tool-panel{padding:clamp(18px,3vw,28px)}.side-panel{padding:22px;height:max-content;position:sticky;top:102px}.side-panel h3{margin:0 0 11px;font-family:var(--serif);font-weight:600;font-size:22px}.side-panel a{display:block;padding:11px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}.side-panel a:hover{color:var(--blue-soft)}.side-panel a:last-child{border-bottom:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:8px;padding:15px;border:1px solid var(--line);background:var(--surface);border-radius:15px}.field.full{grid-column:1/-1}.field:focus-within{border-color:rgba(0,156,255,.62);box-shadow:0 0 0 3px rgba(0,156,255,.07)}.field label{font-size:13px;color:var(--ink);font-weight:800}.field input,.field select,.field textarea{width:100%;min-height:48px;padding:0 13px;background:var(--bg);color:var(--ink);border:1px solid var(--line-strong);border-radius:12px;outline:none}.field textarea{min-height:180px;padding:13px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(0,156,255,.65)}.field select option{background:var(--option-bg);color:var(--ink)}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.result{margin-top:18px;padding:18px;border-radius:15px;border:1px solid rgba(0,156,255,.26);background:rgba(0,156,255,.06);display:none;color:var(--body-copy)}.result.show{display:block}.result strong{color:var(--ink)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.result-box{padding:15px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}.result-box strong{display:block;font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.2}.result-box span{font-size:12px;color:var(--muted)}.dropzone{padding:36px 20px;border:1.5px dashed rgba(0,156,255,.36);border-radius:16px;text-align:center;background:rgba(0,156,255,.035);cursor:pointer}.dropzone.drag{background:rgba(0,156,255,.09);border-color:var(--blue)}.dropzone input{display:none}.dropzone strong{display:block;font-size:17px}.dropzone span{color:var(--muted);font-size:13px}.preview{margin-top:18px;display:none}.preview.show{display:block}.preview img,.preview canvas{max-width:100%;border-radius:14px;background:white}.file-list{display:grid;gap:8px;margin-top:14px}.file-item{display:flex;justify-content:space-between;gap:15px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13px}.qr-wrap{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start}.qr-preview{background:white;border-radius:16px;padding:18px;display:grid;place-items:center;min-height:260px}.qr-preview canvas,.qr-preview img{max-width:100%!important;height:auto!important}.note{margin-top:14px;padding:12px 14px;border-radius:13px;background:rgba(0,156,255,.055);border:1px solid rgba(0,156,255,.18);color:var(--body-copy);font-size:13px}
.info{padding:0 0 clamp(80px,9vw,130px)}.prose{max-width:920px}.prose h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,44px);letter-spacing:-.035em;margin:42px 0 13px}.prose h3{font-family:var(--serif);font-weight:600;font-size:24px;margin:28px 0 9px}.prose p,.prose li{color:var(--body-copy);line-height:1.75}.prose ul{padding-left:20px}.faq{display:grid;gap:10px;margin-top:18px}.faq details{border:1px solid var(--line);border-radius:15px;padding:16px;background:var(--surface)}.faq summary{cursor:pointer;font-weight:800}.faq p{margin:10px 0 0}.footer{border-top:1px solid var(--line);padding:30px 0 42px;color:var(--muted);font-size:12px}.footer-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer a{color:var(--ink-soft)}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#fff}html[data-theme="light"] .qr-preview{box-shadow:inset 0 0 0 1px rgba(17,17,17,.08)}
@media(max-width:980px){.hero>.wrap,.section-head{grid-template-columns:1fr}.hero h1,.hero p,.hero-actions,.stats,.section-head .eyebrow,.section-head h2,.section-head>p{grid-column:1}.hero h1{font-size:clamp(54px,12vw,92px)}.grid{grid-template-columns:repeat(2,1fr)}.tool-layout{grid-template-columns:1fr}.side-panel{position:static}.nav{gap:18px}.stats{grid-template-columns:repeat(2,1fr)}.qr-wrap{grid-template-columns:1fr}}
@media(max-width:680px){.wrap{width:min(100% - 26px,var(--max))}.sitebar-in{min-height:68px}.brand small{display:none}.nav a:not(.cta-mini){display:none}.nav{gap:10px}.cta-mini{font-size:9px}.theme-btn{width:38px;height:38px}.hero{padding-top:54px}.grid,.form-grid,.result-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.tool-panel{padding:16px}.stats{grid-template-columns:1fr 1fr}.tool-shell{padding-top:30px}.tool-title{font-size:clamp(48px,15vw,72px)}.section{padding:62px 0}.searchbar input{width:100%}.footer-in{flex-direction:column}.file-item{align-items:flex-start;flex-direction:column;gap:3px}}

/* P1 launch polish — 2026-09-01 */
.brand-logo-wrap{gap:14px;min-width:0}.brand-logo-pair{position:relative;display:block;width:clamp(158px,12vw,210px);height:42px;flex:0 0 auto}.brand-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center}.logo-on-light{display:none}html[data-theme="light"] .logo-on-dark{display:none}html[data-theme="light"] .logo-on-light{display:block}.brand-tools{font-size:11px;font-weight:850;letter-spacing:.16em;color:var(--blue-soft);padding-left:14px;border-left:1px solid var(--line-strong);white-space:nowrap}
.p1-app{min-height:180px}.loading-card{min-height:160px;display:grid;place-items:center;gap:12px;color:var(--muted)}.spinner{width:28px;height:28px;border:2px solid var(--line-strong);border-top-color:var(--blue);border-radius:50%;animation:dtspin .8s linear infinite}@keyframes dtspin{to{transform:rotate(360deg)}}
.qr-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,390px);gap:22px;align-items:start}.qr-card-preview{position:sticky;top:110px;padding:16px;border-radius:20px;background:linear-gradient(145deg,rgba(0,156,255,.08),var(--surface));border:1px solid rgba(0,156,255,.24)}.qr-card-preview canvas{display:block;width:100%;height:auto;background:#fff;border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.22)}.qr-preview-note{text-align:center;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:10px}.btn-gpay{background:#fff;color:#171717;border:1px solid rgba(0,0,0,.12);box-shadow:0 3px 12px rgba(0,0,0,.12)}.btn-gpay:before{content:'G';font-weight:900;color:#4285f4}.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}.code-line{margin-top:12px;padding:11px 12px;border-radius:10px;background:rgba(0,0,0,.2);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;overflow-wrap:anywhere;color:var(--ink-soft)}html[data-theme="light"] .code-line{background:rgba(17,17,17,.055)}
.scanner-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr);gap:18px}.scanner-box{margin-top:16px;overflow:hidden;border-radius:16px;background:#fff;min-height:100px}.scanner-help{padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(0,156,255,.08),var(--surface));min-height:240px}.scanner-help h3{font-family:var(--serif);font-size:32px;line-height:1;margin:12px 0}.scanner-help p{color:var(--body-copy);font-size:13px}.mini-kicker{font-size:10px;font-weight:850;letter-spacing:.14em;color:var(--blue-soft)}
.result.error{border-color:rgba(224,113,91,.38);background:rgba(224,113,91,.07)}.result-text{width:100%;min-height:150px;padding:12px;background:var(--bg);border:1px solid var(--line-strong);border-radius:12px;color:var(--ink);resize:vertical}.preset-banner{display:flex;justify-content:space-between;gap:14px;margin:14px 0;padding:14px 16px;border:1px solid rgba(0,156,255,.22);background:rgba(0,156,255,.055);border-radius:14px}.preset-banner strong{color:var(--ink)}.preset-banner span{color:var(--muted);font-size:12px;text-align:right}.mini-help{color:var(--muted);font-size:12px}.color-result{display:flex;align-items:center;gap:12px}.color-result>span{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong)}.color-result small{color:var(--muted)}
.business-doc{background:#fff;color:#171717;border-radius:14px;padding:26px;overflow:auto}.business-doc *{color:inherit}.business-doc table{width:100%;border-collapse:collapse}.business-doc th,.business-doc td{padding:8px;border:1px solid #ddd;text-align:left}.business-doc h2{font-family:var(--sans);font-size:22px}.docx-render{position:fixed;left:-10000px;top:0;width:794px;padding:42px;background:#fff;color:#111}.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.diff-box{padding:14px;border-radius:12px;border:1px solid var(--line);overflow:auto;white-space:pre-wrap}.handwriting-sheet{background:#fff;color:#1b1b1b;padding:30px;border-radius:14px;line-height:2.1;background-image:linear-gradient(#fff 95%,#c9d5e4 96%);background-size:100% 2.1em;font-family:cursive;font-size:24px}.timer-display{font-family:var(--serif);font-size:clamp(56px,8vw,100px);line-height:1;text-align:center;padding:30px 10px}.lap-list{display:grid;gap:6px;margin-top:12px;color:var(--muted)}.winner{font-family:var(--serif);font-size:clamp(34px,5vw,64px);text-align:center;color:var(--blue-soft)}.strength{height:10px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:15px}.strength>div{height:100%;background:var(--blue)}
.category-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}.category-chip{padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:11px;color:var(--body-copy);cursor:pointer}.category-chip:hover,.category-chip.active{border-color:rgba(0,156,255,.5);color:var(--blue-soft);background:rgba(0,156,255,.07)}.category-block{margin-top:42px}.category-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}.category-title h3{font-family:var(--serif);font-size:clamp(28px,3vw,40px);margin:0}.category-title span{color:var(--muted);font-size:12px}.tool-card.compact{min-height:178px}.tool-card.compact h3{font-size:20px}.tool-card.compact p{font-size:12px}.tool-card.compact .tool-icon{margin-bottom:16px}.launch-note{grid-column:2;margin-top:10px;padding:12px 14px;border-left:2px solid var(--blue);color:var(--muted);font-size:12px}
@media(max-width:980px){.qr-studio{grid-template-columns:1fr}.qr-card-preview{position:static}.scanner-layout{grid-template-columns:1fr}.launch-note{grid-column:1}}
@media(max-width:680px){.brand-logo-pair{width:142px;height:34px}.brand-tools{font-size:9px;padding-left:9px}.sitebar-in{gap:10px}.qr-card-preview{padding:10px}.preset-banner{flex-direction:column}.preset-banner span{text-align:left}.diff-grid{grid-template-columns:1fr}.category-title{align-items:flex-start;flex-direction:column}.tool-card.compact{min-height:160px}}
@media print{.sitebar,.side-panel,.footer,.actions,.breadcrumbs,.tool-title,.tool-sub,.eyebrow,.info{display:none!important}.tool-layout{display:block}.tool-panel{border:0;padding:0}.business-doc,.handwriting-sheet{box-shadow:none;border:0}}
.upi-ready{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,156,255,.25);background:rgba(0,156,255,.065)}.upi-ready strong{font-size:13px}.upi-ready span{font-size:11px;color:var(--muted);text-align:right}@media(max-width:680px){.upi-ready{align-items:flex-start;flex-direction:column}.upi-ready span{text-align:left}}

/* === 2026-09-01 publish UI pass === */
@supports (view-transition-name:root){
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
  ::view-transition-old(root){z-index:1}
  ::view-transition-new(root){z-index:99999}
}
html.theme-fallback body{animation:dtThemeFallback .48s ease both}
@keyframes dtThemeFallback{0%{opacity:.72;filter:blur(2px)}100%{opacity:1;filter:none}}

.sitebar{transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
.theme-btn{position:relative;overflow:hidden}
.theme-btn .theme-glyph{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .2s ease,transform .32s cubic-bezier(.2,.75,.2,1)}
.theme-btn .theme-sun{opacity:1;transform:rotate(0deg) scale(1)}
.theme-btn .theme-moon{opacity:0;transform:rotate(-45deg) scale(.65)}
html[data-theme="light"] .theme-btn .theme-sun{opacity:0;transform:rotate(45deg) scale(.65)}
html[data-theme="light"] .theme-btn .theme-moon{opacity:1;transform:rotate(0deg) scale(1)}

/* cleaner public product language — priority labels are internal only */
.badge{display:none!important}

/* premium tool surfaces */
.tool-panel{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--surface),rgba(0,156,255,.018));box-shadow:0 18px 80px rgba(0,0,0,.08)}
.tool-panel:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(0,156,255,.55),transparent);opacity:.55}
.p1-app{position:relative;z-index:1}
.field{padding:14px 15px 15px;border-radius:17px;background:linear-gradient(180deg,var(--surface),rgba(255,255,255,0));transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.field:hover{border-color:var(--line-strong)}
.field:focus-within{transform:translateY(-1px)}
.field label{font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--muted);font-weight:800}
.field input,.field select,.field textarea{min-height:52px;border-radius:13px;background:color-mix(in srgb,var(--bg) 92%,transparent);font-weight:650;border-color:var(--line);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(0,156,255,.07);background:var(--bg)}
.actions{align-items:center}
.btn{position:relative;overflow:hidden;min-height:52px;padding:0 21px;border-radius:999px;letter-spacing:-.01em;font-weight:800;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:linear-gradient(135deg,var(--blue),#3fb7ff);color:#03131e;box-shadow:0 10px 28px rgba(0,156,255,.2)}
.btn-primary:hover{background:linear-gradient(135deg,#24aaff,var(--blue));color:#00111d;box-shadow:0 14px 36px rgba(0,156,255,.28)}
.btn-primary:after{content:"→";font-size:17px;margin-left:4px;transition:transform .2s ease}
.btn-primary:hover:after{transform:translateX(3px)}
.btn-secondary{background:var(--surface);backdrop-filter:blur(12px)}
.result{border-radius:18px;padding:20px;border-color:rgba(0,156,255,.26);background:linear-gradient(145deg,rgba(0,156,255,.075),var(--surface));animation:resultIn .32s cubic-bezier(.2,.75,.2,1)}
@keyframes resultIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.result.error{border-color:rgba(224,113,91,.42);background:rgba(224,113,91,.08)}
.result-grid{gap:12px}.result-box{min-height:112px;padding:18px;border-radius:17px;background:linear-gradient(145deg,var(--surface),rgba(0,156,255,.035));display:flex;flex-direction:column;justify-content:space-between}.result-box strong{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.035em}.result-box span{font-size:10px;letter-spacing:.07em;text-transform:uppercase}

.dropzone{position:relative;min-height:178px;padding:36px 24px;border:1px dashed rgba(0,156,255,.42);border-radius:22px;background:radial-gradient(circle at 50% 0,rgba(0,156,255,.10),transparent 46%),var(--surface);display:grid;place-items:center;align-content:center;gap:8px;transition:border-color .22s ease,transform .22s ease,background .22s ease}
.dropzone:before{content:"+";width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(0,156,255,.1);border:1px solid rgba(0,156,255,.28);color:var(--blue-soft);font-size:27px;font-weight:300;margin-bottom:5px}
.dropzone:hover,.dropzone.drag{transform:translateY(-2px);border-color:var(--blue);background:radial-gradient(circle at 50% 0,rgba(0,156,255,.16),transparent 48%),var(--surface)}
.dropzone strong{font-size:16px}.dropzone span{font-size:12px}
.file-list{margin-top:12px}.file-item{padding:13px 15px;border-radius:14px;background:linear-gradient(145deg,var(--surface),rgba(0,156,255,.025));align-items:center}.file-item span:first-child{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item span:last-child{color:var(--muted);white-space:nowrap}

/* Visual PDF studio */
.pdf-studio{margin-top:16px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}
.pdf-studio-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pdf-studio-head strong{font-family:var(--serif);font-size:20px;font-weight:600}.pdf-studio-head span{font-size:11px;color:var(--muted)}
.pdf-toolbar{display:flex;gap:8px;flex-wrap:wrap}.pdf-toolbar button{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;font-size:11px;font-weight:750}.pdf-toolbar button:hover{border-color:var(--blue);color:var(--blue-soft)}
.pdf-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;padding:16px;max-height:610px;overflow:auto;align-items:start}
.pdf-page-card{position:relative;border:1px solid var(--line);border-radius:15px;padding:9px;background:var(--bg);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;user-select:none}
.pdf-page-card:hover{transform:translateY(-2px);border-color:rgba(0,156,255,.4)}
.pdf-page-card.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,156,255,.08)}
.pdf-page-card.dragging{opacity:.45;transform:scale(.98)}
.pdf-page-card canvas{display:block;width:100%;height:auto;border-radius:9px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.pdf-page-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;font-size:10px;color:var(--muted)}
.pdf-page-meta strong{font-family:var(--sans);font-size:11px;color:var(--ink)}
.pdf-page-order{position:absolute;left:15px;top:15px;z-index:2;min-width:25px;height:25px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:var(--ink);color:var(--button-text);font-size:10px;font-weight:850;box-shadow:0 5px 14px rgba(0,0,0,.18)}
.pdf-page-check{position:absolute;right:15px;top:15px;z-index:2;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-strong);font-size:12px;color:transparent}.pdf-page-card.selected .pdf-page-check{background:var(--blue);border-color:var(--blue);color:#00111d}
.pdf-help{padding:0 16px 15px;color:var(--muted);font-size:11px}
.pdf-loading{padding:28px;text-align:center;color:var(--muted)}

/* calculator product UI */
body[data-tool*="calculator"] .tool-panel{padding:clamp(18px,2.7vw,32px)}
body[data-tool*="calculator"] .p1-app{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(290px,.92fr);gap:18px;align-items:start}
body[data-tool*="calculator"] .p1-app>.form-grid{grid-column:1;grid-row:2}
body[data-tool*="calculator"] .p1-app>.actions{grid-column:1;grid-row:3;margin-top:0}
body[data-tool*="calculator"] .p1-app>.result{grid-column:2;grid-row:1/span 4;margin:0;min-height:100%;display:block!important;padding:22px;background:radial-gradient(circle at 90% 0,rgba(0,156,255,.17),transparent 38%),linear-gradient(145deg,var(--surface),rgba(0,156,255,.045))}
body[data-tool*="calculator"] .p1-app>.result:not(.show):before{content:"Result preview";display:block;font-family:var(--serif);font-size:27px;color:var(--ink);margin-bottom:8px}
body[data-tool*="calculator"] .p1-app>.result:not(.show):after{content:"Change the values or press Calculate — your result appears here instantly.";display:block;color:var(--muted);font-size:13px;max-width:280px;line-height:1.65}
body[data-tool*="calculator"] .p1-app>.tax-current,body[data-tool*="calculator"] .p1-app>.calc-intro{grid-column:1;grid-row:1}
body[data-tool*="calculator"] .p1-app>.note{grid-column:1}
.calc-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 2px}.calc-intro strong{font-family:var(--serif);font-size:24px;font-weight:600}.calc-intro span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-soft)}
body[data-tool*="calculator"] .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-tool*="calculator"] .field{min-height:108px;justify-content:space-between}
body[data-tool*="calculator"] .field input,body[data-tool*="calculator"] .field select{font-size:17px;font-weight:750}
body[data-tool*="calculator"] .result-grid{grid-template-columns:1fr;gap:10px}
body[data-tool*="calculator"] .result-box{min-height:100px}

/* typing test */
.typing-studio{display:grid;gap:16px}.typing-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.typing-tabs{display:flex;gap:7px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}.typing-tabs button{border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer;font-size:11px;font-weight:800}.typing-tabs button.active{background:var(--ink);color:var(--button-text)}
.typing-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.typing-metric{padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.typing-metric strong{display:block;font-family:var(--serif);font-size:28px;line-height:1.1}.typing-metric span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.typing-copy{font-size:clamp(22px,2.2vw,31px);line-height:1.75;letter-spacing:.01em;padding:24px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(145deg,var(--surface),rgba(0,156,255,.025));min-height:190px}.typing-copy span{color:var(--muted);transition:color .06s,background .06s}.typing-copy span.correct{color:var(--ink)}.typing-copy span.wrong{color:#e0715b;background:rgba(224,113,91,.12);border-radius:3px}.typing-copy span.current{border-bottom:2px solid var(--blue);color:var(--ink)}
.typing-input-wrap{position:relative}.typing-area{width:100%;min-height:130px;padding:18px 19px;border-radius:17px;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);outline:0;resize:vertical;font:600 17px/1.65 var(--sans)}.typing-area:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,156,255,.08)}.typing-hint{font-size:11px;color:var(--muted);margin-top:7px}

/* search quality */
.searchbar{position:relative}.searchbar:before{content:"⌕";position:absolute;left:max(calc(100% - min(100%,720px) + 17px),17px);top:50%;transform:translateY(-50%);font-size:20px;color:var(--muted);pointer-events:none}.searchbar input{padding-left:48px;font-weight:650}.searchbar input.search-has-query{border-color:rgba(0,156,255,.5);box-shadow:0 0 0 4px rgba(0,156,255,.06)}.search-note{width:min(100%,720px);margin:-10px 0 18px auto;color:var(--muted);font-size:11px;text-align:left}.category-block.search-hidden{display:none}.category-nav.searching{opacity:.38;pointer-events:none}

@media(max-width:900px){
  body[data-tool*="calculator"] .p1-app{grid-template-columns:1fr}
  body[data-tool*="calculator"] .p1-app>.calc-intro,body[data-tool*="calculator"] .p1-app>.tax-current,body[data-tool*="calculator"] .p1-app>.form-grid,body[data-tool*="calculator"] .p1-app>.actions,body[data-tool*="calculator"] .p1-app>.result,body[data-tool*="calculator"] .p1-app>.note{grid-column:1;grid-row:auto}
  body[data-tool*="calculator"] .p1-app>.result{min-height:0}
  .typing-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  body[data-tool*="calculator"] .form-grid{grid-template-columns:1fr}
  .pdf-page-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:11px;gap:10px;max-height:none}
  .pdf-studio-head{align-items:flex-start;flex-direction:column}
  .typing-copy{font-size:20px;padding:17px;min-height:150px}.typing-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){html.theme-fallback body{animation:none}.field,.dropzone,.btn,.pdf-page-card,.theme-btn .theme-glyph{transition:none}}
.pdf-move{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);width:27px;height:27px;border-radius:50%;cursor:pointer;line-height:1;padding:0}.pdf-move:hover{border-color:var(--blue);color:var(--blue-soft)}


/* numeric clarity */
.result-value,
body[data-tool*="calculator"] .result-box strong,
body[data-tool*="calculator"] .typing-metric strong,
.scientific .result strong{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif !important;
  font-weight:800;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.025em;
}

/* scientific calculator */
.scientific{display:grid;gap:14px}
.scientific-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:2px 2px 0}
.scientific-head strong{font-family:var(--serif);font-size:24px;font-weight:600}
.scientific-head span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sci-display{width:100%;min-height:64px;padding:0 18px;border-radius:18px;border:1px solid var(--line-strong);background:linear-gradient(145deg,var(--surface),rgba(0,156,255,.03));color:var(--ink);outline:none;font:700 clamp(22px,2vw,30px)/1.2 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.sci-display:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,156,255,.08)}
.sci-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sci-btn{appearance:none;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),rgba(255,255,255,.015));color:var(--ink);min-height:52px;border-radius:16px;cursor:pointer;font:800 18px/1 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.sci-btn:hover{transform:translateY(-1px);border-color:rgba(0,156,255,.45);box-shadow:0 10px 24px rgba(0,0,0,.1)}
.sci-btn.fn{background:linear-gradient(145deg,rgba(0,156,255,.12),rgba(0,156,255,.045));color:var(--blue-soft)}
.sci-btn.op{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(0,156,255,.02))}
.sci-btn.util{background:linear-gradient(145deg,rgba(224,113,91,.11),rgba(224,113,91,.04));color:#ffb4a8}
.sci-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.scientific .result{display:block!important;min-height:0;margin-top:2px}
.scientific .code-line{display:inline-block;margin-top:8px}
@media(max-width:680px){.sci-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.sci-display{font-size:20px;min-height:58px}}

/* === Unified premium calculator system === */
body[data-tool*="calculator"] .tool-panel{
  padding:clamp(18px,2.5vw,30px);
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0,rgba(0,156,255,.07),transparent 32%),
    linear-gradient(145deg,var(--surface),rgba(0,156,255,.018));
}
body[data-tool*="calculator"] .calc-premium{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr);
  grid-template-rows:auto auto auto 1fr;
  gap:16px 18px;
  align-items:start;
}
body[data-tool*="calculator"] .calc-premium>.calc-intro{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:36px;
  padding:0 2px 3px;
}
body[data-tool*="calculator"] .calc-premium>.calc-intro strong{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--blue-soft);
}
body[data-tool*="calculator"] .calc-premium>.calc-intro span{
  font-size:10px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
}
body[data-tool*="calculator"] .calc-premium>.tax-current{
  grid-column:1;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(0,156,255,.18);
  border-radius:15px;
  background:rgba(0,156,255,.045);
}
body[data-tool*="calculator"] .calc-premium>.tax-current span{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
body[data-tool*="calculator"] .calc-premium>.tax-current strong{
  font:800 13px/1.2 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  color:var(--ink);
}
body[data-tool*="calculator"] .calc-premium>.form-grid{
  grid-column:1;
  grid-row:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
body[data-tool*="calculator"] .calc-premium>.form-grid .field{
  min-height:104px;
  justify-content:space-between;
  border-radius:18px;
  padding:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.022),rgba(0,156,255,.018));
}
html[data-theme="light"] body[data-tool*="calculator"] .calc-premium>.form-grid .field{
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(0,156,255,.028));
}
body[data-tool*="calculator"] .calc-premium .field label{
  font-size:10px;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}
body[data-tool*="calculator"] .calc-premium .field input,
body[data-tool*="calculator"] .calc-premium .field select{
  min-height:50px;
  padding:0 14px;
  border-radius:13px;
  font:750 17px/1 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.015em;
}
body[data-tool*="calculator"] .calc-premium>.actions{
  grid-column:1;
  grid-row:auto;
  margin-top:0;
}
body[data-tool*="calculator"] .calc-premium>.actions .btn-primary{
  min-width:180px;
}
body[data-tool*="calculator"] .calc-premium>.note{
  grid-column:1;
  grid-row:auto;
  margin-top:0;
}
body[data-tool*="calculator"] .calc-premium>.calc-result,
body[data-tool*="calculator"] .calc-premium>.result{
  grid-column:2;
  grid-row:1 / span 5;
  align-self:stretch;
  margin:0;
  min-height:100%;
  padding:22px;
  border-radius:22px;
  display:block!important;
  background:
    radial-gradient(circle at 88% 0,rgba(0,156,255,.18),transparent 35%),
    linear-gradient(145deg,var(--surface),rgba(0,156,255,.045));
  border:1px solid rgba(0,156,255,.25);
}
body[data-tool*="calculator"] .calc-premium>.result:not(.show):before{
  content:"RESULT";
  display:block;
  margin-bottom:13px;
  font:800 10px/1 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  letter-spacing:.12em;
  color:var(--blue-soft);
}
body[data-tool*="calculator"] .calc-premium>.result:not(.show):after{
  content:"Enter your values to see the calculation instantly.";
  display:block;
  max-width:270px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
body[data-tool*="calculator"] .calc-premium>.result.show:not(.error):before{
  content:"CALCULATION RESULT";
  display:block;
  margin:0 0 13px 1px;
  font:800 10px/1 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  letter-spacing:.12em;
  color:var(--blue-soft);
}
body[data-tool*="calculator"] .calc-premium>.result .result-grid{
  grid-template-columns:1fr;
  gap:10px;
}
body[data-tool*="calculator"] .calc-premium>.result .result-box{
  position:relative;
  min-height:98px;
  padding:17px 18px;
  border-radius:17px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,156,255,.025));
  border:1px solid var(--line);
}
html[data-theme="light"] body[data-tool*="calculator"] .calc-premium>.result .result-box{
  background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(0,156,255,.028));
}
body[data-tool*="calculator"] .calc-premium>.result .result-box:first-child{
  border-color:rgba(0,156,255,.32);
  background:linear-gradient(145deg,rgba(0,156,255,.075),rgba(0,156,255,.025));
}
body[data-tool*="calculator"] .calc-premium>.result .result-box strong,
body[data-tool*="calculator"] .result-value{
  display:block;
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-weight:800!important;
  font-size:clamp(25px,2.2vw,34px)!important;
  line-height:1.08;
  letter-spacing:-.035em!important;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink);
  overflow-wrap:anywhere;
}
body[data-tool*="calculator"] .calc-premium>.result .result-box span{
  margin-top:8px;
  font:700 9px/1.35 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  letter-spacing:.085em;
  text-transform:uppercase;
  color:var(--muted);
}
body[data-tool*="calculator"] .calc-premium>.result.error{
  min-height:auto;
  align-self:start;
  background:linear-gradient(145deg,rgba(224,113,91,.10),rgba(224,113,91,.035));
  border-color:rgba(224,113,91,.35);
}
body[data-tool*="calculator"] .calc-premium>.result.error:before{content:"CHECK INPUT";color:#ffad9d}

/* Keep the scientific calculator as the same design family, but give its keypad full width. */
body[data-tool="scientific-calculator"] .calc-premium>.calc-intro{grid-column:1/-1;grid-row:auto}
body[data-tool="scientific-calculator"] .calc-premium>.scientific{grid-column:1/-1;grid-row:auto}
body[data-tool="scientific-calculator"] .scientific{
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(0,156,255,.025));
}
body[data-tool="scientific-calculator"] .scientific .result{
  margin-top:4px;
}

@media(max-width:900px){
  body[data-tool*="calculator"] .calc-premium{grid-template-columns:1fr;grid-template-rows:auto}
  body[data-tool*="calculator"] .calc-premium>.calc-intro,
  body[data-tool*="calculator"] .calc-premium>.tax-current,
  body[data-tool*="calculator"] .calc-premium>.form-grid,
  body[data-tool*="calculator"] .calc-premium>.actions,
  body[data-tool*="calculator"] .calc-premium>.note,
  body[data-tool*="calculator"] .calc-premium>.calc-result,
  body[data-tool*="calculator"] .calc-premium>.result,
  body[data-tool="scientific-calculator"] .calc-premium>.scientific{
    grid-column:1;
    grid-row:auto;
  }
  body[data-tool*="calculator"] .calc-premium>.result{min-height:0}
}
@media(max-width:680px){
  body[data-tool*="calculator"] .tool-panel{padding:14px;border-radius:20px}
  body[data-tool*="calculator"] .calc-premium{gap:13px}
  body[data-tool*="calculator"] .calc-premium>.form-grid{grid-template-columns:1fr}
  body[data-tool*="calculator"] .calc-premium>.form-grid .field{min-height:96px}
  body[data-tool*="calculator"] .calc-premium>.actions .btn{width:100%}
  body[data-tool*="calculator"] .calc-premium>.result{padding:17px;border-radius:19px}
  body[data-tool*="calculator"] .calc-premium>.result .result-box{min-height:90px}
}

/* Mobile-safe file picker: keep the real input over the whole dropzone.
   iOS Safari can ignore input.click() when the file input itself is display:none. */
.dropzone{position:relative;overflow:hidden}
.dropzone input[type="file"]{
  display:block!important;position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;opacity:0;cursor:pointer;z-index:5;font-size:100px;
}
.dropzone:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,156,255,.09)}


/* Direct signature placement */
.sign-inline-tip{background:linear-gradient(145deg,var(--surface),rgba(0,156,255,.04))}
.sign-inline-text{font-size:13px;line-height:1.7;color:var(--body-copy)}
.sign-stage-field{padding:15px}
.sign-stage-shell{display:grid;gap:12px}
.sign-stage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sign-stage-head strong{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink)}
.sign-stage-head span{font-size:12px;color:var(--muted)}
.sign-stage-wrap{position:relative;display:grid;place-items:center;min-height:420px;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(0,156,255,.05),transparent 28%),var(--bg);overflow:auto;touch-action:none}
.sign-stage-empty{position:absolute;inset:16px;display:grid;place-items:center;padding:22px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7;border:1px dashed rgba(0,156,255,.24);border-radius:14px;background:rgba(0,156,255,.03)}
.sign-stage-wrap canvas{display:block;max-width:100%;height:auto;border-radius:12px;background:#fff;box-shadow:0 10px 34px rgba(0,0,0,.12)}
.sign-overlay{position:absolute;left:16px;top:16px;z-index:4;transform:translate(0,0);cursor:grab;user-select:none;touch-action:none;border:1px dashed rgba(0,156,255,.72);background:rgba(0,156,255,.08);border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.14)}
.sign-overlay.dragging{cursor:grabbing;opacity:.96}
.sign-overlay img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;border-radius:9px}
.sign-stage-tip{font-size:12px;line-height:1.65;color:var(--muted)}
@media(max-width:680px){
  .sign-stage-field{padding:14px}
  .sign-stage-head strong{font-size:19px}
  .sign-stage-wrap{min-height:320px;padding:10px;border-radius:16px}
  .sign-stage-empty{inset:10px;padding:16px;font-size:12px}
}

.sign-size-field{background:linear-gradient(145deg,var(--surface),rgba(0,156,255,.03))}
.sign-size-controls{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.sign-size-btn{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.sign-size-btn:hover{border-color:var(--blue);color:var(--blue-soft)}
.sign-size-controls input[type="range"]{width:100%;min-height:auto;padding:0;border:0;background:transparent;accent-color:var(--blue)}
.sign-size-readout{margin-top:8px;font-size:12px;color:var(--muted)}
.sign-size-readout strong{color:var(--ink)}
@media(max-width:680px){
  .sign-size-controls{grid-template-columns:1fr;gap:8px}
  .sign-size-btn{width:100%}
}