@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-vietnamese-400.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-vietnamese-500.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-vietnamese-600.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-vietnamese-700.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-vietnamese-800.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-normal-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --bg:#1c1c1c; --panel:#232323; --panel-2:#2a2a2a; --panel-3:#1f1f1f;
  --border:rgba(255,255,255,0.08); --border-soft:rgba(255,255,255,0.05);
  --text:#ffffff; --text-soft:rgba(255,255,255,0.62); --text-faint:rgba(255,255,255,0.38);
  --accent:#00ffcc; --accent-soft:rgba(0,255,204,0.12);
  --orange:#ff6b35; --orange-soft:rgba(255,107,53,0.14);
  --purple:#ac00ff; --purple-soft:rgba(172,0,255,0.14);
  --danger:#ff5555; --danger-soft:rgba(255,85,85,0.14);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Be Vietnam Pro',sans-serif;position:relative;}
body::before{content:'';position:fixed;inset:0;background:url('/assets/img/watermark.png') no-repeat center 30%;background-size:min(820px, 80vw);opacity:0.05;pointer-events:none;z-index:0;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:#fff;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
h1,h2,h3{font-family:'Be Vietnam Pro',sans-serif;margin:0;}

.app{display:flex;min-height:100vh;position:relative;z-index:1;}
.sidebar{width:224px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:22px 16px;gap:26px;position:sticky;top:0;height:100vh;}
.brand{padding:0 6px;}
.brand .name{font-family:'Be Vietnam Pro',sans-serif;font-weight:900;font-size:15px;line-height:1.25;}
.brand-logo{display:block;width:100%;max-width:184px;height:auto;margin:0 auto;}
.brand .sub{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:10px;letter-spacing:0.18em;color:var(--accent);margin-top:6px;text-align:center;}
.nav{display:flex;flex-direction:column;gap:2px;}
.navlink{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:7px;color:var(--text-soft);font-size:13.5px;font-weight:500;}
.navlink:hover{color:#fff;background:rgba(255,255,255,0.04);}
.navlink.active{background:var(--accent-soft);color:var(--accent);}
.navlink svg{flex-shrink:0;}
.sidebar-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 6px;border-top:1px solid var(--border-soft);}
.av{width:30px;height:30px;border-radius:100px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:12px;flex-shrink:0;}

.main{flex:1;min-width:0;}
.topbar-mobile{display:none;}

.page{padding:26px 32px 60px;max-width:1180px;margin:0 auto;}

.lang-switch{display:flex;align-items:center;gap:4px;}
.lang-btn{background:transparent;border:1px solid var(--border);color:var(--text-faint);font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:0.04em;border-radius:100px;padding:4px 9px;cursor:pointer;}
.lang-btn.active{background:var(--accent-soft);color:var(--accent);border-color:transparent;}
.lang-btn:hover{color:#fff;}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.page-head h1{font-weight:800;font-size:22px;}
.page-sub{font-size:13px;color:var(--text-soft);margin-top:5px;}
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-faint);margin-bottom:6px;}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Be Vietnam Pro',sans-serif;font-weight:600;font-size:13.5px;border-radius:7px;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;}
.btn-primary{background:var(--accent);color:#0f1512;padding:10px 18px;}
.btn-primary:hover{filter:brightness(1.08);color:#0f1512;}
.btn-ghost{background:transparent;color:var(--text-soft);border-color:var(--border);padding:10px 16px;}
.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,0.2);}
.btn-danger{background:transparent;color:var(--danger);border-color:rgba(255,85,85,0.35);padding:10px 16px;}
.btn-sm{padding:6px 12px;font-size:12px;}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;}
.pill-type-single,.pill-type-ep,.pill-type-album{background:rgba(255,255,255,0.08);color:var(--text-soft);}

