/* CarmenOne – style.css – Ignite theme */
@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --gold:   #e6a117;
  --gold-d: #A87227;
  --gold-l: #fdf5e4;
  --red:    #c0392b;
  --red-d:  #96281b;
  --red-l:  #fdecea;
  --green:  #1A7A3A;
  --bg:     #EEEDE8;
  --bg2:    #ffffff;
  --bg3:    #E0DDD8;
  --border: #D9DCDF;
  --text:   #373B41;
  --text2:  #7C7D7F;
  --text3:  #AEADAB;
  --dark:   #373B41;
  --font:   'Calibri','Segoe UI',sans-serif;
  --serif:  'Lusitana',serif;
  --header-h: 52px;
  --footer-h: 36px;
}

body{font-family:var(--font);font-size:14.5pt;color:var(--text);background:var(--bg);height:100vh;overflow:hidden;}

/* ── LOGIN ─────────────────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;background:var(--bg) center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;
}
.login-card{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.45);
  border-top:3px solid var(--gold);
  border-radius:16px;
  padding:28px 40px;
  width:min(500px,92vw);
}
.login-inner{display:flex;align-items:center;gap:36px;}
.login-logo{width:200px;flex-shrink:0;display:block;}
.login-form-side{flex:1;min-width:0;}
.login-field{
  width:100%;border:1px solid var(--border);
  padding:9px 13px;font-size:13.3pt;font-family:var(--font);color:var(--text);
  background:rgba(255,255,255,0.75);margin-bottom:10px;outline:none;transition:border-color .15s;
  border-radius:6px;
}
.login-field:focus{border-color:var(--gold);}
.login-btn{
  width:100%;background:var(--gold);color:var(--dark);border:none;
  padding:10px;font-size:13.3pt;font-family:var(--font);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .15s;
  border-radius:6px;
}
.login-btn:hover{background:var(--gold-d);color:#fff;}
.login-error{color:var(--red);font-size:12.1pt;margin-top:10px;min-height:16px;}
.login-page-footer{
  position:fixed;bottom:0;left:0;right:0;
  text-align:center;padding:8px 16px;
  font-size:10.9pt;color:rgba(255,255,255,0.85);
  background:rgba(0,0,0,0.38);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  letter-spacing:.04em;
}

/* ── APP SHELL ─────────────────────────────────────────────── */
#app{display:none;height:100vh;flex-direction:column;}
#app.visible{display:flex;}

/* ── HEADER / TOP NAV ──────────────────────────────────────── */
header{
  height:var(--header-h);
  background:var(--dark);
  border-bottom:3px solid var(--gold);
  display:flex;align-items:stretch;
  flex-shrink:0;
}
.header-logo{
  display:flex;align-items:center;padding:0 20px;
  border-right:1px solid #4a4f56;cursor:pointer;text-decoration:none;
  font-family:var(--serif);font-size:21.8px;color:#fff;white-space:nowrap;flex-shrink:0;
}
.header-logo span{color:var(--gold);}
.header-logo:hover{opacity:.85;}

/* hide the old logo img */
/*.header-logo img{display:none;} */

