@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#eef4ff;background:#071126;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#eef4ff;--muted:#8493ad;--soft:#aebbd0;--line:rgba(162,189,236,.105);--blue:#64a8ff;--blue2:#367cf5;--glass:rgba(16,29,54,.68);--green:#7ed8bc}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 70% -20%,#17366a 0%,transparent 44%),radial-gradient(ellipse at 0 100%,#102344 0%,transparent 44%),#071126}button,input,textarea,select{font:inherit}button{color:inherit;cursor:pointer}.app-shell{height:100dvh;padding:18px 22px 20px;display:flex;flex-direction:column;gap:16px}.glass{background:var(--glass);border:1px solid rgba(163,189,229,.12);box-shadow:0 20px 60px #0002,inset 0 1px 0 #ffffff09;backdrop-filter:blur(24px)}.topbar{height:76px;min-height:76px;border-radius:19px;display:flex;align-items:center;padding:0 22px;gap:30px}.brand{display:flex;align-items:center;gap:11px;width:244px;flex:none;text-decoration:none;color:inherit}.logo{width:41px;height:41px;display:grid;place-items:center;border-radius:12px;border:1px solid #82b9ff4d;box-shadow:0 0 25px #2d80ff3b,inset 0 0 15px #3973ca3b}.logo svg{width:30px}.brand strong{font:800 15px Manrope,sans-serif;letter-spacing:-.45px}.brand em{font-style:normal;color:#9caed0;font-weight:500}.brand small{display:block;color:#71819b;font-size:10px;margin-top:3px}.searchbox{height:43px;width:min(520px,45vw);display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:12px;border:1px solid #9fb9e31c;background:#040f2157}.searchbox:focus-within{border-color:#599cff8c;box-shadow:0 0 0 3px #367cf51a}.searchbox svg{width:17px;height:17px;fill:none;stroke:#8294b0;stroke-width:1.7}.searchbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:#e8f0ff;font-size:13px}.searchbox input::placeholder{color:#7889a3}.top-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.sync-status{font-size:10px;color:#85d6b7}.profile-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#72b0ff,#386be0);font-weight:700}.account-email{color:#c4d0e2;font-size:11px;max-width:190px;overflow:hidden;text-overflow:ellipsis}.signout{border:0;background:transparent;color:#91a2bd;font-size:11px;padding:8px}.workspace{display:flex;gap:16px;min-height:0;flex:1}.sidebar{width:248px;border-radius:19px;padding:18px 13px 14px;display:flex;flex-direction:column;flex:none}.new-button{height:48px;width:100%;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid #93c2ff47;border-radius:13px;background:linear-gradient(110deg,#2976f442,#458fff1c);box-shadow:0 7px 22px #1656c41f;font-size:13px;font-weight:600}.new-button:hover,.primary-button:hover{filter:brightness(1.12);transform:translateY(-1px)}.new-button span{font-size:21px;color:#9bc9ff}.nav-caption{margin:29px 12px 10px;color:#61728e;font-size:9px;font-weight:700;letter-spacing:.17em}.nav-item{height:42px;width:100%;border:1px solid #6ea4f720;background:linear-gradient(90deg,#3f84f930,#3d77db14);border-radius:10px;padding:0 12px;display:flex;align-items:center;gap:12px;text-align:left;color:#d9eaff;font-size:12px;font-weight:600}.nav-item span{font-size:17px;color:#83baff}.nav-item b{margin-left:auto;color:#91a3c0;font-size:10px}.sidebar-bottom{margin-top:auto}.storage-card{min-height:64px;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #7da6e81a;background:#1f375e30;border-radius:12px}.storage-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:#538eeb24;color:#94c0ff}.storage-card b{display:block;font-size:10px;font-weight:600}.storage-card small{display:block;color:#7989a3;font-size:9px;margin-top:4px}.sidebar-foot{padding:13px 8px 2px;border-top:1px solid var(--line);font-size:10px;color:#7888a1;margin-top:13px}.sidebar-foot i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#76d3ad;box-shadow:0 0 8px #76d3ad;margin-right:6px}.main-panel{border-radius:19px;min-width:0;flex:1;overflow:hidden;position:relative}.home-view{height:100%;overflow:auto;padding:29px clamp(22px,4vw,56px) 45px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:27px}.eyebrow{color:#7285a3;font-size:9px;letter-spacing:.15em;font-weight:700}.page-heading h1{font:700 24px Manrope,sans-serif;letter-spacing:-.8px;margin:7px 0 4px}.page-heading p{color:var(--muted);font-size:12px;margin:0}.sort-button{border:1px solid #9fb9e322;background:#040f2157;border-radius:9px;padding:9px 12px;color:#aebbd0;font-size:10px}.section-heading{color:#dce7f7;font-size:12px;font-weight:600;margin:0 0 13px}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(140px,190px));gap:14px}.template-card{border:1px solid #a2bd241f;background:#101d36ad;border-radius:12px;overflow:hidden;text-align:left;padding:0;color:#dce7f7;font-size:11px;font-weight:500;transition:.18s}.template-card:hover,.document-card:hover{transform:translateY(-2px);border-color:#64a8ff69;box-shadow:0 9px 26px #0003}.template-card>span:last-child{display:block;padding:11px 13px}.template-preview{height:107px;background:linear-gradient(145deg,#101f3a,#0c1930);display:grid;place-items:center}.mini-page{display:flex;flex-direction:column;gap:6px;background:#fff;width:57px;height:77px;box-shadow:0 3px 15px #0006;padding:13px 8px}.mini-page i{display:block;height:3px;width:100%;border-radius:3px;background:#d9e3ef}.mini-page i:nth-child(2){width:85%}.mini-page i:nth-child(3){width:70%}.mini-page i.cyan{height:5px;width:75%;background:#33b8db;margin-bottom:3px}.recent-heading{margin-top:29px;display:flex;justify-content:space-between}.document-grid{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:13px}.document-card{border:1px solid #a2bd241f;background:#101d36ad;border-radius:12px;padding:12px;cursor:pointer;min-width:0;transition:.18s}.doc-thumb{height:122px;background:linear-gradient(145deg,#101f3a,#0c1930);border-radius:7px;display:grid;place-items:center;margin-bottom:10px}.doc-thumb .mini-page{width:69px;height:96px;padding:17px 10px;gap:7px}.doc-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-meta{font-size:9px;color:#8493ad;margin-top:5px}.card-menu{float:right;background:none;border:0;color:#8493ad}.empty-state{min-height:220px;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}.empty-state:not([hidden]){display:flex}.empty-art{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:radial-gradient(circle at 40% 25%,#458bf93b,#2d4e8912);border:1px solid #7fa9ec29;color:#9dc6ff;font-size:27px;box-shadow:0 0 40px #2765d01f;margin-bottom:14px}.empty-state h2{font:700 16px Manrope;margin:0 0 7px}.empty-state p{max-width:310px;color:#8291aa;font-size:11px;line-height:1.7;margin:0 0 15px}.primary-button,.share-button{border:1px solid #75aeff47;background:#347df229;border-radius:9px;padding:9px 14px;font-size:11px;transition:.16s}.editor-view{height:100%;display:flex;flex-direction:column}.editor-view[hidden]{display:none}.editor-header{height:62px;flex:none;padding:0 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}.back-button,.delete-button{border:0;background:transparent;color:#aab8cd;font-size:14px;padding:8px;border-radius:8px}.back-button:hover,.delete-button:hover{background:#85aef11a}.title-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:12px}.title-wrap input{max-width:440px;width:100%;border:0;background:none;outline:0;color:#e8f0ff;font:600 13px Manrope;padding:7px}.save-status{font-size:9px;color:#86d6b7;white-space:nowrap}.save-status.error{color:#ffab9d}.save-status.saving{color:#aebbd0}.share-button{background:#367cf5;color:white;padding:8px 15px}.format-toolbar{height:44px;flex:none;display:flex;align-items:center;gap:7px;padding:0 24px;border-bottom:1px solid var(--line)}.format-toolbar select{background:#101d36;color:#b9c8dc;border:1px solid #9fb9e322;border-radius:6px;padding:6px 9px;font-size:10px}.format-toolbar>span{height:19px;width:1px;background:var(--line);margin:0 4px}.format-toolbar button{height:29px;min-width:29px;border:1px solid transparent;border-radius:6px;background:transparent;color:#aebbd0;font-size:12px}.format-toolbar button:hover{background:#77a6f11a;color:#eef4ff}.retry-button{margin-left:auto!important;color:#ffba9f!important;border-color:#ffba9f4c!important}.canvas{flex:1;overflow:auto;padding:24px;background:#0b1830a8}.page{width:min(816px,100%);min-height:calc(100% - 25px);margin:0 auto;background:#fff;color:#24334b;padding:82px clamp(28px,8vw,100px);outline:0;box-shadow:0 8px 38px #0004;font:16px/1.72 Georgia,serif;overflow-wrap:anywhere}.page:focus{box-shadow:0 8px 38px #0004,0 0 0 1px #64a8ff4a}.page:empty:before{content:'Start writing…';color:#aeb8c5}.page h1,.page h2,.page h3{font-family:Manrope,Arial,sans-serif;line-height:1.25;color:#1c2d49}.page p{margin:.3em 0 .9em}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#10213f;border:1px solid #64a8ff44;color:#eef4ff;padding:11px 16px;border-radius:10px;z-index:4;font-size:11px;box-shadow:0 10px 32px #0004}.toast.error{border-color:#ff9a8f88}.toast[hidden]{display:none}
@media(max-width:900px){.brand{width:210px}.account-email{display:none}.document-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}@media(max-width:620px){.app-shell{padding:9px;gap:9px}.topbar{height:61px;min-height:61px;padding:0 11px;gap:10px;border-radius:14px}.brand{width:auto;min-width:39px}.brand>span:last-child,.searchbox{display:none}.top-actions{gap:7px}.sync-status{max-width:104px;overflow:hidden;text-overflow:ellipsis}.sidebar{display:none}.workspace{gap:0}.main-panel{border-radius:14px}.home-view{padding:22px 15px}.page-heading{align-items:flex-start;gap:12px;flex-direction:column}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.template-preview{height:90px}.template-card>span:last-child{padding:9px 7px;font-size:9px}.document-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.doc-thumb{height:104px}.editor-header{padding:0 8px;gap:5px}.title-wrap{display:block}.title-wrap input{font-size:11px;padding:3px}.save-status{padding-left:4px}.delete-button{font-size:10px}.share-button{padding:7px 10px}.format-toolbar{padding:0 9px;gap:3px}.format-toolbar select{max-width:120px}.canvas{padding:12px}.page{padding:42px 24px;font-size:15px}}
.retry-list{grid-column:1/-1;justify-self:start;color:#a7caff;background:#347df229;border:1px solid #75aeff47;border-radius:9px;padding:9px 14px;font-size:11px}.signout-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}.signout-page .logo{width:58px;height:58px;margin-bottom:18px}.signout-page .logo svg{width:38px}.signout-page h1{font:700 24px Manrope;margin:0 0 8px}.signout-page p{color:#8493ad;font-size:13px}.signout-page a{margin-top:12px;color:#9bc9ff;font-size:12px;text-decoration:none}


/* Docs-inspired structure in Oklyro's existing navy, blue, and cyan palette */
.app-shell{padding:0;gap:0;height:100dvh;background:#071126}
.topbar{height:72px;min-height:72px;padding:0 24px;border:0;border-bottom:1px solid rgba(162,189,236,.14);border-radius:0;background:#09172f;box-shadow:none;backdrop-filter:none}
.brand{width:255px}
.logo{border-radius:10px}
.searchbox{height:42px;width:min(600px,48vw);border-radius:22px;background:#122442;border-color:#294365}
.top-actions{gap:14px}
.shared-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #36c1df4a;border-radius:999px;background:#0fc5df12;color:#9feaf5;font-size:10px;white-space:nowrap}
.badge-short{display:none}
.workspace{gap:0;padding:12px 16px 16px}
.sidebar{width:236px;margin-right:12px;padding:16px 12px 12px;border-radius:16px;background:#0a1932;border-color:#273d60;box-shadow:none;backdrop-filter:none}
.new-button{height:44px;border-radius:22px;background:#173968;border-color:#4385df66;box-shadow:none}
.new-button span{font-weight:400}
.nav-caption{margin:27px 14px 10px}
.nav-item{height:40px;border:0;border-radius:0 22px 22px 0;background:transparent;padding-left:15px;color:#b8c7dc;font-weight:500}
.nav-item:hover{background:#142a49}
.nav-item.active{background:#173968;color:#e9f3ff}
.nav-item b{font-weight:600}
.storage-card{background:#102343;border-color:#284468;border-radius:12px}
.main-panel{border-radius:16px;background:#0a1830;border-color:#273d60;box-shadow:none;backdrop-filter:none}
.home-view{max-width:1210px;margin:0 auto;padding:42px clamp(28px,5vw,76px) 52px}
.page-heading{margin-bottom:34px}
.page-heading h1{font-size:28px;letter-spacing:-.9px}
.page-heading p{font-size:13px}
.eyebrow{color:#70cde1}
.sort-button{border-radius:8px;background:#10213d;border-color:#2b4264;color:#c0cee0}
.section-heading{font-size:13px;color:#e6eefb}
.template-grid{grid-template-columns:repeat(3,minmax(150px,205px));gap:16px}
.template-card{border-color:#2a4266;background:#0c1b35;border-radius:11px;box-shadow:none}
.template-card:hover,.document-card:hover{transform:translateY(-2px);border-color:#64a8ff9c;box-shadow:0 8px 24px #0003}
.template-preview{height:130px;background:#112544}
.mini-page{width:62px;height:84px;padding:14px 9px;gap:6px;box-shadow:0 4px 16px #0007}
.mini-page i{height:3px}
.mini-page i.cyan{height:5px}
.recent-heading{margin-top:36px}
.document-grid{grid-template-columns:repeat(auto-fill,minmax(170px,190px));gap:14px}
.document-card{padding:10px;border-color:#2a4266;background:#0c1b35;border-radius:10px}
.doc-thumb{height:132px;background:#112544;border-radius:7px}
.doc-thumb .mini-page{width:72px;height:99px;padding:17px 10px;gap:7px}
.doc-name{font-size:12px}
.doc-meta{font-size:10px}
.editor-header{height:64px;padding:0 20px;gap:9px;background:#0a1932}
.editor-file-icon{width:23px;height:27px;display:grid;place-items:center;flex:none;color:#71aaff}
.editor-file-icon svg{width:22px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.title-wrap{gap:9px}
.title-wrap input{max-width:470px;border-radius:5px;font-size:14px}
.title-wrap input:hover,.title-wrap input:focus{background:#122442}
.format-toolbar{height:48px;padding:0 20px;gap:5px;background:#0d1d38;border-bottom-color:#29405f}
.format-toolbar select{height:31px;background:#132746;border-color:#304967;border-radius:6px;color:#e0e9f7;font-size:11px}
.format-toolbar>span,.toolbar-divider{height:21px;width:1px;background:#344968;margin:0 7px}
.format-toolbar button{height:31px;min-width:31px;border-radius:5px;color:#c7d4e7;font-size:14px}
.format-toolbar button:hover{background:#1b3455;color:#f3f7ff}
.format-toolbar button:focus-visible,.format-toolbar select:focus-visible{outline:2px solid #64a8ff;outline-offset:1px}
.toolbar-history{font-size:19px!important}
.toolbar-divider{display:inline-block;flex:none}
.canvas{padding:34px 24px 64px;background:#08162c}
.page{width:min(816px,100%);min-height:1056px;margin:0 auto 32px;padding:96px clamp(32px,8vw,96px);box-shadow:0 2px 12px #0007;font:16px/1.72 Arial,sans-serif}
.page:focus{box-shadow:0 2px 12px #0007,0 0 0 2px #64a8ff75}
.page h1,.page h2,.page h3{font-family:Arial,sans-serif}
.toast{border-radius:8px}
@media(max-width:900px){.brand{width:220px}.workspace{padding:10px}.sidebar{width:205px}.home-view{padding:32px 28px}.badge-wide{display:none}.badge-short{display:inline}}
@media(max-width:620px){.app-shell{padding:0;gap:0}.topbar{height:60px;min-height:60px;padding:0 12px;gap:8px}.brand{width:auto;min-width:39px}.brand>span:last-child,.searchbox{display:none}.top-actions{gap:7px}.sync-status{max-width:104px;overflow:hidden;text-overflow:ellipsis}.shared-badge{padding:6px 8px;font-size:9px}.workspace{padding:8px}.sidebar{display:none}.main-panel{border-radius:13px}.home-view{padding:24px 16px}.page-heading{align-items:flex-start;gap:12px;flex-direction:column}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.template-preview{height:92px}.template-card>span:last-child{padding:9px 7px;font-size:9px}.document-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.doc-thumb{height:104px}.editor-header{height:58px;padding:0 8px;gap:4px}.editor-file-icon{width:19px}.title-wrap{display:block}.title-wrap input{font-size:11px;padding:4px 3px}.save-status{padding-left:4px}.delete-button{font-size:10px}.share-button{padding:7px 10px}.format-toolbar{height:44px;padding:0 8px;gap:2px;overflow-x:auto}.format-toolbar>span,.toolbar-divider{margin:0 4px}.format-toolbar select{max-width:120px}.format-toolbar button{min-width:27px;height:29px}.canvas{padding:14px 8px}.page{min-height:1056px;padding:42px 24px;font-size:15px}}

/* Editing mode mirrors Docs: give the page the full work surface. */
body:has(.editor-view:not([hidden])) .sidebar{display:none}