.status-select-wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.status-select-wrap label{margin:0;font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.06em;}
.status-select{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:13.5px;border-radius:100px;padding:10px 34px 10px 18px;border:1.5px solid var(--border);background-color:var(--panel);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;-webkit-appearance:none;appearance:none;}
.status-select.status-draft{color:var(--text-soft);border-color:var(--border);}
.status-select.status-ready{color:var(--orange);border-color:rgba(255,107,53,0.4);background-color:var(--orange-soft);}
.status-select.status-submitted{color:var(--purple);border-color:rgba(172,0,255,0.4);background-color:var(--purple-soft);}
.status-select.status-approved{color:var(--accent);border-color:var(--accent);background-color:var(--accent-soft);}
.status-select.status-distributed{color:#0f1512;border-color:var(--accent);background-color:var(--accent);}
.status-select-sm{font-size:11px;padding:6px 26px 6px 12px;background-position:right 9px center;background-size:11px;}
.inline-status-form{display:inline-block;}

.btn-danger-solid{background:var(--danger);color:#fff;border:none;padding:10px 18px;}
.btn-danger-solid:hover{filter:brightness(1.1);}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-overlay[hidden]{display:none;}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.modal-message{font-size:14px;color:var(--text);line-height:1.5;margin-bottom:20px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;}
.pill-status-draft{background:rgba(255,255,255,0.08);color:var(--text-faint);}
.pill-status-ready{background:var(--orange-soft);color:var(--orange);}
.pill-status-submitted{background:var(--purple-soft);color:var(--purple);}
.pill-status-approved{background:transparent;color:var(--accent);border:1px solid var(--accent);}
.pill-status-distributed{background:var(--accent);color:#0f1512;}

.card{background:var(--panel);border:1px solid var(--border);border-radius:11px;}
.sechead{font-weight:700;font-size:14px;}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:16px 18px;}
.kpi .label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.kpi .value{font-family:'Be Vietnam Pro',sans-serif;font-weight:800;font-size:26px;margin-top:8px;}

.filters{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.search-wrap{position:relative;flex:1;min-width:220px;max-width:340px;}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faint);}
.search-wrap input{padding-left:36px;}

input,select,textarea{font-family:'Be Vietnam Pro',sans-serif;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:9px 12px;font-size:13.5px;width:100%;}
input::placeholder,textarea::placeholder{color:var(--text-faint);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
label{display:block;font-size:11.5px;font-weight:600;color:var(--text-soft);margin-bottom:6px;}
.req::after{content:" *";color:var(--orange);}
.field{margin-bottom:0;}
.hint{font-size:11px;color:var(--text-faint);margin-top:5px;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cover-grid{grid-template-columns:200px 1fr;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;}
.stack{display:flex;flex-direction:column;gap:16px;}

.releases-table{width:100%;border-collapse:collapse;}
.releases-table th{text-align:left;font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.07em;font-weight:700;padding:14px 20px;border-bottom:1px solid var(--border);}
.releases-table td{padding:14px 20px;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
.releases-table tr:hover td{background:rgba(255,255,255,0.02);}
.releases-table tr:last-child td{border-bottom:none;}
.cover-thumb{width:52px;height:52px;border-radius:6px;object-fit:cover;background:linear-gradient(135deg,var(--accent),#0a3b32);display:block;}
.row-title{font-weight:700;font-size:14px;}
.row-sub{font-size:12px;color:var(--text-faint);margin-top:2px;}

.dropzone{border:1.5px dashed var(--border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-faint);text-align:center;padding:20px;cursor:pointer;transition:border-color .15s;}
.dropzone:hover{border-color:var(--accent);}
.dropzone input[type=file]{display:none;}
.dropzone .icon{color:var(--text-faint);}
.file-chip{display:flex;align-items:center;gap:14px;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:12px 16px;}
.file-chip .fname{flex:1;font-size:13px;font-weight:600;}
.file-chip .fmeta{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.file-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.tag-input{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:8px;}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--panel-3);border:1px solid var(--border);padding:6px 8px 6px 6px;border-radius:100px;font-size:12.5px;}
.tag .tag-av{width:20px;height:20px;border-radius:100px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;font-family:'Be Vietnam Pro',sans-serif;}
.tag button{background:none;border:none;color:var(--text-faint);cursor:pointer;padding:0;display:flex;}
.tag-input input{border:none;background:transparent;flex:1;min-width:140px;padding:6px;}

.track-card{border-bottom:1px solid var(--border-soft);}
.track-card:last-child{border-bottom:none;}
.track-head{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;}
.track-head .idx{width:22px;height:22px;border-radius:6px;background:var(--panel-3);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-faint);flex-shrink:0;}
.track-head .tname{font-weight:700;font-size:13.5px;flex:1;}
.track-body{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px;}
.track-body[hidden]{display:none;}
.chev{transition:transform .15s;color:var(--text-faint);}
.chev.open{transform:rotate(180deg);}

.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:16px;}
.alert-error{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(255,85,85,0.3);}
.alert-success{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(0,255,204,0.3);}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1;}
.login-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:32px;}

.checkbox-row{display:flex;align-items:center;gap:8px;}
.checkbox-row input{width:auto;}
.checkbox-row label{margin:0;}

@media (max-width: 900px){
  .sidebar{display:none;}
  .topbar-mobile{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border-soft);position:sticky;top:0;background:rgba(28,28,28,0.95);backdrop-filter:blur(8px);z-index:10;}
  .topbar-mobile .name{font-family:'Be Vietnam Pro',sans-serif;font-weight:900;font-size:13px;}
  .page{padding:18px 16px 48px;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .grid2,.grid3,.grid4{grid-template-columns:1fr;}
  .releases-table thead{display:none;}
  .releases-table, .releases-table tbody, .releases-table tr, .releases-table td{display:block;width:100%;}
  .releases-table tr{padding:14px 16px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .releases-table td{padding:0;border:none;}
  .page-head{flex-direction:column;align-items:flex-start;}
  .status-select-wrap{align-items:flex-start;}
}