:root { --gold:#C9A24B; --navy:#0A1A3A; --bg:#0d1b2a; --panel:#12233f; --topbar:#0a1526; --border:#33415c; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:#eee; }
body.auth { display:grid; place-items:center; height:100vh; }
.card { background:var(--panel); padding:24px; border-radius:10px; width:300px; display:flex; flex-direction:column; gap:10px; }
.card input, .card button { padding:10px; border-radius:6px; border:1px solid var(--border); }
.err { color:#ff8a8a; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:var(--topbar); }
.topbar a { color:var(--gold); text-decoration:none; margin-left:12px; }
main { padding:20px; }
.btn, button { background:var(--gold); color:var(--topbar); border:0; padding:8px 14px; border-radius:6px; cursor:pointer; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.card-item { background:var(--panel); border-radius:10px; overflow:hidden; }
.card-item img { width:100%; display:block; }
.card-item .noimg { height:160px; display:grid; place-items:center; color:#889; }
.card-item .title { padding:8px; font-weight:700; }
.card-item .meta { padding:0 8px 8px; font-size:12px; color:#889; }
.card-item .actions { display:flex; gap:6px; padding:8px; }
.card-item .actions button { flex:1; font-size:12px; }

/* Editor */
.editor { display:grid; grid-template-columns:300px 1fr; gap:16px; }
.panel { background:var(--panel); border-radius:10px; padding:12px; max-height:88vh; overflow:auto; }
.panel h4 { margin:12px 0 6px; color:var(--gold); }
.panel label { display:block; font-size:12px; margin:6px 0 2px; }
.panel input, .panel select { width:100%; padding:6px; border-radius:5px; border:1px solid var(--border); background:var(--bg); color:#eee; }
.toolbar { display:flex; gap:8px; margin-bottom:10px; align-items:center; }
.toolbar #title { flex:1; padding:8px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:#eee; }
.stage-wrap { display:flex; flex-direction:column; align-items:center; }
/* 1080x1080 scaled to fit via transform in JS; base box is fixed. */
.stage { position:relative; width:1080px; height:1080px; background:var(--navy) center/cover no-repeat; transform-origin:top left; }
.stage .layer { position:absolute; }
.stage .txt { cursor:move; white-space:pre-wrap; outline:none; line-height:1.05; user-select:none; -webkit-user-select:none; }
.stage .txt.editing { cursor:text; user-select:text; -webkit-user-select:text; }
.stage .txt.selected, .stage .photo.selected, .stage .badge.selected, .stage .flag.selected { outline:2px dashed var(--gold); }
.stage .photo, .stage .badge, .stage .flag { cursor:move; }
.stage .photo { overflow:hidden; }
.stage .photo img { display:block; }
.stage .txt.editing { cursor:text; outline:2px solid var(--gold); }

/* Panel: layers list */
.panel .layers { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.lrow { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:5px; cursor:pointer; font-size:13px; }
.lrow:hover { background:var(--bg); }
.lrow.sel { background:#1c3562; }
.lrow .lname { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eye { cursor:pointer; color:var(--gold); width:14px; text-align:center; }
.eye.off { color:#556; }
.num-row { display:flex; gap:8px; }
.num-row span { flex:1; }
.panel .hint { font-size:12px; color:#8794ad; margin:6px 0; }
.panel textarea { width:100%; padding:6px; border-radius:5px; border:1px solid var(--border); background:var(--bg); color:#eee; font-family:inherit; resize:vertical; }
.panel button.primary { width:100%; margin-top:8px; background:#1c3562; color:#fff; }
.share-links { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.share-links button { width:100%; background:var(--bg); color:var(--gold); border:1px solid var(--border); }
.share-links button:hover { background:var(--panel); }

/* Nav + pages */
.topbar nav { display:flex; align-items:center; gap:14px; }
.topbar .who { color:#8794ad; font-size:13px; }
.newbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.newbar select { padding:8px; border-radius:6px; border:1px solid var(--border); background:var(--panel); color:#eee; }
.toolbar .scale-pick { color:#8794ad; font-size:12px; display:flex; align-items:center; gap:4px; }
.toolbar .scale-pick select { padding:6px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:#eee; }
.panel-box { background:var(--panel); border-radius:10px; padding:16px; margin-bottom:20px; }
.panel-box h3 { margin:0 0 10px; color:var(--gold); }
.form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.form-row input, .form-row select { padding:9px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:#eee; }
.utable { width:100%; border-collapse:collapse; background:var(--panel); border-radius:10px; overflow:hidden; }
.utable th, .utable td { padding:10px 12px; text-align:left; border-bottom:1px solid #22345c; }
.utable th { color:var(--gold); font-size:13px; }
.utable td.meta { color:#8794ad; font-size:12px; }
.utable select { padding:6px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:#eee; }
.utable .actions { display:flex; gap:6px; }
.utable .actions button { font-size:12px; }
.utable .actions .btn-sm, .btn-sm { display:inline-block; background:var(--gold); color:var(--topbar); padding:6px 10px; border-radius:6px; font-size:12px; font-weight:700; text-decoration:none; }
.utable a { color:var(--gold); text-decoration:none; }
.rec-search { width:100%; max-width:360px; padding:9px; margin-bottom:14px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:#eee; }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge.active { background:#12401f; color:#6fd66f; }
.badge.disabled { background:#4a1a1a; color:#ff8a8a; }
.badge.locked { background:#4a3a12; color:#e3c77a; }
.topbar a.who { color:#8794ad; text-decoration:none; }
.topbar a.who:hover { color:var(--gold); }

/* ============ Sidebar app shell (v4.3 admin UI) ============ */
.shell { display:flex; min-height:100vh; }
.sidebar { width:234px; flex:0 0 234px; background:var(--topbar); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side-brand { display:flex; align-items:center; min-height:60px; padding:14px 18px; border-bottom:1px solid var(--border);
  color:var(--gold); font-weight:800; font-size:16px; text-decoration:none; }
.side-brand img { max-height:38px; max-width:190px; display:block; }
.side-nav { flex:1; padding:12px 10px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.side-link { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px; color:#c3cde0;
  text-decoration:none; font-size:14px; font-weight:600; transition:background .12s,color .12s; }
.side-link .ico { width:18px; text-align:center; opacity:.8; font-size:15px; }
.side-link:hover { background:rgba(255,255,255,.05); color:#fff; }
.side-link.active { background:var(--gold); color:var(--topbar); }
.side-link.active .ico { opacity:1; }
.side-group { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#6b7794; padding:14px 12px 6px; }
.side-foot { border-top:1px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:8px; }
.side-user { display:flex; align-items:center; gap:10px; color:#c3cde0; text-decoration:none; padding:6px; border-radius:8px; }
.side-user:hover { background:rgba(255,255,255,.05); }
.side-user .avatar { width:34px; height:34px; border-radius:50%; background:var(--gold); color:var(--topbar);
  display:grid; place-items:center; font-weight:800; flex:0 0 34px; }
.side-user .who { font-size:12px; line-height:1.25; } .side-user .who small { color:#8794ad; }
.side-logout { text-align:center; padding:8px; border-radius:8px; border:1px solid var(--border); color:#c3cde0;
  text-decoration:none; font-size:13px; } .side-logout:hover { background:rgba(255,255,255,.05); color:#fff; }
.content { flex:1; min-width:0; }
.content main { padding:26px 30px; max-width:1200px; }
.content h1 { font-size:26px; margin:0 0 18px; }
.menu-toggle { display:none; }

@media (max-width:900px) {
  .shell { display:block; }
  .sidebar { position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%); transition:transform .2s; box-shadow:0 0 40px rgba(0,0,0,.5); }
  .sidebar.open { transform:translateX(0); }
  .menu-toggle { display:inline-block; margin:12px 0 0 14px; background:var(--panel); color:#eee; border:1px solid var(--border); }
  .content main { padding:16px; }
}

/* Toasts */
.toast-wrap { position:fixed; right:18px; bottom:18px; z-index:1000; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--panel); color:#eee; border:1px solid var(--border); border-left:4px solid var(--gold);
  padding:12px 16px; border-radius:8px; min-width:220px; max-width:360px; box-shadow:0 8px 30px rgba(0,0,0,.4);
  opacity:0; transform:translateY(10px); transition:opacity .25s, transform .25s; font-size:14px; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.success { border-left-color:#4caf6a; } .toast.error { border-left-color:#e0555a; }

/* Card / table polish */
.card-item { transition:transform .12s, box-shadow .12s; }
.card-item:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.utable tr:hover td { background:rgba(255,255,255,.02); }

/* Sidebar collapse (desktop) */
.side-top { display:flex; align-items:center; justify-content:space-between; }
.collapse-btn { background:transparent; color:#8794ad; border:0; font-size:18px; cursor:pointer; padding:6px 10px; border-radius:6px; }
.collapse-btn:hover { background:rgba(255,255,255,.06); color:#fff; }
.reopen-btn { display:none; position:fixed; top:14px; left:14px; z-index:60; width:40px; height:40px; border-radius:8px;
  background:var(--panel); color:var(--gold); border:1px solid var(--border); font-size:18px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.4); }
html.nav-collapsed .sidebar { display:none; }
html.nav-collapsed .reopen-btn { display:inline-flex; align-items:center; justify-content:center; }
html.nav-collapsed .content main { padding-top:64px; }

/* ============ Professional split login ============ */
.auth-split { display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; }
.auth-brand { position:relative; overflow:hidden; color:#fff; display:flex; align-items:center; padding:64px;
  background:linear-gradient(150deg, var(--navy), color-mix(in srgb, var(--navy) 55%, #000)); }
.auth-brand-inner { position:relative; z-index:2; max-width:440px; }
.auth-logo img { max-width:290px; max-height:96px; display:block; margin-bottom:34px; }
.auth-logo-text { font-size:26px; font-weight:800; color:var(--gold); display:block; margin-bottom:34px; }
.auth-brand h2 { font-family:'Playfair Display',serif; font-size:36px; line-height:1.25; margin:0 0 14px; }
.auth-tag { color:var(--gold); letter-spacing:.14em; text-transform:uppercase; font-size:13px; font-weight:700; }
.auth-orb { position:absolute; border-radius:50%; width:520px; height:520px; right:-160px; top:-130px; opacity:.55;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--gold) 45%, transparent), transparent 70%); }
.auth-orb.orb2 { width:380px; height:380px; left:-130px; bottom:-150px; opacity:.4;
  background:radial-gradient(circle, rgba(40,110,200,.5), transparent 70%); }
.auth-panel { display:grid; place-items:center; padding:40px; background:var(--bg); }
.auth-card { width:100%; max-width:384px; display:flex; flex-direction:column; }
.auth-card h1 { font-size:28px; margin:0 0 4px; }
.auth-sub { color:#8794ad; margin:0 0 24px; }
.fld { display:flex; flex-direction:column; gap:6px; font-size:13px; color:#aeb9d0; margin-bottom:15px; }
.fld input { padding:12px 14px; border-radius:9px; border:1px solid var(--border); background:var(--panel); color:#fff; font-size:15px; }
.fld input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.auth-cap { margin:2px 0 14px; min-height:0; }
.auth-btn { padding:13px; border-radius:9px; font-size:15px; width:100%; }
.auth-foot { text-align:center; margin-top:16px; }
.auth-foot a { color:var(--gold); font-size:13px; text-decoration:none; }
.auth-foot a:hover { text-decoration:underline; }
@media (max-width:860px){ .auth-split { grid-template-columns:1fr; } .auth-brand { display:none; } }