@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --navy: #09122C;
  --navy-2: #1E305A;
  --gold: #E8B84B;
  --gold-dim: #c9922b;
  --teal: #0B7B82;
  --danger: #C1393A;

  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --border: #e1e5ed;
  --ink: #101828;
  --ink-muted: #5b6472;
  --ink-faint: #98a2b3;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.08);
  --shadow-lg: 0 8px 24px rgba(16,24,40,0.14);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; }
.hidden{ display:none !important; }
::selection{ background: var(--gold); color:#1a1200; }

/* ---------- TOP BAR ---------- */
.sm-topbar{
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color:#fff;
  padding: 14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  position: sticky; top:0; z-index:50;
  box-shadow: var(--shadow-lg);
}
.sm-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.sm-crest{
  width:38px; height:38px; border-radius:9px; background: rgba(232,184,75,0.15);
  border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center;
  font-weight:800; color: var(--gold); font-size:16px; flex-shrink:0;
}
.sm-brand-text{ min-width:0; }
.sm-brand-text h1{ font-size:20px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-brand-text p{ font-size:14px; color: var(--gold); font-weight:600; letter-spacing:0.3px; margin-top:1px; }
.sm-top-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.sm-top-link{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); color:#e9e9f2;
  font-size:12px; font-weight:600; padding:7px 13px; border-radius: var(--radius-sm); cursor:pointer;
  transition: all .15s;
}
.sm-top-link:hover{ background: var(--gold); border-color: var(--gold); color:#1a1200; }

/* ---------- SHELL ---------- */
.sm-shell{ max-width:1320px; margin:0 auto; padding: 22px 20px 60px; }

/* ---------- GATE ---------- */
.sm-gate-wrap{ min-height: calc(100vh - 70px); display:flex; align-items:center; justify-content:center; padding:24px; }
.sm-gate{
  width:100%; max-width:420px; background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding:40px 34px; text-align:center;
  border:1px solid var(--border);
}
.sm-gate .sm-gate-crest{
  width:60px; height:60px; margin:0 auto 20px; border-radius:16px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  display:flex; align-items:center; justify-content:center; color: var(--gold); font-weight:800; font-size:22px;
}
.sm-gate h2{ font-size:20px; font-weight:800; margin-bottom:8px; }
.sm-gate p{ color: var(--ink-muted); font-size:13.5px; line-height:1.6; margin-bottom:24px; }
.sm-code-input{
  width:100%; text-align:center; letter-spacing:4px; text-transform:uppercase;
  font-family:'JetBrains Mono', monospace; font-size:17px; font-weight:600;
  padding:14px; border-radius: var(--radius); border:1.5px solid var(--border); outline:none;
  margin-bottom:14px; transition:border-color .15s;
}
.sm-code-input:focus{ border-color: var(--gold); }
.sm-gate-error{ color: var(--danger); font-size:12.5px; margin-bottom:12px; min-height:16px; }

/* ---------- BUTTONS ---------- */
.btn{
  font-size:13.5px; font-weight:600; padding:10px 18px; border-radius: var(--radius-sm);
  cursor:pointer; border:1px solid transparent; transition: all .15s; letter-spacing:0.1px;
}
.btn-primary{ background: linear-gradient(135deg, var(--navy), var(--navy-2)); color:#fff; }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-gold{ background: var(--gold); color:#1a1200; }
.btn-gold:hover{ background: var(--gold-dim); }
.btn-ghost{ background:transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--navy-2); color: var(--navy-2); }
.btn-danger{ background:transparent; color: var(--danger); border-color: rgba(193,57,58,0.35); }
.btn-danger:hover{ background: rgba(193,57,58,0.08); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }
.btn-sm{ padding:6px 12px; font-size:12px; }
.btn-block{ width:100%; }

input[type=text], input[type=password], select{
  background: var(--surface); border:1.5px solid var(--border); color: var(--ink);
  padding:9px 13px; border-radius: var(--radius-sm); font-size:13.5px; outline:none;
  transition: border-color .15s; font-family:'Inter', sans-serif;
}
input:focus, select:focus{ border-color: var(--navy-2); }
input::placeholder{ color: var(--ink-faint); }

/* ---------- TOOLBAR / BREADCRUMB ---------- */
.sm-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.sm-toolbar .grow{ flex:1; min-width:180px; }
.sm-breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:13.5px; font-weight:500;
  color: var(--ink-muted); margin-bottom:16px;
}
.sm-breadcrumb .crumb{ cursor:pointer; padding:4px 8px; border-radius:6px; }
.sm-breadcrumb .crumb:hover{ background: var(--surface-2); color: var(--navy-2); }
.sm-breadcrumb .crumb.current{ color: var(--ink); font-weight:700; cursor:default; }
.sm-breadcrumb .crumb.current:hover{ background:none; }
.sm-breadcrumb .sep{ color: var(--ink-faint); }

.view-toggle{ display:flex; border:1.5px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; }
.view-toggle button{
  background: var(--surface); border:none; padding:8px 11px; cursor:pointer; color: var(--ink-muted);
  font-size:14px; line-height:1; transition: all .15s;
}
.view-toggle button.active{ background: var(--navy); color:#fff; }

/* ---------- EXPLORER: GRID VIEW ---------- */
.sm-explorer{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:20px; min-height:220px; }
.sm-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap:6px;
}
.tile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:14px 8px; border-radius: var(--radius-sm); cursor:pointer; user-select:none;
  border:1.5px solid transparent; transition: all .12s; position:relative;
}
.tile-dl-btn{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:7px;
  background: var(--surface); border:1px solid var(--border); color: var(--ink-muted);
  font-size:12px; cursor:pointer; opacity:0; transition: opacity .12s, background .12s, color .12s;
  display:flex; align-items:center; justify-content:center;
}
.tile:hover .tile-dl-btn{ opacity:1; }
.tile-dl-btn:hover{ background: var(--navy); color:#fff; border-color: var(--navy); }
.tile:hover{ background: var(--surface-2); }
.tile:active{ background:#e4e9f2; }
.tile .tile-icon{ width:56px; height:56px; position:relative; }
.tile .tile-icon svg{ width:100%; height:100%; display:block; }
.tile .file-ext-tag{
  position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  font-size:8.5px; font-weight:700; letter-spacing:0.3px; color:#fff; padding:1.5px 5px;
  border-radius:3px; text-transform:uppercase; white-space:nowrap;
}
.tile .tile-name{
  font-size:12.5px; font-weight:600; color: var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;
  max-width:100%;
}
.tile .tile-meta{ font-size:10.5px; color: var(--ink-faint); font-family:'JetBrains Mono',monospace; }

/* ---------- EXPLORER: LIST VIEW ---------- */
.sm-list{ display:flex; flex-direction:column; }
.list-head{
  display:grid; grid-template-columns: 32px 1fr 110px 140px; gap:14px; padding:8px 12px;
  font-size:10.5px; letter-spacing:0.6px; text-transform:uppercase; color: var(--ink-faint); font-weight:700;
  border-bottom:1px solid var(--border);
}
.list-row{
  display:grid; grid-template-columns: 32px 1fr 110px 140px; gap:14px; padding:11px 12px; align-items:center;
  border-bottom:1px solid var(--surface-2); cursor:pointer; border-radius:6px;
}
.list-row:hover{ background: var(--surface-2); }
.list-row .li-icon{ width:22px; height:22px; }
.list-row .li-icon svg{ width:100%; height:100%; }
.list-row .li-name{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-row .li-size, .list-row .li-date{ font-size:12px; color: var(--ink-muted); font-family:'JetBrains Mono',monospace; }

@media (max-width: 560px){
  .list-head{ display:none; }
  .list-row{ grid-template-columns: 26px 1fr 70px; }
  .list-row .li-date{ display:none; }
}

/* ---------- EMPTY / LOADING ---------- */
.sm-empty{ text-align:center; padding:60px 20px; color: var(--ink-muted); }
.sm-empty .icon{ font-size:30px; margin-bottom:12px; opacity:0.5; }
.sm-empty h3{ font-size:15.5px; font-weight:700; color: var(--ink); margin-bottom:5px; }
.sm-empty p{ font-size:12.5px; }
.sm-loading{ text-align:center; padding:50px 20px; color: var(--ink-faint); font-size:13px; }

/* ---------- ADMIN LAYOUT ---------- */
.admin-shell{ display:grid; grid-template-columns: 250px 1fr; gap:20px; align-items:start; }
.admin-sidebar{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:16px;
  position:sticky; top:78px;
}
.admin-sidebar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.admin-sidebar-head span{ font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color: var(--ink-faint); }
.admin-sidebar-head button{
  background: var(--surface-2); border:none; color: var(--navy-2); width:24px; height:24px; border-radius:6px;
  cursor:pointer; font-size:15px; line-height:1;
}
.tree-root{
  display:flex; align-items:center; gap:6px; padding:7px 8px; border-radius:6px; cursor:pointer;
  font-size:13.5px; font-weight:700; margin-bottom:4px;
}
.tree-root:hover, .tree-root.selected{ background: var(--surface-2); color: var(--navy-2); }
.tree{ font-size:13px; }
.tree-row{ display:flex; align-items:center; gap:5px; padding:6px 6px; border-radius:6px; cursor:pointer; }
.tree-row:hover{ background: var(--surface-2); }
.tree-row:hover .tree-actions{ opacity:1; }
.tree-row.selected{ background: var(--surface-2); color: var(--navy-2); font-weight:700; }
.tree-toggle{ width:12px; text-align:center; color: var(--ink-faint); font-size:10px; flex-shrink:0; }
.tree-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-actions{ display:flex; gap:2px; opacity:0; transition:opacity .12s; flex-shrink:0; }
.tree-actions button{ background:none; border:none; color: var(--ink-faint); cursor:pointer; font-size:11px; padding:2px 3px; }
.tree-actions button:hover{ color: var(--gold-dim); }
.tree-children{ padding-left:16px; }

.stat-bar{
  display:flex; align-items:center; gap:16px; background: var(--surface); border:1px solid var(--border);
  padding:12px 18px; border-radius: var(--radius); margin-bottom:18px; flex-wrap:wrap;
}
.stat-bar .stat{ font-size:12.5px; color: var(--ink-muted); }
.stat-bar .stat b{ color: var(--ink); font-weight:700; }

.subtabs{ display:flex; gap:20px; border-bottom:2px solid var(--border); margin-bottom:20px; }
.subtab{
  background:none; border:none; cursor:pointer; padding:0 0 10px; font-size:13px; font-weight:700;
  color: var(--ink-muted); border-bottom:2.5px solid transparent; margin-bottom:-2px; transition: all .15s;
}
.subtab.active{ color: var(--navy-2); border-bottom-color: var(--gold); }

.dropzone{
  border:2px dashed var(--border); background: var(--surface-2); border-radius: var(--radius);
  padding:34px 20px; text-align:center; cursor:pointer; transition: all .15s; margin-bottom:20px;
}
.dropzone.drag{ border-color: var(--gold); background: rgba(232,184,75,0.08); }
.dropzone .icon{ font-size:24px; margin-bottom:8px; }
.dropzone h3{ font-size:15px; font-weight:700; margin-bottom:4px; }
.dropzone p{ font-size:12px; color: var(--ink-muted); }
.dropzone input[type=file]{ display:none; }

.upload-queue{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.upload-row{
  display:flex; align-items:center; gap:12px; background: var(--surface); border:1px solid var(--border);
  padding:10px 14px; border-radius: var(--radius-sm);
}
.upload-row .u-name{ font-size:12.5px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-row .u-bar{ width:120px; height:5px; background: var(--surface-2); border-radius:3px; overflow:hidden; flex-shrink:0; }
.upload-row .u-bar-fill{ height:100%; background: var(--gold); width:0%; transition: width .2s ease; }
.upload-row .u-status{ font-size:11px; color: var(--ink-muted); width:80px; text-align:right; flex-shrink:0; }
.upload-row.err .u-status{ color: var(--danger); }
.upload-row.ok .u-bar-fill{ background: var(--teal); }

/* Codes table */
.codes-table{ border:1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow:hidden; }
.codes-head, .code-row{
  display:grid; grid-template-columns: 1fr 140px 90px 90px 140px; gap:12px; padding:11px 16px; align-items:center;
}
.codes-head{ font-size:10.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color: var(--ink-faint); border-bottom:1px solid var(--border); }
.code-row{ border-bottom:1px solid var(--surface-2); font-size:13px; }
.code-row:last-child{ border-bottom:none; }
.code-row .code-chip{ font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:0.5px; }
.code-row .code-status{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:12px; display:inline-block; }
.code-row .code-status.active{ background:rgba(11,123,130,0.12); color: var(--teal); }
.code-row .code-status.revoked{ background:rgba(193,57,58,0.1); color: var(--danger); }
@media (max-width:700px){
  .codes-head{ display:none; }
  .code-row{ grid-template-columns:1fr; gap:6px; }
}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(9,18,44,0.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{ background: var(--surface); border-radius: var(--radius); max-width:420px; width:100%; padding:24px; }
.modal h3{ font-size:16px; font-weight:700; margin-bottom:14px; }
.modal-list{ max-height:280px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; margin-bottom:16px; }
.modal-item{ padding:9px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--surface-2); }
.modal-item:last-child{ border-bottom:none; }
.modal-item:hover{ background: var(--surface-2); }
.modal-item.selected{ background: var(--surface-2); color: var(--navy-2); font-weight:700; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* ---------- TOAST ---------- */
#toasts{ position:fixed; bottom:20px; right:20px; z-index:300; display:flex; flex-direction:column; gap:8px; }
.toast{
  background: var(--navy); color:#fff; border-left:4px solid var(--gold);
  padding:12px 16px; font-size:12.5px; border-radius: var(--radius-sm); min-width:220px; max-width:320px;
  box-shadow: var(--shadow-lg); animation: toastIn .2s ease;
}
.toast.error{ border-left-color: var(--danger); }
.toast.success{ border-left-color: var(--teal); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px){
  .tile-dl-btn{ opacity:1; background: rgba(255,255,255,0.92); }
}
@media (max-width: 860px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-sidebar{ position:static; }
}
@media (max-width: 480px){
  .sm-shell{ padding:14px 12px 40px; }
  .sm-topbar{ padding:12px 14px; }
  .sm-brand-text h1{ font-size:14.5px; }
  .sm-grid{ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap:2px; }
  .tile .tile-icon{ width:46px; height:46px; }
}