body.doks { min-height:100vh; }
.doks-wrap { width:min(1320px,calc(100% - 64px)); margin-inline:auto; padding:28px 0; }
.doks #main { max-width:none; }
.doks-navigation { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; padding:6px; width:fit-content; border:1px solid var(--portal-edge); border-radius:12px; background:var(--portal-glass); }
.doks-navigation a { display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border-radius:8px; text-decoration:none; color:var(--portal-muted); font-size:14px; font-weight:600; }
.doks-navigation a[aria-current=page] { background:var(--portal-tint); color:var(--portal-link); box-shadow:inset 0 -2px 0 var(--portal-accent); }
.doks-navigation a:hover { color:var(--portal-link); }
.doks #notice:empty { display:none; }
.doks #notice { margin-bottom:20px; color:var(--portal-text); }
.doks-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:32px; padding:32px; border:1px solid var(--portal-edge); border-radius:20px; background:var(--portal-surface); box-shadow:var(--portal-raised); margin-bottom:26px; }
.doks #app .doks-hero h1 { margin:12px 0; color:var(--portal-link); }
.doks #app .doks-hero p { margin:0; max-width:62ch; color:var(--portal-muted); font-size:16px; }
.doks-count { display:grid; place-items:center; min-width:110px; min-height:110px; border-radius:20px; background:var(--portal-tint); color:var(--portal-link); }
.doks-count strong { display:block; font-size:38px; line-height:1.1; }
.doks-count span { display:block; font-size:12px; }
.doks-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin:22px 0; }
.doks-toolbar .portal-search { flex:1; max-width:600px; padding:12px 16px; }
.doks .doks-toolbar input { width:100%; min-height:24px; padding:0; margin:0; font-size:15px; }
.doks-library { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:24px; align-items:start; }
.doks .doks-book { display:flex; flex-direction:column; gap:14px; padding:16px; border:1px solid var(--portal-edge); border-radius:16px; color:var(--portal-text); text-decoration:none; background:var(--portal-surface); box-shadow:var(--portal-rim),var(--portal-raised); }
.doks-book .info-project-cover { aspect-ratio:210/297; border-radius:8px; }
.doks-book strong { font-size:17px; line-height:1.4; }
.doks-book p { margin:0; color:var(--portal-muted); }
.doks .doks-book>span:last-child { font-size:13px; font-weight:600; color:var(--portal-link); }
.doks-empty { padding:48px 24px; border:1px dashed var(--portal-edge); border-radius:16px; text-align:center; background:var(--portal-surface); }
.doks-empty svg { width:48px; height:48px; color:var(--portal-link); margin-bottom:18px; }
.doks-reader-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.doks-reader { padding:20px; border:1px solid var(--portal-edge); border-radius:18px; background:var(--portal-surface); box-shadow:var(--portal-raised); }
.doks-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.doks-pagination button { min-width:48px; min-height:44px; }
.doks .doks-pagination select { width:auto; margin:0; padding:10px; background:var(--portal-bg); color:var(--portal-text); border:1px solid var(--portal-edge); border-radius:8px; font-size:14px; }
.doks-leaf { display:grid; place-items:start center; perspective:1100px; touch-action:pan-y; }
.doks-leaf canvas { display:block; max-width:100%; width:min(100%,780px); height:auto; background:white; border-radius:3px; box-shadow:var(--portal-floating); }
.doks-reader:fullscreen { overflow:auto; padding:20px; background:var(--portal-bg); }
.doks-reader:fullscreen .doks-leaf canvas { width:auto; max-height:calc(100dvh - 120px); }
.doks-reader-help { text-align:center; color:var(--portal-muted); font-size:12px; margin-top:18px; }
.doks-footer { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; margin-top:48px; padding-top:22px; border-top:1px solid var(--portal-edge); color:var(--portal-muted); font-size:12px; }
.doks-footer>span { margin-right:auto; }
.doks-footer a { color:var(--portal-link); }
.doks #app .portal-signin { margin-top:22px; }
.doks .portal-info-editor { margin:auto; }
.doks .portal-info-tools { gap:12px; }
.doks .portal-mfa .portal-signin-field { margin:16px 0; }
.doks .portal-mfa input:not([type=checkbox]) { width:100%; min-height:48px; padding:10px 12px; }
.doks .portal-mfa label { display:block; margin-bottom:8px; }
.doks-creator { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:28px; align-items:start; }
.doks .doks-editor { max-width:none; padding:0; border:0; background:transparent; margin:0; }
.doks-editor-section,.doks-creator-preview>div { padding:26px; border:1px solid var(--portal-edge); border-radius:16px; background:var(--portal-surface); box-shadow:var(--portal-raised); margin-bottom:22px; }
.doks #app .doks-editor-section h2 { margin:0 0 22px; font-size:21px; }
.doks-editor label { display:block; margin:14px 0 7px; font-size:14px; font-weight:600; }
.doks .doks-editor :is(input,textarea,select) { width:100%; padding:11px 12px; margin:0; border:1px solid var(--portal-edge); border-radius:8px; color:var(--portal-text); background:var(--portal-bg); font-size:15px; }
.doks-editor-meta { display:grid; grid-template-columns:1fr 180px; gap:18px; }
.doks-editor-block { border-top:1px solid var(--portal-edge); padding:20px 0; }
.doks-editor-block header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.doks #app .doks-editor-block h3 { margin:0; font-size:17px; }
.doks-editor-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.doks-editor-actions p { flex-basis:100%; }
.doks-creator-preview { position:sticky; top:105px; }
.doks #app .doks-creator-preview h2 { font-size:23px; margin:12px 0; }
.doks-creator-preview p { color:var(--portal-muted); }
#creator-canvas { margin:20px 0; padding:12px; border:1px solid var(--portal-edge); border-radius:10px; background:var(--portal-bg); }
#creator-canvas canvas { display:block; width:100%; height:auto; box-shadow:var(--portal-raised); }
.doks-creator-preview .portal-button { margin:5px 4px 5px 0; }
[hidden] { display:none!important; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .doks-book { transition:transform 180ms var(--portal-ease),box-shadow 180ms ease; }
 .doks-book:hover { transform:translateY(-3px); box-shadow:var(--portal-floating); }
}
@media (prefers-reduced-motion:no-preference) {
 .doks-leaf.turn-next canvas { animation:doks-next 200ms ease-out; }
 .doks-leaf.turn-prev canvas { animation:doks-prev 200ms ease-out; }
 @keyframes doks-next { from{opacity:.75;transform:rotateY(-6deg)}to{opacity:1;transform:none} }
 @keyframes doks-prev { from{opacity:.75;transform:rotateY(6deg)}to{opacity:1;transform:none} }
}
@media (max-width:680px) {
 .doks-wrap { width:calc(100% - 28px); padding-top:18px; }
 .doks-hero { padding:24px; gap:18px; grid-template-columns:1fr; }
 .doks-count { display:none; }
 .doks-library { gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); }
 .doks .doks-book { padding:12px; }
 .doks .doks-book strong { font-size:15px; }
 .doks .doks-book p { display:none; }
 .doks-reader { padding:12px; }
 .doks-navigation { width:100%; }
 .doks-navigation a { padding-inline:12px; }
 .doks-footer { align-items:flex-start; gap:12px; }
 .doks-editor-section,.doks-creator-preview>div { padding:20px; }
 .doks-editor-meta { grid-template-columns:1fr; gap:0; }
}
@media (max-width:1050px) { .doks-creator { grid-template-columns:1fr; }.doks-creator-preview { position:static; } }