/* DocStudio 2.0: Apple-inspired liquid / frosted glass interface. */
:root{
 --bg:#080e21;--surface:rgba(24,42,71,.46);--surface-2:rgba(35,54,91,.44);--line:rgba(255,255,255,.16);
 --text:#f8fbff;--muted:#b9c9e4;--blue:#89aeff;--purple:#ad9dff;--cyan:#85e8f8;
 --glass-border:1px solid rgba(242,248,255,.22);--glass-shadow:0 21px 60px rgba(0,6,27,.28),inset 0 1px 0 rgba(255,255,255,.22);
 --glass-bg:linear-gradient(143deg,rgba(224,238,255,.16),rgba(113,148,209,.065) 41%,rgba(180,196,255,.07));
}
html,body{background:#080e21;color:var(--text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
 radial-gradient(ellipse 48vw 45vh at 13% 9%,rgba(119,154,255,.31),transparent 76%),
 radial-gradient(ellipse 38vw 44vh at 90% 74%,rgba(115,209,240,.18),transparent 78%),
 radial-gradient(ellipse 26vw 38vh at 69% 9%,rgba(171,119,246,.21),transparent 82%),
 linear-gradient(145deg,#0c1b34,#080e21 63%,#121b38);}
.app-shell{position:relative;background:transparent}
.app-shell:before{content:"";position:absolute;right:10%;top:5%;width:min(34vw,370px);aspect-ratio:1;background:radial-gradient(circle at 45% 45%,rgba(133,216,249,.26),rgba(70,115,213,.06) 53%,transparent 73%);border-radius:50%;filter:blur(24px);pointer-events:none;animation:glassFloat 13s ease-in-out infinite alternate}
@keyframes glassFloat{from{transform:translate3d(0,-10px,0) scale(.9)}to{transform:translate3d(-40px,60px,0) scale(1.14)}}
.topbar{position:relative;z-index:5;background:rgba(210,229,255,.075);backdrop-filter:blur(34px) saturate(180%);-webkit-backdrop-filter:blur(34px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.22);box-shadow:0 10px 30px #040b255e}
.brand-mark,.brand-highlight{filter:drop-shadow(0 0 17px #8fafff76)}
.private-pill,.license-chip{background:rgba(208,225,255,.14)!important;border-color:rgba(255,255,255,.23)!important;color:#e5f4ff!important}
.subtle-btn,.primary-btn,.sign-out-link,.icon-button,.mini-icon-btn,.zoom-controls button,.sidebar-action,.layer-buttons button,.delete-btn,.project-download,.ai-ocr-button,.tool-btn,.type-buttons button,.soft-link,.right-tab,.upload-font-btn{backdrop-filter:blur(17px) saturate(160%);-webkit-backdrop-filter:blur(17px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);transition:background .2s,box-shadow .2s,transform .2s,border-color .2s}
.subtle-btn:hover,.primary-btn:hover,.tool-btn:hover,.icon-button:hover,.sidebar-action:hover,.upload-font-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 9px 25px rgba(1,15,45,.23)}
.primary-btn,.download-selection-btn{background:linear-gradient(125deg,rgba(161,190,255,.92),rgba(117,140,255,.95) 48%,rgba(166,128,245,.9));color:#07152e;border:1px solid rgba(238,244,255,.72);box-shadow:inset 0 1px 0 #fff8,0 13px 26px #5d72e34d;font-weight:800}
.welcome-screen{position:relative;background:transparent}
.welcome-content{position:relative;z-index:1}
.hero-orb{filter:blur(8px);opacity:.85}
.drop-zone,.feature-card,.left-panel,.right-panel,.tool-strip,.editor-footer,.soft-box,.region-editor,.export-selection,.busy-card,.export-tile,.page-card,.right-tabs,.side-title,.tool-group,.page-list-meta{background:var(--glass-bg);border:var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:blur(30px) saturate(165%);-webkit-backdrop-filter:blur(30px) saturate(165%)}
.drop-zone{border:1px dashed rgba(230,243,255,.55);border-radius:29px;box-shadow:0 20px 65px #05153375,inset 0 1px 0 #fff6}
.feature-card{border-radius:24px;min-width:0}
.feature-card:hover,.page-card:hover{border-color:rgba(255,255,255,.46);background:linear-gradient(145deg,rgba(227,239,255,.22),rgba(125,155,230,.13))}
.browse-badge{background:linear-gradient(145deg,#d5ecff,#8cafff);color:#142b4c;box-shadow:0 6px 25px #84b7fa55}
.workspace{position:relative;z-index:2;background:transparent;gap:12px;padding:12px;min-height:0}
.left-panel,.right-panel{border-radius:24px;overflow:hidden;background:linear-gradient(150deg,rgba(200,224,255,.14),rgba(68,103,165,.075) 65%,rgba(90,130,212,.09))}
.editor-column{min-width:0;border:1px solid rgba(248,253,255,.16);border-radius:24px;overflow:hidden;box-shadow:0 22px 50px #040d206b;backdrop-filter:blur(15px);background:rgba(18,39,75,.2)}
.tool-strip{border:0;border-bottom:1px solid rgba(255,255,255,.22);border-radius:0;box-shadow:inset 0 1px 0 #ffffff2b;background:rgba(224,237,255,.105)}
.tool-btn{background:rgba(178,203,255,.13);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#e5f0ff}
.tool-btn.active{background:linear-gradient(130deg,rgba(187,213,255,.35),rgba(129,152,255,.28));border-color:#afcbff91;box-shadow:inset 0 1px 0 #fff7,0 5px 16px #080d3659}
.canvas-viewport{background-color:rgba(4,17,39,.3);background-image:radial-gradient(rgba(235,249,255,.19) .75px,transparent 1px);background-size:19px 19px;scrollbar-color:#9dbce385 transparent}
.canvas-wrap{border:1px solid #fff9;box-shadow:0 14px 55px #0009,0 0 0 5px #d9ebff16}
.editor-footer{border:0;border-top:1px solid rgba(255,255,255,.2);background:rgba(229,237,255,.1);border-radius:0;box-shadow:none}
.left-panel .panel-heading,.right-tabs{background:rgba(255,255,255,.055);box-shadow:none;border:0;border-bottom:1px solid rgba(255,255,255,.15)}
.page-list-meta{display:flex;align-items:center;gap:6px;justify-content:space-between;margin:8px 10px;padding:9px 8px;border-radius:12px;font-size:10px;color:#cbdcf6;line-height:1.45;box-shadow:none}
.page-list-meta button{background:rgba(152,182,252,.25);border:1px solid rgba(240,248,255,.22);border-radius:8px;color:#ecf4ff;padding:5px 7px;flex-shrink:0;font-size:9px}
.page-list{min-height:0;scrollbar-color:#a7b7f181 transparent;overflow-y:auto}
.page-card{margin:10px;border-radius:17px;padding:10px;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
.page-card.active{border-color:#d7ebffd9;box-shadow:0 0 0 2px rgba(148,180,255,.24),inset 0 1px 0 #fff8,0 14px 25px #0b12333b}
.page-preview{width:100%;overflow:hidden;border-radius:9px;background:#fff}
.page-preview img{width:100%;height:100%;object-fit:contain}
.page-card-footer{width:100%;display:flex;align-items:center;justify-content:space-between;gap:7px}
.page-card-footer strong{font-size:11px}.page-card-footer span{font-size:9px}
.page-export-select{display:flex;align-items:center;gap:6px;font-size:10px;color:#d9e8ff;align-self:flex-start;padding:2px 4px;cursor:pointer}
.page-export-select input{accent-color:#b6c7ff;width:15px;height:15px}
.page-actions{display:flex;justify-content:space-between;gap:6px;width:100%}
.page-actions button{background:rgba(220,232,255,.1);border:1px solid #ffffff29;color:#e3ecff;border-radius:8px;flex:1;min-height:26px}
.right-tabs{padding:11px 14px 0;gap:8px}
.right-tab{border-radius:12px 12px 0 0;color:#bfd2ec}.right-tab.selected{background:rgba(184,208,255,.13);color:#f9fdff;border-bottom:2px solid #c1d7ff}
.right-scroll{scrollbar-color:#c1d6ff8e transparent}
.side-title{padding:16px;border-radius:17px;box-shadow:none;border-color:#ffffff19;background:rgba(187,204,255,.05)}
.property-group{border-color:#ffffff26}
select,.property-group input[type=number],.property-group input[type=text],.property-group textarea,.region-editor textarea,.full-select,.type-extra input,.type-extra select{
 background:rgba(209,226,255,.11)!important;border:1px solid rgba(249,252,255,.22)!important;color:#eff6ff!important;border-radius:12px!important;box-shadow:inset 0 1px 0 #fff3;min-height:36px}
select option,select optgroup{background:#172747;color:#fff}
input::placeholder{color:#bed0e6}
.color-row input[type=color]{border-color:#eff8ff99}
.type-buttons{gap:5px}.type-buttons button{border-radius:9px;background:rgba(209,226,255,.17);border:1px solid #fff3;min-width:30px}
.type-buttons button.active{color:#07192e;background:#c3e6ff;border-color:#ecf9ff}
.type-extra{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.type-extra label{font-size:10px;color:#c5d6ed;flex:1;min-width:86px}
.type-extra input,.type-extra select{display:block;width:100%;padding:7px;margin-top:5px;font-size:11px}
.font-origin-hint{margin:8px 0;color:#b1d5f1;font-size:10px;line-height:1.55}
.upload-font-btn{background:rgba(209,229,255,.13);border:1px solid rgba(218,239,255,.28);color:#e5f5ff;width:100%;padding:9px 10px;border-radius:11px;text-align:left;font-size:10px}
.region-editor{padding:15px;border-radius:17px;background:linear-gradient(140deg,rgba(115,144,224,.28),rgba(78,98,161,.14));margin-bottom:17px}
.region-badge{font-size:10px;letter-spacing:.35px;color:#d1eaff;font-weight:800;margin-bottom:10px}
.font-match-readout{font-size:10px;line-height:1.5;color:#c7e1f9;margin:8px 0}
.region-editor .row button{border-radius:10px}.region-editor .row button:not(.cancel){background:linear-gradient(130deg,#b4cfff,#808cf5);color:#102246}
.soft-box{border-radius:17px;box-shadow:inset 0 1px 0 #fff3;background:rgba(206,225,255,.085)}
.export-selection{border-radius:18px;padding:15px;margin-bottom:14px;box-shadow:inset 0 1px 0 #fff4;background:rgba(201,220,255,.11)}
.full-select{display:block;width:100%;padding:10px;margin:0 0 12px;font-size:12px}
.export-page-checks{display:flex;gap:7px;flex-wrap:wrap;max-height:150px;overflow-y:auto;padding:3px 0 6px;scrollbar-color:#ffffff50 transparent}
.export-check{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:10px;background:rgba(200,215,255,.13);border:1px solid #ffffff27;border-radius:9px;padding:7px 8px;color:#dbeaff;cursor:pointer}
.export-check input{accent-color:#b6c7ff}
.export-page-summary{font-size:10px;color:#c1d8ff;margin:8px 0 15px}
.download-selection-btn{display:block;width:100%;padding:12px 8px;border-radius:12px;font-size:12px;cursor:pointer}
.download-selection-btn:disabled{opacity:.44;cursor:not-allowed}
.export-tile{box-shadow:inset 0 1px 0 #fff3;border-radius:14px}.export-tile.featured{background:linear-gradient(150deg,rgba(189,216,255,.26),rgba(135,141,241,.23))}
.busy-overlay{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(6,13,36,.58)}.busy-card{border-radius:25px;background:linear-gradient(146deg,rgba(159,187,245,.28),rgba(26,50,97,.8));backdrop-filter:blur(35px)}
@media(max-width:1100px){.workspace{gap:7px;padding:7px}.page-card{margin:7px}.page-list-meta{margin:7px}}
@media(max-width:750px){.workspace{padding:4px;gap:0}.editor-column{border-radius:18px}.left-panel,.right-panel{border-radius:20px}.right-panel{background:linear-gradient(145deg,rgba(45,72,117,.94),rgba(13,30,61,.96))}.left-panel{background:linear-gradient(145deg,rgba(45,72,117,.96),rgba(13,30,61,.98))}.topbar{background:rgba(25,44,78,.83)}.tool-strip{padding:6px;min-height:64px}.mobile-dock button{background:linear-gradient(145deg,rgba(168,195,253,.75),rgba(115,142,240,.85));border:1px solid #f0f8ff80;color:#071b38;backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 #fff8,0 13px 22px #101e4a66}.page-list-meta{margin:8px}}
@media(prefers-reduced-motion:reduce){.app-shell:before{animation:none}.subtle-btn,.primary-btn,.tool-btn,.icon-button,.sidebar-action,.upload-font-btn{transition:none}}

/* V3 — tap-to-match typography in frosted glass property panel */
.font-ai-control{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:9px 0 7px;padding:9px 10px;border-radius:13px;background:linear-gradient(120deg,rgba(185,211,255,.16),rgba(161,177,255,.07));border:1px solid rgba(236,248,255,.21);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.font-ai-toggle{display:flex;align-items:center;gap:7px;font-size:11px;color:#e3edff;font-weight:700;cursor:pointer;line-height:1.4}
.font-ai-toggle input{accent-color:#b1caff;width:16px;height:16px;flex-shrink:0}
.font-ai-retry{font-size:10px;font-weight:750;color:#0c2751;border:1px solid rgba(255,255,255,.7);border-radius:10px;padding:7px 9px;background:linear-gradient(135deg,#e7f3ff,#a2c7ff);white-space:nowrap}
.font-ai-retry:disabled{opacity:.5;cursor:progress}
.font-ai-status{font-size:11px;line-height:1.6;padding:9px 10px;color:#bed8ff;background:rgba(109,151,217,.13);border:1px solid rgba(195,220,255,.22);border-radius:11px;margin:0 0 11px}
.font-ai-status[data-kind="success"]{color:#b4f5e4;border-color:rgba(108,220,189,.33)}
.font-ai-status[data-kind="error"]{color:#ffd1d1;border-color:rgba(255,139,139,.3)}
.regions-layer.tap-select .region-hit{background:transparent;border-color:transparent}
.regions-layer.tap-select .region-hit:hover,.regions-layer.tap-select .region-hit.selected{background:rgba(118,143,252,.25);border-color:#92a4ff}