:root{
  --blue:#1D4FD9; --teal:#06B5D4;
  --grad:linear-gradient(135deg,#1D4FD9,#06B5D4);
  --ink:#0b1530; --body:#3a4661; --muted:#5e6a82;
  --bg:#f4f8fd; --panel:#fff; --line:#e4ecf6;
  --shadow:0 18px 50px -24px rgba(13,38,95,.35);
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}  /* beat author display rules below */
html,body{height:100%;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--body); background:var(--bg); display:flex; flex-direction:column; min-height:100vh;
}
code{background:rgba(29,79,217,.10); color:var(--blue); padding:1px 6px; border-radius:6px; font-size:.9em;}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.muted{color:var(--muted);}

/* topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; background:var(--panel); border-bottom:1px solid var(--line);}
.brand{display:flex; align-items:center; gap:12px;}
.brand .mark{width:34px; height:34px; border-radius:9px; background:var(--grad); flex:none;}
.brand .title{font-weight:800; color:var(--ink); font-size:1.15rem; letter-spacing:-.02em;}
.brand .sub{font-size:.85rem; color:var(--muted);}
.privacy{font-size:.82rem; font-weight:600; color:#0a7d54; background:#e9f8f0; border:1px solid #bce8d4; border-radius:999px; padding:6px 12px;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:11px 20px; border-radius:999px; font-weight:650; font-size:.95rem; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 10px 20px -10px rgba(29,79,217,.6);}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:#c9d8ee;}
.btn:disabled{opacity:.5; cursor:default;}

/* opener / dropzone */
.opener{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px;}
.dropzone{width:100%; max-width:620px; border:2px dashed #bcd0ee; border-radius:20px; background:var(--panel); padding:48px 28px; text-align:center; transition:border-color .15s ease, background .15s ease;}
.dropzone.drag{border-color:var(--blue); background:#eef3fd;}
.dz-icon{font-size:2.6rem;}
.dz-inner h2{color:var(--ink); margin:.4em 0 .2em;}
.dz-inner p{margin:.3em 0; color:var(--muted);}
.dz-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:16px 0 4px;}
.dz-note{font-size:.82rem;}
.status{margin-top:16px; font-size:.9rem; min-height:1.2em;}
.status.err{color:#c0392b;}

/* workspace */
.workspace{flex:1; display:flex; flex-direction:column; padding:16px 22px; gap:14px; min-height:0;}
.summary{display:flex; flex-wrap:wrap; gap:10px 22px; padding:14px 18px; background:var(--panel); border:1px solid var(--line); border-radius:14px;}
.summary .s{display:flex; flex-direction:column;}
.summary .s b{font-size:1.3rem; color:var(--ink); line-height:1;}
.summary .s span{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
.summary .fname{margin-left:auto; align-self:center; font-weight:600; color:var(--ink); max-width:40ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.panes{flex:1; display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.3fr) minmax(260px,1.4fr); gap:14px; min-height:0;}
.pane{background:var(--panel); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; min-height:0; overflow:hidden;}
.pane-head{padding:10px 14px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); font-size:.95rem; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.head-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.mini{font:inherit; font-size:.78rem; font-weight:650; padding:4px 10px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;}
.mini:hover:not(:disabled){border-color:#c9d8ee;}
.mini:disabled{opacity:.45; cursor:default;}
.mini.danger{color:#c0392b; border-color:#f3c6cd;}

/* card selection toolbar */
.cardtools{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 14px; border-bottom:1px solid var(--line); background:var(--bg); font-size:.82rem;}
.cardtools .grow,.foot .grow{flex:1;}
.cardtools .ck{display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--body);}
.cardtools .selcount{color:var(--muted); font-weight:600;}
.cardtools .movewrap{display:inline-flex; align-items:center; gap:6px; color:var(--muted);}
.cardtools select{font:inherit; font-size:.82rem; padding:4px 6px; border:1px solid var(--line); border-radius:7px; background:#fff; max-width:170px;}
.card-list li{display:flex; align-items:center; gap:8px;}
.card-list li .rowck{flex:none;}
.card-list li .cbody{flex:1; min-width:0; cursor:pointer; display:flex; align-items:center; gap:8px;}

/* deck rows: checkbox + body (+ inline rename input) */
.deck-list li{display:flex; align-items:center; gap:8px;}
.deck-list li .deckck{flex:none;}
.deck-list li .dbody{flex:1; min-width:0; cursor:pointer;}
.deck-list li.editing,.card-list li.editing{cursor:default; background:none;}

/* inline rename inputs (decks + cards) */
.dname-input,.cname-input{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:5px 8px; font:inherit; font-size:.9rem; color:var(--ink); background:#fff;}
.dname-input:focus,.cname-input:focus{outline:2px solid var(--blue); outline-offset:-1px;}
.card-list li.editing .mini{flex:none; padding:2px 8px;}
.card-list li.editing .ord{flex:none; float:none; min-width:1.9em; text-align:right;}

.dirty{color:#b9690f; font-size:.82rem; font-weight:650;}

.deck-list,.card-list{list-style:none; margin:0; padding:8px; overflow:auto;}
.deck-list li,.card-list li{padding:9px 12px; border-radius:9px; cursor:pointer; font-size:.92rem; color:var(--body);}
.deck-list li:hover,.card-list li:hover{background:var(--bg);}
.deck-list li.active,.card-list li.active{background:rgba(29,79,217,.10); color:var(--ink); font-weight:600;}
.deck-list .count,.card-list .ord{float:right; color:var(--muted); font-size:.8rem; font-weight:600;}
.deck-list .depth1{padding-left:26px;} .deck-list .depth2{padding-left:40px;} .deck-list .depth3{padding-left:54px;}
.card-list .cprev{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.card-detail{padding:16px; overflow:auto;}
.card-detail .field{margin-bottom:14px;}
.card-detail .field .fname{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:4px;}
.card-detail .field .fval{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--ink); white-space:pre-wrap; word-break:break-word; font-size:.95rem;}
.card-detail ol.choices{margin:0; padding:0; list-style:none; counter-reset:ch;}
.card-detail ol.choices li{counter-increment:ch; position:relative; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 12px 8px 36px; margin-bottom:6px; color:var(--ink); font-size:.95rem;}
.card-detail ol.choices li::before{content:counter(ch,upper-alpha); position:absolute; left:13px; top:8px; font-weight:700; color:var(--muted);}
.card-detail ol.choices li.correct{border-color:#bce8d4; background:#eafaf2; color:#0a7d36; font-weight:600;}
.card-detail ol.choices li.correct::after{content:" ✓"; font-weight:700;}
.card-detail ol.choices li.correct::before{color:#0a7d36;}
.card-detail .meta{font-size:.8rem; color:var(--muted); margin-top:6px;}

/* card editor */
.editform .efield{margin-bottom:14px;}
.editform .efield .fname{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:5px;}
.editform textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:inherit; font-size:.92rem; color:var(--ink); resize:vertical; background:#fff;}
.mcrows{display:flex; flex-direction:column; gap:6px;}
.mcrow{display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:6px 8px;}
.mcrow.correct{border-color:#bce8d4; background:#eafaf2;}
.mcrow .let{font-weight:800; color:var(--muted); width:18px; text-align:center; flex:none;}
.mcrow.correct .let{color:#0a7d36;}
.mcrow input[type=text]{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; font-size:.9rem; background:#fff;}
.mcrow .mini{padding:2px 8px;}
.mcrow .radlbl{display:inline-flex; align-items:center; gap:3px; font-size:.76rem; color:var(--body); white-space:nowrap; cursor:pointer;}
.fieldnote{font-size:.78rem; color:var(--muted); margin-top:6px; line-height:1.4;}
.fieldnote.warn{color:#b9690f;}
.editbar{display:flex; gap:10px; margin:4px 0 14px;}
.editbar .btn{padding:9px 18px; font-size:.92rem;}

/* WYSIWYG rich field */
.rtbar{display:flex; gap:4px; margin-bottom:5px;}
.rtbtn{font:inherit; font-size:.82rem; min-width:28px; height:26px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; color:var(--ink); padding:0 6px; line-height:1;}
.rtbtn:hover{border-color:#c9d8ee; background:var(--bg);}
.rtbar .rtbtn:last-child{font-size:.72rem; color:var(--muted); font-weight:600;}
.rt{min-height:42px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:.95rem; color:var(--ink); background:#fff; line-height:1.5;}
.rt:focus{outline:2px solid var(--blue); outline-offset:-1px;}
.rt img{max-width:100%; height:auto; border-radius:6px; display:inline-block; margin:2px 0;}
.rt:empty::before{content:"(empty)"; color:var(--muted);}
.rtbtn.rawtoggle{font-size:.72rem; color:var(--muted); font-weight:700;}
.rawhtml{display:none; width:100%; min-height:84px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; color:var(--ink); resize:vertical; background:#fff;}
.efield.rawmode .rt{display:none;}
.efield.rawmode .fmt{display:none;}
.efield.rawmode .rawhtml{display:block;}

/* toast — transient confirmation, visible in any view */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,10px); z-index:50; pointer-events:none;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:.9rem; font-weight:650;
  box-shadow:0 12px 30px -10px rgba(13,38,95,.5); opacity:0; transition:opacity .2s ease, transform .2s ease; max-width:80vw;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.toast.err{background:#c0392b;}

/* footer */
.foot{display:flex; align-items:center; gap:14px; padding:12px 22px; border-top:1px solid var(--line); background:var(--panel);}
.foot-note{font-size:.82rem; color:var(--muted);}

@media (max-width:900px){
  .panes{grid-template-columns:1fr; grid-auto-rows:minmax(180px,auto);}
}