:root{
  --bg:#1b2a2e; --cloth:#14211f; --panel:rgba(255,255,255,.07); --panel2:#24363a;
  --ink:#ece4d6; --muted:#93a29d; --line:rgba(236,228,214,.18);
  --paper:#e9dfcb; --brass:#c9a227; --cast:rgba(0,0,0,.45); --danger:#e07a6a;
  --sel:#4fa3ff;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  background-image:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.07), transparent 60%);
  -webkit-tap-highlight-color:transparent;
}
#app{height:100dvh; display:flex; flex-direction:column}
.screen{flex:1; display:flex; flex-direction:column; min-height:0}
button{font:inherit; color:inherit}
.serif{font-family:"Zen Old Mincho",serif}

/* top bar */
.bar{display:flex; align-items:center; gap:.4rem; padding:max(.5rem,env(safe-area-inset-top)) .6rem .5rem; min-height:52px; position:relative; z-index:5}
.bar h1{margin:0 .3rem; font-family:"Zen Old Mincho",serif; font-weight:600; font-size:1.1rem; letter-spacing:.12em; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar .count{font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums}
.icon{width:40px; height:40px; border-radius:50%; border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none}
.icon:hover{background:var(--panel)}
.icon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.icon.on{background:var(--brass); color:#1b1b1b}
.btn{font-size:.88rem; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; cursor:pointer}
.btn:hover{background:rgba(255,255,255,.13)}
.btn.primary{background:var(--brass); color:#1b1b1b; border-color:var(--brass); font-weight:600}
.btn.danger{color:var(--danger); border-color:rgba(224,122,106,.5)}
.btn:disabled{opacity:.4; cursor:default}
button:focus-visible{outline:2px solid var(--brass); outline-offset:2px}

/* home */
.home-body{flex:1; overflow:auto; padding:.5rem 1rem 6rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:1.2rem 1rem}
.book-card{background:none; border:0; padding:0; text-align:left; cursor:pointer; position:relative}
.book-card .thumb{width:100%; border-radius:3px 8px 8px 3px; overflow:hidden; background:var(--cloth); box-shadow:0 10px 24px -10px var(--cast),0 0 0 1px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center}
.book-card canvas{width:100%; height:100%; object-fit:contain; display:block}
.book-card .name{margin-top:.5rem; font-family:"Zen Old Mincho",serif; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:28px}
.book-card .date{font-size:.75rem; color:var(--muted)}
.book-card .edit{position:absolute; right:-6px; bottom:4px; width:34px; height:34px}
.empty{color:var(--muted); text-align:center; margin-top:20vh; line-height:2}
.fab{position:fixed; right:max(1.2rem,env(safe-area-inset-right)); bottom:max(1.2rem,env(safe-area-inset-bottom)); width:60px; height:60px; border-radius:18px; background:var(--brass); color:#1b1b1b; border:0; box-shadow:0 8px 22px -6px rgba(0,0,0,.6); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10}
.fab svg{width:28px; height:28px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round}
.note{font-size:.75rem; color:var(--muted); margin:1.5rem 0 0; line-height:1.7}

/* book stage */
.stage{flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; user-select:none; -webkit-user-select:none}
.stage.view::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 14%,transparent 86%,rgba(0,0,0,.22))}
.book{position:relative; perspective:1800px; perspective-origin:50% 45%}
.under{position:absolute; inset:0; background-size:100% 100%; background-color:var(--paper); border-radius:3px 10px 10px 3px; box-shadow:0 18px 40px -12px var(--cast),0 0 0 1px rgba(0,0,0,.25)}
.gutter{position:absolute; inset:0; pointer-events:none; border-radius:3px 10px 10px 3px; background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 7%)}
.castsh{position:absolute; top:0; left:0; height:100%; width:0; opacity:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,0),var(--cast))}
.curl{position:absolute; inset:0; transform-style:preserve-3d; display:none}
.strip{position:absolute; top:0; height:100%; transform-style:preserve-3d; will-change:transform}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden}
.front{background-repeat:no-repeat; background-color:var(--paper)}
.back{transform:rotateY(180deg); background:var(--paper)}
.ghost{position:absolute; inset:0; background-repeat:no-repeat; opacity:.13; filter:grayscale(1)}
.shade{position:absolute; inset:0; background:#000; opacity:0}
.front>.shade{opacity:var(--sf,0)}
.back>.shade{opacity:var(--sb,0)}

/* editor */
.edit-page{position:relative; box-shadow:0 18px 40px -12px var(--cast),0 0 0 1px rgba(0,0,0,.25)}
.edit-page canvas{position:absolute; inset:0; width:100%; height:100%}
.sel{position:absolute; border:1.5px solid var(--sel); pointer-events:none; transform-origin:center}
.sel .h{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; background:#fff; border:2px solid var(--sel); border-radius:50%; pointer-events:auto; touch-action:none}
.sel .h.rot{border-radius:50%; background:var(--sel)}
.sel .rotline{position:absolute; left:50%; top:-28px; height:28px; border-left:1.5px solid var(--sel)}
.guide{position:absolute; background:#ff4fa3; pointer-events:none}

/* bottom toolbars */
.tools{display:flex; gap:.25rem; overflow-x:auto; padding:.4rem .5rem max(.5rem,env(safe-area-inset-bottom)); justify-content:safe center; scrollbar-width:none; position:relative; z-index:5}
.tools::-webkit-scrollbar{display:none}
.tool{flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:58px; padding:.35rem .3rem; border:0; background:none; border-radius:12px; cursor:pointer; font-size:.68rem; color:var(--ink)}
.tool:hover{background:var(--panel)}
.tool svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tool .emo{font-size:20px; line-height:22px}
.tool.danger{color:var(--danger)}
.tools.ctx{background:rgba(0,0,0,.25)}

/* sheets & dialogs */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:flex-end; justify-content:center; animation:fade .15s}
.scrim.center{align-items:center; padding:1rem}
.sheet{background:var(--panel2); width:min(640px,100%); max-height:80dvh; overflow:auto; border-radius:18px 18px 0 0; padding:1rem 1rem max(1rem,env(safe-area-inset-bottom)); box-shadow:0 -10px 30px rgba(0,0,0,.4); animation:up .2s ease-out}
.dialog{background:var(--panel2); width:min(420px,100%); max-height:90dvh; overflow:auto; border-radius:16px; padding:1.2rem; box-shadow:0 20px 50px rgba(0,0,0,.5)}
.sheet h2,.dialog h2{margin:0 0 .8rem; font-size:1rem; font-weight:600}
.row{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.row.end{justify-content:flex-end; margin-top:1rem}
.field{display:block; margin:.6rem 0}
.field>span{display:block; font-size:.78rem; color:var(--muted); margin-bottom:.25rem}
input[type=text],input[type=date],textarea,select{width:100%; font:inherit; color:var(--ink); background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem}
textarea{min-height:6rem; resize:vertical}
input[type=range]{width:100%; accent-color:var(--brass)}
.seg{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.seg button{flex:1; background:none; border:0; padding:.45rem .8rem; cursor:pointer; font-size:.85rem}
.seg button.on{background:var(--brass); color:#1b1b1b; font-weight:600}
.menu{display:flex; flex-direction:column}
.menu button{background:none; border:0; text-align:left; padding:.8rem .4rem; font-size:.95rem; cursor:pointer; border-radius:8px; display:flex; align-items:center; gap:.7rem}
.menu button:hover{background:var(--panel)}
.menu button.danger{color:var(--danger)}
.menu .sub{font-size:.72rem; color:var(--muted)}
.swatches{display:flex; flex-wrap:wrap; gap:.45rem}
.sw{width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.25); cursor:pointer; padding:0}
.sw.on{outline:3px solid var(--brass); outline-offset:2px}
.sw.none{background:repeating-linear-gradient(45deg,#666 0 4px,#999 4px 8px)}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:.35rem .75rem; font-size:.8rem; cursor:pointer}
.chip.on{background:var(--brass); color:#1b1b1b; border-color:var(--brass)}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:.5rem}
.tile{aspect-ratio:1; border-radius:10px; border:2px solid transparent; cursor:pointer; padding:0; overflow:hidden; background:#333}
.tile.on{border-color:var(--brass)}
.tile canvas{width:100%; height:100%; display:block}
.emoji-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:.2rem}
.emoji-grid button{font-size:28px; background:none; border:0; padding:.3rem; cursor:pointer; border-radius:8px}
.emoji-grid button:hover{background:var(--panel)}
.pages-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.7rem}
.pthumb{position:relative; border:2px solid transparent; border-radius:6px; padding:0; background:none; cursor:pointer}
.pthumb.on{border-color:var(--brass)}
.pthumb canvas{width:100%; display:block; border-radius:4px}
.pthumb span{position:absolute; left:4px; top:4px; font-size:.65rem; background:rgba(0,0,0,.55); padding:1px 6px; border-radius:999px}

/* handwriting */
.hw{position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column}
.hw .area{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; touch-action:none}
.hw canvas{background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/20px 20px; touch-action:none; max-width:100%; max-height:100%}

#toast{position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:rgba(20,20,20,.9); color:#fff; padding:.55rem 1rem; border-radius:999px; font-size:.85rem; z-index:100; opacity:0; pointer-events:none; transition:opacity .25s; max-width:90vw; text-align:center}
#toast.on{opacity:1}
.busy{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.55); display:flex; flex-direction:column; gap:.8rem; align-items:center; justify-content:center; font-size:.9rem}
.busy progress{width:220px; accent-color:var(--brass)}
.hint{position:absolute; bottom:.9rem; left:50%; transform:translateX(-50%); font-size:.74rem; color:var(--muted); background:rgba(0,0,0,.35); padding:.3rem .7rem; border-radius:999px; pointer-events:none; transition:opacity .5s; white-space:nowrap}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px); opacity:0}}
@media (prefers-reduced-motion: reduce){ .scrim,.sheet{animation:none} .hint,#toast{transition:none} }