/* ═══════════════════════════════════
   MURMURES TCG — ui.css
   ═══════════════════════════════════ */

/* ── LOGO ── */
.logo-wrap   { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-emblem {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, #3a0810, #8a3820, #c9784c, #fde68a);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px rgba(201,168,76,.35), 0 2px 8px rgba(0,0,0,.5);
}
.logo-title { font-family:var(--font-script); font-size:20px; color:#fde68a; line-height:1; letter-spacing:.02em; }
.logo-sub   { font-family:var(--font-cinzel); font-size:7.5px; letter-spacing:.2em; color:rgba(201,168,76,.38); margin-top:1px; }

/* ── FILTERS ── */
.filter-row { display:flex; align-items:center; gap:3px; }
.filter-btn {
  padding:5px 11px; border-radius:6px; border:1px solid transparent;
  background:transparent; color:rgba(232,213,163,.3);
  font-family:var(--font-cinzel); font-size:8px; letter-spacing:.1em;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.filter-btn.active { border-color:currentColor; background:rgba(255,255,255,.05); }
.filter-btn:hover:not(.active) { color:rgba(232,213,163,.6); }

/* ── TOP ACTIONS ── */
.top-actions { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.card-count  { font-family:var(--font-cinzel); font-size:10px; letter-spacing:.1em; color:rgba(201,168,76,.33); }
.btn-create  {
  display:flex; align-items:center; gap:6px; padding:7px 16px;
  border:none; border-radius:8px;
  background:linear-gradient(135deg, #5a0a18, #c9784c);
  color:#fde8cc; font-family:var(--font-cinzel); font-size:10px;
  font-weight:700; letter-spacing:.12em; cursor:pointer;
  box-shadow:0 2px 14px rgba(180,80,40,.35); transition:all .2s;
}
.btn-create:hover  { box-shadow:0 4px 20px rgba(201,120,76,.45); transform:translateY(-1px); }
.btn-create:active { transform:scale(.97) translateY(0); }

/* ── SIDEBAR SHARED ── */
.sidebar-header { padding:14px 16px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sidebar-label  { font-family:var(--font-cinzel); font-size:7.5px; letter-spacing:.22em; color:rgba(201,168,76,.38); margin-bottom:2px; }
.sidebar-title  { font-family:var(--font-script); font-size:18px; color:#fde68a; }

/* ── CARD LIST ITEMS ── */
.card-item {
  display:flex; align-items:center; gap:9px; padding:9px;
  border-radius:8px; margin-bottom:2px; cursor:pointer;
  border:1px solid transparent; transition:all .2s;
}
.card-item:hover   { background:rgba(255,255,255,.035); }
.card-item.active  { background:rgba(201,168,76,.08); border-color:rgba(201,168,76,.2); }
.item-stripe       { width:3px; height:36px; border-radius:2px; flex-shrink:0; }
.item-thumb        { width:30px; height:42px; border-radius:3px; overflow:hidden; flex-shrink:0; border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.item-info         { flex:1; min-width:0; }
.item-name         { font-family:var(--font-cinzel); font-size:9px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:rgba(201,168,76,.6); margin-bottom:3px; }
.card-item.active .item-name { color:#fde68a; }
.item-meta         { display:flex; align-items:center; gap:5px; }
.item-rarity       { font-family:var(--font-cinzel); font-size:8px; opacity:.55; }
.item-num          { font-family:monospace; font-size:8px; color:rgba(255,255,255,.2); }

/* ── RIGHT SIDEBAR ── */
.rside-header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.rside-mode  { font-family:var(--font-cinzel); font-size:7.5px; letter-spacing:.2em; color:rgba(201,168,76,.38); margin-bottom:2px; }
.rside-title { font-family:var(--font-script); font-size:16px; color:#fde68a; max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-cancel  { padding:4px 10px; background:none; border:1px solid rgba(255,255,255,.1); border-radius:5px; color:rgba(255,255,255,.32); font-family:var(--font-cinzel); font-size:8px; letter-spacing:.08em; cursor:pointer; transition:all .2s; white-space:nowrap; flex-shrink:0; }
.btn-cancel:hover { border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.6); }

/* ── EDIT FORM ── */
.field-group  { margin-bottom:13px; }
.field-label  { font-family:var(--font-cinzel); font-size:7.5px; letter-spacing:.2em; color:rgba(201,168,76,.42); display:block; margin-bottom:5px; }
.grid-2       { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.char-count   { text-align:right; margin-top:3px; font-family:monospace; font-size:9px; color:rgba(255,255,255,.18); }

.rarity-grid  { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:5px; }
.rarity-opt   { padding:8px 10px; border-radius:7px; cursor:pointer; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); transition:all .2s; display:flex; flex-direction:column; gap:4px; }
.rarity-opt:hover   { border-color:rgba(255,255,255,.14); }
.rarity-opt-name    { font-family:var(--font-cinzel); font-size:9px; font-weight:700; letter-spacing:.07em; color:rgba(255,255,255,.32); }
.rarity-opt.sel .rarity-opt-name { color:inherit; }
.rarity-bar   { height:2.5px; border-radius:2px; margin-bottom:14px; transition:background .3s; }

.section-box  { background:rgba(255,255,255,.025); border:1px solid rgba(201,168,76,.12); border-radius:8px; padding:11px 11px; margin-bottom:8px; }
.section-hdr  { font-family:var(--font-cinzel); font-size:7px; letter-spacing:.18em; color:rgba(201,168,76,.38); margin-bottom:7px; }

.quick-grid   { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.quick-btn    { aspect-ratio:1; border-radius:5px; overflow:hidden; border:1.5px solid rgba(255,255,255,.07); padding:0; cursor:pointer; position:relative; transition:border-color .2s; background:none; }
.quick-btn:hover { border-color:rgba(201,168,76,.4); }
.quick-btn img    { width:100%; height:100%; object-fit:cover; display:block; }
.quick-btn.sel    { border-color:#c9a84c; }
.quick-check      { position:absolute; inset:0; background:rgba(201,168,76,.28); display:flex; align-items:center; justify-content:center; font-size:14px; color:#fde68a; }

/* ── BUTTONS ── */
.btn-sm     { padding:5px 13px; border-radius:5px; font-family:var(--font-cinzel); font-size:8.5px; letter-spacing:.1em; cursor:pointer; transition:all .2s; }
.btn-ghost  { background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.2); color:#c9a84c; }
.btn-ghost:hover { background:rgba(201,168,76,.14); }
.btn-export {
  background:linear-gradient(135deg, rgba(90,10,24,.9), rgba(180,100,60,.9));
  border:none; color:#fde8cc; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.btn-export:hover { box-shadow:0 2px 14px rgba(180,80,40,.4); }

.btn-save {
  width:100%; padding:13px; border-radius:9px; border:none;
  font-family:var(--font-cinzel); font-size:11px; font-weight:700; letter-spacing:.15em;
  cursor:pointer; transition:all .3s;
}
.btn-save.ready { background:linear-gradient(135deg,#5a0a18,#c9784c,#c9a84c); background-size:200% 100%; color:#fde8cc; box-shadow:0 4px 20px rgba(180,80,40,.32); }
.btn-save.ready:hover { background-position:100% 0; }
.btn-save.done  { background:linear-gradient(135deg,#065f46,#10b981); color:#ecfdf5; animation:savedPop .4s ease; }
.btn-save.off   { background:rgba(255,255,255,.05); color:rgba(255,255,255,.18); cursor:not-allowed; }
.btn-delete     { width:100%; margin-top:10px; padding:8px; background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15); border-radius:7px; color:rgba(239,68,68,.5); font-family:var(--font-cinzel); font-size:8.5px; letter-spacing:.12em; cursor:pointer; transition:all .2s; }
.btn-delete:hover { background:rgba(239,68,68,.12); color:rgba(239,68,68,.8); }

/* ── VIEW PANEL ── */
.rarity-banner { border-radius:10px; padding:13px 15px; margin-bottom:14px; text-align:center; border:1px solid rgba(255,255,255,.07); }
.rarity-banner-name { font-family:var(--font-script); font-size:24px; margin-bottom:5px; }
.rarity-banner-sub  { font-family:var(--font-cinzel); font-size:9px; letter-spacing:.1em; margin-top:5px; opacity:.45; }
.prop-block   { margin-bottom:12px; }
.prop-lbl     { font-family:var(--font-cinzel); font-size:7.5px; letter-spacing:.2em; color:rgba(201,168,76,.38); margin-bottom:3px; }
.prop-val     { font-family:var(--font-body); font-size:14px; color:#e8d5a3; }
.prop-quote   { font-family:var(--font-body); font-style:italic; font-size:13px; line-height:1.7; color:rgba(232,213,163,.8); background:rgba(201,168,76,.04); border:1px solid rgba(201,168,76,.1); border-radius:6px; padding:10px 12px; }

/* ── META BAR ── */
.meta-dot     { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.meta-label   { font-family:var(--font-cinzel); font-size:8.5px; letter-spacing:.14em; color:rgba(201,168,76,.42); }
.meta-actions { display:flex; gap:8px; margin-left:auto; }

/* ── STRIP ── */
.strip-label { font-family:var(--font-cinzel); font-size:7.5px; letter-spacing:.2em; color:rgba(201,168,76,.2); writing-mode:vertical-lr; text-orientation:mixed; transform:rotate(180deg); flex-shrink:0; }