:root{--ink:#241d18;--paper:#f4efe7;--card:#fffdf9;--line:#d9cfc2;--red:#8a3f32;--green:#294c46;--gold:#9a6a2f}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;min-height:64px;padding:10px 4%;border-bottom:1px solid var(--line);background:#fffdf9f5}.brand{font-family:Georgia,serif;font-size:24px;font-weight:800;color:var(--ink);text-decoration:none}nav{display:flex;gap:5px;overflow:auto}nav a{padding:9px 12px;border-radius:9px;color:#5e5047;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}nav a:hover{background:#eee5da}.who{margin-left:auto;text-align:right;font-weight:700}.who small{display:block;color:#8a776b;text-transform:capitalize}main{max-width:1480px;margin:auto;padding:24px}.page-head h1{margin:0 0 20px;font-family:Georgia,serif}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.toolbar form{display:flex;gap:8px}.journey{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-bottom:18px}.status{min-height:100px;padding:13px;border:1px solid;border-radius:14px;box-shadow:0 3px 9px #3b2b1c12}.status b{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff}.status strong{float:right;font-size:20px}.status span{display:block;margin-top:20px;font-size:12px;font-weight:800}.s-placed{background:#edf6ff;color:#22558b;border-color:#9dc8ef}.s-production{background:#fff9e5;color:#8a5712;border-color:#e8c75e}.s-review{background:#f4efff;color:#64309b;border-color:#c9afea}.s-confirmed{background:#e9fbfc;color:#126776;border-color:#77d2dc}.s-delivery{background:#fff3e9;color:#934510;border-color:#e7b181}.s-delivered{background:#e9faf3;color:#176a4d;border-color:#7fd3b5}.s-canceled{background:#fff0f0;color:#922b35;border-color:#e4a1a8}.card{margin-bottom:20px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 4px 14px #39291c12}.card h2{margin-top:0;font-family:Georgia,serif}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:12px 9px;border-bottom:1px solid #eee5dc;text-align:left;vertical-align:top}td small{display:block;margin-top:4px;color:#807166}.pill{display:inline-block;padding:5px 8px;border:1px solid;border-radius:999px;font-size:10px;font-weight:800}.btn,button{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;border:0;border-radius:9px;background:var(--red);color:white;text-decoration:none;font-weight:800;cursor:pointer}.btn.small{padding:7px 9px;font-size:11px}.btn.ghost{background:#eee5da;color:var(--ink)}.gold{background:var(--gold)}.disabled{pointer-events:none;opacity:.4}label{display:block;margin:10px 0;font-size:13px;font-weight:700}input,textarea,select{width:100%;margin-top:5px;padding:10px;border:1px solid #cfc2b6;border-radius:8px;background:white;color:var(--ink);font:inherit}textarea{min-height:82px;resize:vertical}.grid{display:grid;gap:12px}.grid.two,.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.span2{grid-column:span 2}.alert{margin-bottom:15px;padding:12px;border-radius:10px}.alert.ok{background:#e6f7ef;color:#176447}.alert.error{background:#feecec;color:#922b35}dialog{width:min(620px,94vw);max-height:90vh;padding:24px;border:0;border-radius:16px;overflow:auto;box-shadow:0 25px 80px #0004}dialog::backdrop{background:#0008}.close{float:right;padding:4px 10px;background:transparent;color:#333;font-size:24px}.login,.install{display:grid;min-height:100vh;place-items:center}.login-card,.install-card{width:min(520px,92vw);padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 20px 60px #32211626}.install-card{width:min(700px,94vw)}.money-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}.money-grid>div{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.money-grid span{display:block;color:#817166;font-size:11px;font-weight:800;text-transform:uppercase}.money-grid b{display:block;margin-top:10px;font-size:24px;color:var(--green)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.job{display:grid;gap:8px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none}.thumb{display:block;width:100px;height:130px;margin-top:8px;object-fit:cover;border-radius:7px}.page-tabs{position:sticky;top:65px;z-index:10;display:flex;gap:5px;padding:10px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.page-tabs button{min-width:38px;padding:8px;background:#eee5da;color:var(--ink)}.page-tabs button.active{background:var(--red);color:#fff}.sticky-save{position:sticky;bottom:15px;width:100%;padding:14px;box-shadow:0 10px 30px #0003}.hint{color:#817166;font-size:12px}
@page inner-page{size:A5 portrait;margin:0}@page cover-page{size:A3 landscape;margin:0}.print-inner{margin:0;background:#fff}.a5{page:inner-page;position:relative;width:148mm;height:210mm;overflow:hidden;break-after:page;background:#ddd}.a5>img{position:absolute;width:100%;height:100%;object-fit:cover}.story{position:absolute;z-index:2;left:5%;right:5%;padding:4mm 5mm;border-radius:2mm;background:#fffdf780;color:#26211d}.story h2{margin:0 0 2mm;font:700 16pt Georgia}.story p{margin:0;font:12pt/1.5 Arial}.pos-top{top:5%}.pos-bottom{bottom:5%}.pos-left{top:30%;right:35%}.pos-right{top:30%;left:35%}.pos-full{top:35%}.pageno{position:absolute;right:4mm;bottom:3mm;z-index:3;color:white}.print-cover{margin:0;background:#fff}.a3{page:cover-page;position:relative;width:420mm;height:297mm;overflow:hidden;background:#fff}.pair{position:absolute;left:36.6mm;top:18.1mm;display:flex;width:346.8mm;height:260.8mm}.pair img{width:173.4mm;height:260.8mm;object-fit:contain}.pair i{position:absolute;left:173.4mm;top:0;height:260.8mm;border-left:.25mm dashed #111}.crop{position:absolute;width:7mm;height:7mm;border-color:#111}.crop.tl{left:34.6mm;top:16.1mm;border-left:.25mm solid;border-top:.25mm solid}.crop.tr{right:34.6mm;top:16.1mm;border-right:.25mm solid;border-top:.25mm solid}.crop.bl{left:34.6mm;bottom:16.1mm;border-left:.25mm solid;border-bottom:.25mm solid}.crop.br{right:34.6mm;bottom:16.1mm;border-right:.25mm solid;border-bottom:.25mm solid}
@media(max-width:900px){header{align-items:flex-start;flex-wrap:wrap}nav{order:3;width:100%}.who{font-size:12px}.journey{grid-template-columns:repeat(2,1fr)}.money-grid{grid-template-columns:repeat(2,1fr)}.grid.two,.split{grid-template-columns:1fr}.span2{grid-column:auto}main{padding:15px}.toolbar{align-items:stretch;flex-direction:column}.toolbar form{flex-wrap:wrap}.page-head h1{font-size:24px}}
.user-row{display:grid;grid-template-columns:1fr 1.25fr 1fr 1.2fr auto auto;gap:7px;align-items:center;padding:10px 0;border-bottom:1px solid #eee5dc}.user-row input,.user-row select{margin:0}.check{display:flex;align-items:center;gap:5px;margin:0;white-space:nowrap}.check input{width:auto}@media(max-width:900px){.user-row{grid-template-columns:1fr}}

/* Exact visual language of the original StoryBook Studio UI */
.app-header{padding:8px max(16px,calc((100vw - 1500px)/2));gap:18px;background:#fffdf9f2;backdrop-filter:blur(10px)}
.brand-lockup{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;white-space:nowrap}.brand-lockup b{display:block;font:700 20px/1 Georgia,serif}.brand-lockup small{display:block;margin-top:5px;color:#8a776b;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.brand-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:12px;background:var(--red);color:#fff;font-size:17px}.top-actions{margin-left:auto;align-items:center}.nav-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid #cdbfb2;background:#fff}.nav-btn.active.green{border-color:var(--green);background:var(--green);color:#fff}.nav-btn.active.red{border-color:var(--red);background:var(--red);color:#fff}.nav-btn.active.gold{border-color:var(--gold);background:var(--gold);color:#fff}.role-chip{order:-1;padding:9px 10px;border:1px solid #cdbfb2;border-radius:9px;background:white;color:#453a33;font-size:12px;font-weight:800;white-space:nowrap}.logout{color:#8a3f32!important}.app-main{max-width:1500px;padding:24px 20px}.dashboard-title{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:12px}.dashboard-title small,.eyebrow{margin:0;color:#8a776b;font-size:11px;font-weight:800;letter-spacing:.16em}.dashboard-title h1{margin:4px 0 0;font:700 25px Georgia,serif}.rangebar{margin-bottom:14px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.rangebar form{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.rangebar input{width:auto;margin:0}.range-btn{padding:8px 12px;background:transparent;color:#67574d;font-size:12px}.range-btn.active{background:var(--green);color:#fff}
.production-layout{display:grid;grid-template-columns:250px minmax(390px,1fr) 390px;gap:20px;align-items:start}.setup-panel,.editor-panel{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 3px 10px #39291c10}.setup-panel{position:sticky;top:84px}.editor-panel{padding:20px}.adventure-note{margin-top:12px;padding:12px;border-radius:12px;background:#f3ebe1;color:#67574d;font-size:11px;line-height:1.7}.child-grid{display:grid;grid-template-columns:1.4fr .7fr .9fr;gap:7px}.child-grid label{font-size:10px}.gap-top{margin-top:20px}.progress{height:8px;margin:9px 0 14px;overflow:hidden;border-radius:99px;background:#e8ddd2}.progress i{display:block;height:100%;border-radius:inherit;background:var(--red)}.page-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.page-grid button{position:relative;aspect-ratio:1;padding:0;border:1px solid #ded4ca;background:#fff;color:var(--ink);font-size:12px}.page-grid button.ready:after{content:'\2713';position:absolute;right:4px;top:2px;font-size:9px}.page-grid button.active{border-color:var(--red);background:var(--red);color:#fff}.inner-btn{width:100%;margin-top:14px;background:var(--gold)}.preview-column{min-width:0}.preview-column>h1{margin:5px 0 14px;font:700 25px Georgia,serif}.book-preview{position:relative;width:min(100%,470px);aspect-ratio:148/210;margin:auto;overflow:hidden;border-radius:10px;background:linear-gradient(145deg,#eadbd1,#c8d8d3);box-shadow:0 18px 50px #35261b27}.preview-empty{position:absolute;inset:0;display:grid;place-content:center;gap:9px;text-align:center;color:#6c5b51}.preview-empty span{font-size:38px}.preview-empty small{font-size:11px}.preview-text{position:absolute;left:5%;right:5%;bottom:5%;padding:15px 18px;border-radius:8px;background:#fffdf780;backdrop-filter:blur(2px)}.preview-text h2{margin:0 0 6px;font:700 18px Georgia,serif}.preview-text p{margin:0;font-size:14px;line-height:1.55}.preview-meta{text-align:center;color:#8a776b;font-size:12px;font-weight:700}.editor-title{display:flex;justify-content:space-between;align-items:center}.editor-title h2{margin:4px 0 10px;font:700 20px Georgia,serif}.image-badge{padding:5px 9px;border-radius:99px;background:#a76318;color:#fff;font-size:10px;font-weight:800}.image-badge.done{background:#177151}.editor-panel textarea{line-height:1.55}.upload-btn{display:flex;align-items:center;justify-content:center;margin-top:16px;padding:11px;border-radius:9px;background:var(--green);color:white;text-align:center;cursor:pointer}.upload-btn.secondary{border:1px solid #cdbfb2;background:white;color:var(--ink)}.upload-btn input{display:none}.cover-section{margin-top:20px;padding-top:18px;border-top:1px solid #e5dcd2}.cover-section textarea{background:#f8f3ec;font-size:11px}.editor-panel .sticky-save{z-index:5}.page-editor[hidden]{display:none!important}
@media(max-width:1180px){.production-layout{grid-template-columns:230px 1fr}.editor-panel{grid-column:1/-1}.setup-panel{position:static}}
@media(max-width:760px){.app-header{align-items:center}.top-actions{order:3;width:100%}.role-chip{order:0}.app-main{padding:18px 14px}.production-layout{grid-template-columns:1fr}.setup-panel,.editor-panel{grid-column:auto}.book-preview{max-width:430px}.dashboard-title{align-items:flex-start}.journey{grid-template-columns:repeat(2,1fr)}}