.header-nav{display:flex;align-items:stretch;flex:1;overflow:hidden;}
.nav-item{
  display:flex;align-items:center;gap:0;padding:0 14px;
  font-size:13px;font-family:var(--serif);letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:#D9DCDF;cursor:pointer;border-right:1px solid #4a4f56;
  transition:background .1s,color .1s;user-select:none;white-space:nowrap;
}
.nav-item .nav-icon-img{display:none;}
.nav-item:hover{background:#2d3138;color:#fff;}
.nav-item.active{background:var(--gold);color:var(--dark);}

.header-right{
  margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 16px;
  border-left:1px solid #4a4f56;
}
.logout-btn{
  background:none;border:1px solid #4a4f56;
  padding:5px 14px;font-size:12.1px;font-family:var(--font);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-radius:6px;
  color:#D9DCDF;cursor:pointer;transition:all .15s;
}
.logout-btn:hover{border-color:var(--gold);color:var(--gold);}
.version-btn{
  background:none;border:1px solid #4a4f56;
  padding:5px 12px;font-size:12.1px;font-family:var(--font);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:#D9DCDF;cursor:pointer;transition:all .15s;
}
.version-btn:hover{border-color:var(--gold);color:var(--gold);}
.fc-typhoon-season{background:none;border:1px solid #4a4f56;padding:5px 12px;border-radius:6px;color:#D9DCDF;cursor:default;font-size:13pt;line-height:1;transition:all .15s;filter:grayscale(1) opacity(0.6);}
.fc-typhoon-season:hover{border-color:var(--gold);filter:grayscale(1) opacity(0.9);}
.fc-typhoon-season--active{border-color:#4a7a5a;filter:grayscale(0) opacity(0.75);}
.fc-typhoon-season--active:hover{border-color:#6ab880;filter:grayscale(0) opacity(1);}

/* ── BODY / MAIN ───────────────────────────────────────────── */
.app-body{display:flex;flex:1;overflow:hidden;}
aside{display:none;}
main{flex:1;overflow-y:auto;padding:26px 30px;background:var(--bg);}

/* ── FOOTER ────────────────────────────────────────────────── */
footer{
  height:var(--footer-h);
  background:var(--dark);
  border-top:3px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:10.9pt;color:#7C7D7F;letter-spacing:.06em;flex-shrink:0;
}
footer span{color:var(--gold);}

/* ── PAGE TITLE ─────────────────────────────────────────────── */
.page-title{
  font-family:var(--serif);font-size:24.2px;font-weight:400;
  color:var(--text);margin-bottom:20px;
  border-bottom:2px solid var(--dark);padding-bottom:10px;
}
.placeholder-page{color:var(--text2);font-size:13.3pt;padding:16px 0;}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{
  background:var(--gold);color:#fff;border:none;
  padding:8px 16px;font-size:12.8pt;font-family:var(--font);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .15s;
  border-radius:8px;
}
.btn:hover{background:var(--gold-d);color:#fff;}
.btn-danger{background:var(--red)!important;color:#fff!important;}
.btn-danger:hover{background:var(--red-d)!important;}

/* ── INPUTS ────────────────────────────────────────────────── */
.tt-input{
  border:1px solid var(--border);padding:7px 10px;
  font-size:12.8pt;font-family:var(--font);color:var(--text);
  background:var(--bg2);outline:none;transition:border-color .12s;
}
.tt-input:focus{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:-1px;}

/* ── CARDS ──────────────────────────────────────────────────── */
.admin-section-title{
  font-family:var(--serif);font-size:18.2px;font-weight:400;
  color:var(--text);margin-bottom:16px;
  border-bottom:2px solid var(--dark);padding-bottom:8px;
}

/* ── SINGLE-ROW HEADER TABLES ───────────────────────────────── */
table.steps-tt thead tr:first-child th,
table.steps-tt thead tr:last-child th{position:static;top:auto;z-index:auto;}

/* ── STEPS TRACKER ──────────────────────────────────────────── */
.steps-bar-wrap{width:100%;height:10px;background:var(--bg3);overflow:hidden;}
.steps-bar-fill{height:100%;transition:width .4s ease,background .4s ease;}

/* ── SUMMARY TABLE ──────────────────────────────────────────── */
table.summary-table{border-collapse:collapse;width:auto;min-width:600px;font-size:12.8pt;}
table.summary-table th{
  text-align:center;padding:8px 28px;font-size:12.1pt;font-weight:700;
  color:var(--text2);border-bottom:2px solid var(--dark);
  background:var(--bg2);white-space:nowrap;letter-spacing:.05em;text-transform:uppercase;
}
table.summary-table th:first-child{text-align:left;}
table.summary-table td{
  padding:11px 28px;text-align:center;
  border-bottom:1px solid var(--border);background:var(--bg2);
}
table.summary-table td:first-child{text-align:left;font-weight:600;}
table.summary-table tbody tr:hover td{background:var(--bg);}

/* ── TIME TRACKER ───────────────────────────────────────────── */
.tt-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;border-bottom:2px solid var(--dark);padding-bottom:10px;}
.tt-toolbar .page-title{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.tt-wrapper{overflow-x:auto;}
table.tt thead tr:first-child th{position:sticky;top:0;z-index:11;background:var(--bg2)!important;}
table.tt thead tr:last-child th{position:sticky;top:34px;z-index:10;background:var(--bg2)!important;border-bottom:1px solid var(--border);}
table.tt thead tr:first-child th[rowspan]{border-bottom:1px solid var(--border);background:var(--bg2)!important;}
table.tt{border-collapse:collapse;width:100%;min-width:1120px;font-size:12.1pt;border:none;}
table.tt th{
  background:var(--bg2);border:none;
  padding:6px 7px;font-weight:700;font-size:10.9pt;
  color:var(--text2);white-space:nowrap;text-align:center;
  letter-spacing:.05em;text-transform:uppercase;
}
table.tt thead tr:first-child th:first-child{vertical-align:bottom;}
table.tt td{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  border-left:1px solid var(--border);border-right:none;
  padding:4px 5px;vertical-align:middle;background:var(--bg2);
}
table.tt tbody tr:first-child td{border-top:15px solid var(--bg);}
table.tt td:first-child{border-left:none;}
table.tt td:last-child{border-right:none;}

.time-wrap{display:flex;align-items:center;gap:4px;}
.clock-btn{
  background:none;border:none;cursor:pointer;color:var(--text3);
  font-size:16.9px;line-height:1;padding:0 2px;transition:color .12s;
}
.clock-btn:hover{color:var(--gold);}
.time-input{flex:1;min-width:0;width:0;text-align:center;}

.loc-wrap{position:relative;display:flex;align-items:center;gap:4px;}
.loc-pill{
  display:inline-block;padding:3px 10px;
  font-size:11.6pt;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:opacity .12s;user-select:none;
}
.loc-pill:hover{opacity:.8;}
.loc-pill-empty{
  background:var(--bg);color:var(--text3);
  border:1px dashed var(--border);font-weight:400;
}
.loc-clear{
  font-size:12.1px;font-weight:700;color:var(--text3);cursor:pointer;
  padding:1px 4px;line-height:1;transition:all .12s;
}
.loc-clear:hover{background:var(--red-l);color:var(--red);}
.loc-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;z-index:200;
  background:var(--bg2);border:1px solid var(--border);
  border-top:2px solid var(--gold);
  display:none;padding:6px;
  flex-direction:column;gap:5px;min-width:110px;
}
.loc-dropdown.open{display:flex;}
.loc-option{
  padding:4px 12px;cursor:pointer;font-size:11.6pt;font-weight:700;
  transition:background .1s;
}
.loc-option:hover{background:var(--bg);}

.cb-wrap{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;}
.cb-wrap input[type=checkbox]{width:14px;height:14px;accent-color:var(--gold);cursor:pointer;}
.cb-label{font-size:11.6pt;color:var(--text2);}

.computed{background:var(--bg2);text-align:center;font-weight:700;color:var(--text);font-size:12.1pt;min-width:58px;}
.ot-pos{color:#1A7A3A;}
.ot-neg{color:var(--red);}
.ot-zero{color:var(--text3);}

.notes-input{min-width:120px;max-width:180px;}
.date-cell{white-space:nowrap;font-weight:700;font-size:11.6pt;color:var(--text);text-align:center;min-width:120px;background:var(--bg2);}
.date-display{cursor:pointer;padding:2px 4px;border:1px solid transparent;transition:border-color .12s;}
.date-display:hover{border-color:var(--border);}
.date-input{font-weight:700;font-size:11.6pt;text-align:center;background:var(--bg2);padding:3px 4px;}
.date-input:focus{border-color:var(--gold);}

/* ── ADMIN ──────────────────────────────────────────────────── */
.admin-section{max-width:400px;margin-bottom:28px;}
.admin-label{display:block;font-size:12.8pt;color:var(--text2);margin-bottom:7px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10.9pt;}
.admin-row{display:flex;gap:10px;align-items:center;}
.admin-input{width:110px;}
.admin-msg{font-size:12.1pt;color:var(--green);margin-top:8px;margin-bottom:0;min-height:16px;}

.del-btn{
  background:none;border:none;color:var(--red);cursor:pointer;
  font-size:15.7px;font-weight:700;padding:3px 7px;transition:background .12s;
}
.del-btn:hover{background:var(--red-l);}

.version-btn{
  background:var(--gold-l);color:var(--gold-d);border:1px solid var(--gold);
  padding:5px 12px;font-size:12.1px;font-weight:700;border-radius:6px;
  font-family:var(--font);cursor:pointer;transition:all .15s;letter-spacing:.04em;text-transform:uppercase;
}
.version-btn:hover{background:var(--gold);color:var(--dark);}

/* ── VERSION HISTORY ────────────────────────────────────────── */
.version-form-card{
  background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);
  border-radius:16px;padding:20px 24px;margin-bottom:28px;
}
.vf-row{display:flex;gap:20px;align-items:flex-start;}
.vf-field{display:flex;flex-direction:column;gap:6px;}
.vf-label{font-size:10.9pt;color:var(--text2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.vf-notes{resize:vertical;min-height:100px;font-family:var(--font);}
select.tt-input{cursor:pointer;}

.version-entry{border:1px solid var(--border);border-radius:16px;padding:18px 22px;margin-bottom:12px;background:var(--bg2);}
.version-latest{border-top:3px solid var(--gold);}
.version-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.version-number{font-family:var(--serif);font-size:19.4px;font-weight:700;color:var(--text);}
.version-date{font-size:12.1pt;color:var(--text3);margin-left:auto;}
.version-notes{font-size:12.8pt;color:var(--text2);line-height:1.6;white-space:pre-wrap;}
.badge-minor{background:var(--gold-l);color:var(--gold-d);padding:2px 10px;font-size:10.9pt;font-weight:700;border:1px solid var(--gold);}
.badge-major{background:var(--red-l);color:var(--red);padding:2px 10px;font-size:10.9pt;font-weight:700;border:1px solid var(--red);}
.badge-bug{background:var(--bg3);color:var(--text2);padding:2px 10px;font-size:10.9pt;font-weight:700;border:1px solid var(--border);}
.badge-latest{background:var(--gold);color:var(--dark);padding:2px 10px;font-size:10.9pt;font-weight:700;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:999;}
.modal-box{background:var(--bg2);border-top:3px solid var(--gold);border-radius:16px;overflow:hidden;padding:32px 36px;width:320px;text-align:center;}
.modal-box h3{font-family:var(--serif);font-size:19.4px;font-weight:400;margin-bottom:8px;color:var(--text);}
.modal-box p{font-size:12.8pt;color:var(--text2);margin-bottom:24px;line-height:1.5;}
.modal-actions{display:flex;gap:10px;justify-content:center;}
.modal-cancel{
  background:none;border:1px solid var(--border);padding:8px 20px;
  font-size:12.8pt;font-family:var(--font);color:var(--text2);cursor:pointer;transition:all .12s;
}
.modal-cancel:hover{border-color:var(--text2);color:var(--text);}
.modal-confirm{
  background:var(--red);color:#fff;border:none;padding:8px 20px;
  font-size:12.8pt;font-family:var(--font);cursor:pointer;transition:background .12s;
}
.modal-confirm:hover{background:var(--red-d);}

/* ── SPINNER ────────────────────────────────────────────────── */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── VACATION PLANNER ────────────────────────────────────────── */
.vac-year-wrap{position:relative;}
.vac-year-btn{
  background:var(--gold-l);color:var(--gold-d);border:1px solid var(--gold);
  padding:5px 14px;font-size:12.1pt;font-weight:700;border-radius:6px;
  font-family:var(--font);cursor:pointer;transition:all .15s;letter-spacing:.04em;text-transform:uppercase;
}
.vac-year-btn:hover{background:var(--gold);color:var(--dark);}
.vac-year-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;z-index:300;
  background:var(--bg2);border:1px solid var(--border);border-top:2px solid var(--gold);
  display:none;flex-direction:column;max-height:260px;overflow-y:auto;min-width:90px;padding:5px;
}
.vac-year-dropdown.open{display:flex;}
.vac-year-option{padding:5px 14px;cursor:pointer;font-size:12.1pt;font-weight:700;color:var(--text2);transition:background .1s;text-align:center;}
.vac-year-option:hover{background:var(--bg);}
.vac-year-option.active{background:var(--gold-l);color:var(--gold-d);}

.vac-cal-wrap{overflow-x:auto;margin-bottom:20px;background:#fff;padding:16px;display:inline-block;border-top:3px solid var(--gold);border-radius:16px;}
table.vac-cal{border-collapse:collapse;font-size:10.9pt;table-layout:fixed;}
.vac-month-head{width:108px;}
.vac-day-head{width:34px;min-width:34px;max-width:34px;text-align:center;font-weight:700;font-size:10.9pt;color:#000;padding:5px 0 4px;border-bottom:1px solid var(--border);white-space:nowrap;}
.vac-month-label{font-size:12.1pt;font-weight:700;color:#000;padding:2px 14px 2px 0;white-space:nowrap;border-right:1px solid var(--border);vertical-align:middle;}
.vac-cell{width:34px;min-width:34px;max-width:34px;height:26px;border:1px solid var(--border);text-align:center;vertical-align:middle;cursor:pointer;transition:filter .1s;padding:0;}
.vac-cell:hover{filter:brightness(.93);}
.vac-weekend{background:var(--bg);cursor:pointer;}
.vac-invalid{background:var(--bg3);cursor:default;border-color:var(--bg3);}
.vac-invalid:hover{filter:none;}
.vac-today{outline:2px solid #e00;outline-offset:-2px;}
.vac-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:0;line-height:1;}
.vac-wknd-label{font-size:10.3pt;color:#000;font-weight:700;line-height:1;}
.vac-val-badge{font-size:10.9pt;font-weight:700;line-height:1;color:#000;}
.vac-picker{background:var(--bg2);border:1px solid var(--border);border-top:2px solid var(--gold);z-index:500;padding:5px;min-width:170px;display:flex;flex-direction:column;gap:3px;}
.vac-picker-clear{padding:5px 12px;cursor:pointer;font-size:11.6pt;color:var(--text3);transition:background .1s;}
.vac-picker-clear:hover{background:var(--red-l);color:var(--red);}
.vac-picker-option{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;font-size:11.6pt;transition:opacity .1s;}
.vac-picker-option strong{min-width:20px;font-size:11.6pt;}
.vac-picker-option span{font-size:10.9pt;opacity:.85;}
.vac-picker-option:hover{background:var(--bg);}
.vac-picker-option.selected{outline:2px solid var(--gold);}
.vac-summary{display:flex;flex-direction:column;gap:18px;}
.vac-legend{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;}
.vac-legend-item{display:flex;align-items:center;gap:7px;}
.vac-legend-pill{display:inline-block;padding:2px 9px;font-size:10.9pt;font-weight:700;white-space:nowrap;}
.vac-legend-name{font-size:11.6pt;color:var(--text2);}
.vac-legend-cnt{font-size:11.6pt;font-weight:700;color:var(--text);min-width:24px;text-align:right;}
.vac-stats-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;}
.vac-stat-card{display:flex;flex-direction:column;gap:5px;background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:12px 18px;min-width:140px;}
.vac-stat-label{font-size:10.9pt;color:var(--text2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.vac-stat-value{font-family:var(--serif);font-size:26.6px;font-weight:700;color:var(--text);line-height:1;}
.vac-stat-input{width:90px;font-size:16.9px;font-weight:700;padding:4px 8px;}
.vac-result-card .vac-stat-label{color:var(--gold-d);}
.vac-main-layout{display:flex;align-items:flex-start;gap:20px;}
.vac-cal-col{display:flex;flex-direction:column;width:max-content;}
.vac-holidays-panel{flex:1;min-width:180px;background:#fff;border-top:3px solid #CCE5FF;border:1px solid #CCE5FF;border-top-width:3px;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:0;}
.vac-hol-title{display:flex;align-items:center;gap:8px;font-size:10.9pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text2);margin-bottom:10px;}
.vac-hol-row{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid var(--border);}
.vac-hol-row:last-child{border-bottom:none;}
.vac-hol-date{font-size:10.3pt;font-weight:700;color:var(--text3);min-width:40px;flex-shrink:0;}
.vac-hol-name{font-size:10.9pt;color:var(--text);line-height:1.3;}

/* ── HINT PANEL ─────────────────────────────────────────────── */
.hint-btn{background:#CCE5FF;border:none;border-radius:6px;padding:3px 9px;font-size:13pt;font-weight:700;line-height:1;color:#fff;cursor:pointer;margin-left:auto;opacity:.9;transition:opacity .15s;}
.hint-btn:hover{opacity:1;}
.hint-panel{position:fixed;z-index:8000;width:340px;background:#fff;border:1px solid #CCE5FF;border-top:3px solid #CCE5FF;border-radius:12px;padding:14px 18px;font-size:12.1pt;color:var(--text2);line-height:1.6;box-shadow:0 8px 24px rgba(0,0,0,.13);}
.hint-panel-hidden{display:none;}
.hint-panel p{margin:0 0 8px;}
.hint-panel p:last-child{margin-bottom:0;}
.hint-panel ul{margin:0 0 8px;padding-left:20px;}
.hint-panel li{margin-bottom:3px;}
.hint-panel strong{color:var(--text);font-weight:700;}
.hint-panel-loading,.hint-panel-empty{color:var(--text3);font-style:italic;}

/* ── TOAST ──────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  padding:11px 20px;font-size:12.8pt;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s,transform .25s;
  pointer-events:none;max-width:360px;
}
.toast.visible{opacity:1;transform:translateY(0);}
.toast-error{background:var(--red);color:#fff;}
.toast-success{background:var(--green);color:#fff;}

/* ── MODAL (generic) ──────────────────────────────────────── */
.modal{background:var(--bg2);border-top:3px solid var(--gold);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;max-height:90vh;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-title{font-size:14.5pt;font-weight:700;color:var(--text);}
.modal-close{background:none;border:none;font-size:20pt;line-height:1;cursor:pointer;color:var(--text3);padding:0 4px;transition:color .15s;}
.modal-close:hover{color:var(--text);}
.modal-body{padding:20px;overflow-y:auto;flex:1;}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;}

/* ── FORM ELEMENTS (generic) ─────────────────────────────── */
.form-row{display:flex;flex-direction:column;gap:5px;}
.form-label{font-size:11pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.form-input{width:100%;border:1px solid var(--border);padding:8px 11px;font-size:13.3pt;font-family:var(--font);color:var(--text);background:var(--bg2);outline:none;transition:border-color .15s;resize:vertical;}
.form-input:focus{border-color:var(--gold);}

/* ── BTN VARIANTS ─────────────────────────────────────────── */
.btn-secondary{background:var(--bg2);border:1px solid var(--border);color:var(--text2);}
.btn-secondary:hover{border-color:var(--gold);color:var(--text);}

/* ── COST TRACKER ─────────────────────────────────────────── */
.cost-toolbar{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--dark);margin-bottom:18px;}
.cost-toolbar .page-title{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.cost-view-btn.active{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--dark)!important;}

.cost-month-nav{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.cost-month-arrow{background:none;border:1px solid var(--border);width:30px;height:30px;font-size:20pt;cursor:pointer;color:var(--text2);line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;}
.cost-month-arrow:hover{border-color:var(--gold);color:var(--gold);}
.cost-month-label{font-size:14.5pt;font-weight:700;color:var(--text);min-width:160px;}

.cost-accounts-row{display:flex;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.cost-acc-card{flex:1;min-width:200px;padding:16px 20px;border:1px solid var(--border);border-top:3px solid var(--border);background:var(--bg2);cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.cost-acc-card:hover{border-color:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.cost-acc-card.active{border-top-color:var(--gold);border-color:var(--gold);}
.cost-acc-name{font-size:12.1pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.cost-acc-currency{font-size:10.9pt;color:var(--text3);margin-bottom:8px;}
.cost-acc-total{font-size:22pt;font-weight:700;color:var(--text);margin-bottom:4px;}
.cost-acc-count{font-size:10.9pt;color:var(--text3);}

.cost-entries-wrap{overflow-y:auto;padding-bottom:24px;}
.cost-empty{color:var(--text3);font-size:13.3pt;padding:20px 0;font-style:italic;}

.cost-table{width:100%;border-collapse:collapse;font-size:13.3pt;}
.cost-table thead th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--border);font-size:11pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.cost-table tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
.cost-table tbody tr:hover{background:var(--bg);}
.cost-table td{padding:8px 10px;color:var(--text);vertical-align:middle;}
.cost-th-amount{text-align:right!important;}
.cost-th-icon{text-align:center!important;width:36px;}
.cost-td-date{white-space:nowrap;color:var(--text2);font-size:12.1pt;}
.cost-td-amount{text-align:right;font-weight:700;white-space:nowrap;}
.cost-td-acc{font-size:12.1pt;color:var(--text2);}
.cost-td-actions{white-space:nowrap;text-align:right;width:90px;}

.cost-cat-badge{display:inline-block;font-size:10.9pt;font-weight:700;padding:2px 8px;border-radius:3px;white-space:nowrap;}
.cost-cat-none{color:var(--text3);border:1px solid var(--border);background:transparent;}
.cost-icon-recur{font-size:15pt;color:var(--gold);cursor:default;}
.cost-icon-doc{font-size:13pt;cursor:pointer;opacity:.8;transition:opacity .15s;}
.cost-icon-doc:hover{opacity:1;}
.cost-action-btn{background:none;border:1px solid var(--border);padding:3px 10px;font-size:11pt;font-family:var(--font);cursor:pointer;color:var(--text2);transition:all .15s;margin-left:4px;}
.cost-action-btn:hover{border-color:var(--gold);color:var(--text);}
.cost-del-btn:hover{border-color:var(--red);color:var(--red);}
.cost-currency-badge{display:inline-block;font-size:10.9pt;font-weight:700;padding:1px 6px;background:var(--bg);border:1px solid var(--border);color:var(--text2);border-radius:2px;}

.cost-doc-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);}
.cost-doc-link{flex:1;color:var(--text);text-decoration:none;font-size:12.1pt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cost-doc-link:hover{color:var(--gold);}
.cost-doc-del-btn{background:none;border:none;cursor:pointer;color:var(--text3);font-size:13pt;padding:0 4px;line-height:1;transition:color .15s;flex-shrink:0;}
.cost-doc-del-btn:hover{color:var(--red);}
.cost-no-docs{color:var(--text3);font-size:12.1pt;font-style:italic;}

/* Yearly view */
.cost-yr-table{margin-bottom:28px;}
.cost-yr-month{font-size:13.3pt;color:var(--text2);white-space:nowrap;}
.cost-yr-amount{text-align:right;font-size:13.3pt;white-space:nowrap;}
.cost-yr-amount.has-value{color:var(--text);font-weight:600;}
.cost-yr-total-row td{font-weight:700;font-size:13.3pt;border-top:2px solid var(--dark);padding-top:10px;color:var(--text);}
.cost-yr-cats-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;padding-bottom:24px;}
.cost-yr-cat-panel{border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 20px;background:var(--bg2);}
.cost-yr-cat-title{font-size:13.3pt;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.cost-yr-cat-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--border);}
.cost-yr-cat-row:last-child{border-bottom:none;}
.cost-yr-bar-wrap{flex:1;background:var(--bg);height:8px;border-radius:4px;overflow:hidden;}
.cost-yr-bar{height:100%;border-radius:4px;transition:width .4s ease;}
.cost-yr-cat-amount{font-size:12.1pt;font-weight:700;color:var(--text);white-space:nowrap;min-width:80px;text-align:right;}



/* ── CARMENGO ─────────────────────────────────────────────── */
.cg-toolbar{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--dark);margin-bottom:18px;}
.cg-toolbar .page-title{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.cg-nav-btn.active{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--dark)!important;}
.cg-loading{color:var(--text3);font-size:13.3pt;font-style:italic;padding:20px 0;}

/* Dashboard stat cards */
.cg-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;}
.cg-stat-card{background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.cg-stat-icon{font-size:20pt;line-height:1;}
.cg-stat-value{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--text);line-height:1.1;}
.cg-stat-label{font-size:10.9pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.cg-stat-sub{font-size:10.9pt;color:var(--text3);}
.cg-streak-countdown{font-size:10.5pt;color:var(--gold);margin-top:4px;}

/* Level distribution */
.cg-level-panel{background:var(--bg2);border:1px solid var(--border);padding:16px 20px;margin-bottom:24px;}
.cg-level-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
.cg-level-title{font-size:12.1pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.cg-level-acc{font-size:12.1pt;color:var(--text2);}
.cg-level-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;margin-bottom:10px;}
.cg-level-seg{height:100%;min-width:4px;transition:flex .4s;}
.cg-level-legend{display:flex;flex-wrap:wrap;gap:8px 18px;}
.cg-level-lbl{display:flex;align-items:center;gap:5px;font-size:11pt;color:var(--text2);}
.cg-level-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* Start button */
.cg-start-row{display:flex;align-items:center;gap:20px;}
.cg-start-btn{font-size:14.5pt;padding:12px 28px;}
.cg-hint{font-size:11pt;color:var(--text3);}

/* Empty session */
.cg-empty-session{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 0;text-align:center;}
.cg-empty-title{font-size:19.4pt;font-weight:700;color:var(--text);}
.cg-empty-sub{font-size:13.3pt;color:var(--text2);max-width:400px;}

/* Session */
.cg-session{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:560px;margin:0 auto;padding-top:8px;}
.cg-session-meta{display:flex;align-items:center;justify-content:space-between;width:100%;}
.cg-progress-txt{font-size:12.1pt;color:var(--text3);}
.cg-session-pts{font-size:13.3pt;font-weight:700;color:var(--text);}
.cg-progress-bar-wrap{width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.cg-progress-bar{height:100%;background:var(--gold);transition:width .4s;}

/* Flashcard */
.cg-card-container{width:100%;height:220px;perspective:1000px;cursor:pointer;}
.cg-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .45s ease;}
.cg-card.flipped{transform:rotateY(180deg);}
.cg-card-front,.cg-card-back{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);
  padding:24px;
}
.cg-card-back{transform:rotateY(180deg);}
.cg-card.cg-flash-correct{background:#e6f4ea!important;}
.cg-card.cg-flash-wrong  {background:#fdecea!important;}
.cg-word-jp{font-size:36pt;font-weight:700;color:var(--text);text-align:center;}
.cg-word-en{font-size:28pt;font-weight:700;color:var(--text);text-align:center;}
.cg-word-jp-small{font-size:14.5pt;color:var(--text3);text-align:center;}
.cg-flip-hint{font-size:11pt;color:var(--text3);font-style:italic;}

/* Timer */
.cg-timer-row{display:flex;align-items:center;gap:12px;width:100%;}
.cg-timer-bar-wrap{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.cg-timer-bar{height:100%;background:var(--gold);width:100%;transition:width 1s linear;}
.cg-timer-txt{font-size:12.1pt;font-weight:700;color:var(--text2);min-width:20px;text-align:right;}

/* Answer buttons */
.cg-answer-row{display:flex;gap:16px;width:100%;transition:opacity .25s;}
.cg-ans-btn{flex:1;padding:12px;font-size:14.5pt;font-family:var(--font);font-weight:700;cursor:pointer;border:2px solid var(--border);background:var(--bg2);color:var(--text);transition:all .15s;}
.cg-correct-btn:hover{background:#e6f4ea;border-color:var(--green);color:var(--green);}
.cg-wrong-btn:hover{background:var(--red-l);border-color:var(--red);color:var(--red);}
.cg-quit-btn{align-self:flex-end;font-size:11pt;}

/* Summary */
.cg-summary{display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 0;max-width:560px;margin:0 auto;text-align:center;}
.cg-summary-icon{font-size:48pt;line-height:1;}
.cg-summary-title{font-family:var(--serif);font-size:24.2px;color:var(--text);}
.cg-summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;}
.cg-sum-item{display:flex;flex-direction:column;gap:4px;background:var(--bg2);border:1px solid var(--border);padding:14px;}
.cg-sum-val{font-size:22pt;font-weight:700;color:var(--text);}
.cg-sum-lbl{font-size:10.9pt;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.cg-sum-correct .cg-sum-val{color:var(--green);}
.cg-sum-wrong .cg-sum-val{color:var(--red);}
.cg-streak-badge{background:var(--gold-l);border:1px solid var(--gold);color:var(--gold-d);padding:8px 20px;font-size:13.3pt;font-weight:700;}

/* Words management */
.cg-words-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.cg-words-filters{display:flex;gap:6px;flex-wrap:wrap;}
.cg-lvl-btn.active{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--dark)!important;}
.cg-words-table{margin-bottom:12px;}
.cg-level-badge{display:inline-block;font-size:10.9pt;font-weight:700;padding:2px 8px;border-radius:3px;white-space:nowrap;}
.cg-badge-new{display:inline-block;font-size:10.9pt;font-weight:700;padding:2px 8px;background:var(--bg);border:1px solid var(--border);color:var(--text3);border-radius:3px;}
.cg-pagination{display:flex;align-items:center;gap:12px;padding:8px 0;}

/* ── Sentences ──────────────────────────────────────────────────────────────── */
.cg-sentence-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding-top:8px;}
.cg-sentence-card{perspective:900px;cursor:pointer;height:160px;}
.cg-sentence-card .cg-sentence-front,
.cg-sentence-card .cg-sentence-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:6px;transition:transform .4s ease;}
.cg-sentence-card{position:relative;transform-style:preserve-3d;}
.cg-sentence-card.flipped .cg-sentence-front{transform:rotateY(180deg);}
.cg-sentence-card .cg-sentence-back{transform:rotateY(180deg);}
.cg-sentence-card.flipped .cg-sentence-back{transform:rotateY(0deg);}
/* ── Points stat card (wide, merged) + mini bar chart ───────────────────────── */
.cg-stat-card-wide{grid-column:span 2;flex-direction:column;gap:12px;}
.cg-bar-chart{display:flex;align-items:flex-end;gap:4px;width:100%;}
.cg-bar-chart-mini{height:44px;}
.cg-bar-col{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;gap:2px;height:100%;}
.cg-bar-value{font-size:9.7pt;color:var(--text3);min-height:16px;line-height:1;}
.cg-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--border);border-radius:2px 2px 0 0;overflow:hidden;}
.cg-bar-fill{width:100%;background:var(--gold);border-radius:2px 2px 0 0;transition:height .4s ease;min-height:2px;}
.cg-bar-label{font-size:8.5pt;color:var(--text3);white-space:nowrap;}
.cg-bar-tooltip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--text);color:#fff;font-size:8pt;padding:2px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:10;}
.cg-bar-col:hover .cg-bar-tooltip{display:block;}

.cg-lesson-block{margin-bottom:24px;}
.cg-lesson-header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg2);border:1px solid var(--border);border-left:4px solid var(--border);}
.cg-lesson-unlocked{border-left-color:var(--green);}
.cg-lesson-title{font-size:13.3pt;font-weight:700;color:var(--text);flex:1;}
.cg-lesson-badge{font-size:11pt;font-weight:700;padding:2px 10px;border-radius:3px;}
.cg-lesson-badge.unlocked{background:#e6f4ea;color:var(--green);}
.cg-lesson-badge.locked{background:var(--bg);color:var(--text3);border:1px solid var(--border);}
.cg-lesson-progress-bar{height:4px;background:var(--border);border-radius:0 0 2px 2px;overflow:hidden;}
.cg-lesson-progress-fill{height:100%;background:var(--gold);transition:width .4s;}
.cg-ls-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px;}
.cg-ls-tile{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 8px 8px;text-align:center;cursor:default;transition:box-shadow .15s,transform .15s;}
.cg-ls-unlocked{border-top:3px solid var(--green);cursor:pointer;}
.cg-ls-unlocked:hover,.cg-ls-unlocked.active{box-shadow:0 4px 14px rgba(0,0,0,.10);transform:translateY(-2px);}
.cg-ls-unlocked.active{border-color:var(--green);background:var(--bg3);}
.cg-ls-locked{border-top:3px solid var(--border);opacity:.75;}
.cg-ls-num{font-size:9.3pt;color:var(--text3);margin-bottom:4px;}
.cg-ls-check{font-size:14.5pt;color:var(--green);font-weight:700;line-height:1.2;}
.cg-ls-count{font-size:9pt;color:var(--text3);margin-top:2px;}
.cg-ls-pct{font-size:12.1pt;font-weight:700;color:var(--text2);line-height:1.2;}
.cg-ls-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:5px;}
.cg-ls-bar-fill{height:100%;background:var(--gold);transition:width .4s;}
.cg-ls-detail-header{display:flex;align-items:baseline;gap:12px;padding:12px 0 10px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.cg-sentence-jp{font-size:15.4pt;font-weight:700;color:var(--text);line-height:1.4;}
.cg-sentence-kana{font-size:12.1pt;color:var(--text2);}
.cg-sentence-hint{font-size:10.9pt;color:var(--text3);font-style:italic;margin-top:4px;}
.cg-sentence-en{font-size:14.5pt;font-weight:700;color:var(--text);line-height:1.4;}
.cg-sentence-jp-small{font-size:11pt;color:var(--text3);}
.cg-quiz-card{border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:16px;background:var(--bg2);padding:36px 32px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:180px;justify-content:center;width:100%;}
.cg-quiz-kana{font-size:52pt;line-height:1;color:var(--text);}
.cg-quiz-chars{font-size:18pt;color:var(--text2);}
.cg-quiz-meaning{font-size:12.1pt;color:var(--text3);margin-top:4px;}
.cg-quiz-input-row{display:flex;gap:10px;align-items:center;}
.cg-quiz-input{font-size:16.9px;padding:10px 14px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);width:240px;outline:none;font-family:var(--font);}
.cg-quiz-input:focus{border-color:var(--gold);}
.cg-quiz-submit-btn{padding:10px 20px;}
.cg-quiz-feedback{min-height:22px;font-size:12.1pt;text-align:center;}
.cg-quiz-retry{color:var(--gold-d);font-weight:700;}
.cg-quiz-answer{color:var(--text2);}
.cg-quiz-flash-correct{animation:cg-quiz-green .7s ease;}
.cg-quiz-flash-wrong{animation:cg-quiz-red .7s ease;}
.cg-quiz-shake{animation:cg-quiz-shake .5s ease;}
@keyframes cg-quiz-green{0%,100%{background:var(--bg2);}50%{background:#d4edda;}}
@keyframes cg-quiz-red{0%,100%{background:var(--bg2);}50%{background:#fdecea;}}
@keyframes cg-quiz-shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-8px);}40%,80%{transform:translateX(8px);}}

/* ── SLATE ─────────────────────────────────────────────────── */
.slate-toolbar{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--dark);margin-bottom:24px;}
.slate-loading{color:var(--text3);font-size:13.3pt;font-style:italic;padding:20px 0;}
.slate-empty{color:var(--text2);font-size:13.3pt;padding:40px 0;text-align:center;}

/* Project card grid */
.slate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;align-items:start;}
.slate-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s;}
.slate-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);}
.slate-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.slate-card-title{font-family:var(--serif);font-size:18.2px;font-weight:700;color:var(--text);line-height:1.2;}
.slate-card-subtitle{font-size:11.5pt;color:var(--text2);margin-top:3px;}
.slate-card-stats{font-size:11.5pt;color:var(--text2);}
.slate-card-start{font-size:11pt;color:var(--text3);}
.slate-card-actions{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;}

/* Status badges */
.slate-status-badge{font-size:10.9pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
.slate-status-development{background:var(--bg3);color:var(--text2);}
.slate-status-active{background:#e6f4ea;color:#1A7A3A;}
.slate-status-completed{background:var(--gold-l);color:var(--gold-d);}

/* Modal fields */
.slate-field{margin-bottom:14px;}
.slate-label{display:block;font-size:11.5pt;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}

/* Project detail header */
.slate-detail-header{display:flex;align-items:center;gap:16px;padding:14px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:16px;}
.slate-back-btn{flex-shrink:0;}
.slate-detail-title-wrap{flex:1;min-width:0;}
.slate-detail-title{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slate-detail-subtitle{font-size:11.5pt;color:var(--text2);margin-top:2px;}
.slate-error{color:var(--red);padding:32px;font-size:13.3pt;}

/* Sub-tab bar */
.slate-tab-bar{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:24px;}
.slate-tab{background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:8px 18px;font-size:12.5pt;font-weight:700;color:var(--text2);cursor:pointer;transition:color .15s,border-color .15s;border-radius:0;}
.slate-tab:hover{color:var(--text);}
.slate-tab--active{color:var(--gold);border-bottom-color:var(--gold);}
.slate-tab-placeholder{color:var(--text3);font-size:13.3pt;font-style:italic;padding:40px 0;}

/* Settings tab */
.slate-settings-wrap{max-width:480px;}
.slate-settings-section{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:20px 24px;margin-bottom:20px;}
.slate-settings-title{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--text);margin-bottom:16px;}
.slate-settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--border);}
.slate-settings-row:last-child{border-bottom:none;}
.slate-settings-label{font-size:12.5pt;color:var(--text);}
.slate-settings-hint{font-size:10.5pt;color:var(--text3);font-weight:400;}
.slate-settings-input{width:80px;text-align:center;}
.slate-settings-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;}
.slate-settings-status{font-size:12pt;}
.slate-seasons-table{width:100%;border-collapse:collapse;margin-top:12px;}
.slate-seasons-table th{text-align:left;font-size:10.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:6px 10px;border-bottom:2px solid var(--border);}
.slate-seasons-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.slate-seasons-table tr:last-child td{border-bottom:none;}
.slate-season-num{font-weight:700;font-size:12.5pt;color:var(--text);}

/* Episodes tab */
.slate-ep-toolbar{display:flex;gap:10px;margin-bottom:24px;}
.slate-season-block{background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:16px;overflow:hidden;}
.slate-season-header{display:flex;align-items:center;gap:12px;padding:13px 18px;cursor:pointer;transition:background .15s;}
.slate-season-header:hover{background:var(--bg3);}
.slate-season-label{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--text);flex:1;}
.slate-season-meta{font-size:11pt;color:var(--text3);}
.slate-episode-list{border-top:1px solid var(--border);padding:6px 0;}
.slate-episode-row{display:flex;align-items:center;gap:14px;padding:9px 18px 9px 28px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border);}
.slate-episode-row:last-child{border-bottom:none;}
.slate-episode-row:hover{background:var(--bg3);}
.slate-ep-num{font-weight:700;font-size:11.5pt;color:var(--text2);width:40px;flex-shrink:0;}
.slate-ep-title{flex:1;font-size:12.5pt;color:var(--text);}
.slate-ep-notitle{color:var(--text3);font-style:italic;}
.slate-ep-date{font-size:11.5pt;color:var(--text2);}
.slate-ep-nodate{color:var(--text3);font-style:italic;}
.slate-ep-runtime{font-size:11pt;color:var(--text3);}
.slate-ep-finale{font-size:10pt;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--gold);color:#fff;padding:2px 8px;border-radius:10px;}
.slate-ep-empty{padding:12px 18px;color:var(--text3);font-style:italic;font-size:11.5pt;}

/* Phase badges */
.slate-phase-initial{font-size:10.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--gold);color:#fff;padding:2px 8px;border-radius:10px;}
.slate-phase-pre{font-size:11.5pt;color:var(--text2);}
.slate-phase-name{font-weight:700;font-size:12.5pt;color:var(--text);}
.slate-phase-hint{font-size:11pt;color:var(--text3);margin-top:12px;font-style:italic;}

/* People roster */
.slate-people-table{width:100%;border-collapse:collapse;}
.slate-people-table th{text-align:left;font-size:10.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:6px 12px;border-bottom:2px solid var(--border);}
.slate-people-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.slate-people-table tr:last-child td{border-bottom:none;}
.slate-person-name{font-weight:700;color:var(--text);font-size:12.5pt;}
.slate-person-notes{color:var(--text2);font-size:11.5pt;}
.slate-person-actions{text-align:right;white-space:nowrap;display:flex;gap:6px;justify-content:flex-end;}
.btn-sm{padding:4px 12px;font-size:11pt;}

/* Color swatches */
.slate-color-row{display:flex;gap:8px;flex-wrap:wrap;}
.slate-color-swatch{width:28px;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s;}
.slate-color-swatch:hover{transform:scale(1.15);}
.slate-color-swatch.active{border-color:var(--dark);transform:scale(1.15);}
/* Crew tab */
.slate-crew-toolbar{display:flex;justify-content:flex-end;margin-bottom:16px;}
.slate-crew-section{margin-bottom:20px;}
.slate-crew-section-label{font-family:var(--serif);font-size:13.5pt;font-weight:700;color:var(--text);padding:6px 0;border-bottom:2px solid var(--border);margin-bottom:6px;}
.slate-crew-ep-block{margin-left:18px;margin-bottom:10px;}
.slate-crew-ep-label{font-size:11.5pt;font-weight:700;color:var(--text2);padding:4px 0;border-bottom:1px solid var(--border);margin-bottom:4px;}
.slate-crew-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--border);}
.slate-crew-row:last-child{border-bottom:none;}
.slate-crew-person{font-weight:700;font-size:12.5pt;color:var(--text);flex:0 0 200px;}
.slate-crew-role{flex:1;font-size:12pt;color:var(--text2);}
.slate-tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11pt;font-weight:600;white-space:nowrap;}
.slate-tag-main{background:#fff3cd;color:#856404;}
.slate-tag-supporting{background:#d1ecf1;color:#0c5460;}
.slate-tag-recurring{background:#e2d9f3;color:#4a2d82;}
.slate-tag-guest{background:#e8e8e8;color:#555;}
/* Crew Roles view */
.slate-dept-block{border:1px solid var(--border);border-radius:10px;margin-bottom:16px;overflow:hidden;}
.slate-dept-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg2);}
.slate-dept-name{font-family:var(--serif);font-size:14.5pt;font-weight:700;color:var(--text);flex:1;}
.slate-dept-actions{display:flex;gap:6px;align-items:center;}
.slate-roles-rows{padding:6px 0;}
.slate-roles-empty{padding:10px 20px;color:var(--text3);font-style:italic;font-size:11.5pt;}
.slate-role-row{display:flex;align-items:center;gap:12px;padding:9px 20px;border-bottom:1px solid var(--border);}
.slate-role-row:last-child{border-bottom:none;}
.slate-role-title{flex:1;font-size:12.5pt;color:var(--text);}
.slate-role-actions{display:flex;gap:6px;}