/* ============================================================
   NAMEUPS TOOLS — Admin styles
   Builds on core.css tokens. Adds layout + missing button variants.
   ============================================================ */

/* ── Button variants used in admin ──────────────────────────── */
.btn-ghost{background:var(--glass);border:1px solid var(--hairline);color:var(--text);}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent-hi);background:var(--glass-2);}
.btn-sm{padding:7px 14px;font-size:12.5px;}

/* ── Login ──────────────────────────────────────────────────── */
.admin-login-body{display:grid;place-items:center;min-height:100vh;padding:24px;}
.admin-login{width:100%;max-width:380px;}
.admin-login-card{padding:30px 28px;}
.admin-login-hint{margin-top:16px;font-size:12px;color:var(--text-3);text-align:center;line-height:1.6;}
.admin-login-hint code{font-family:var(--font-mono);color:var(--text-2);}
.admin-alert{margin-top:14px;padding:11px 14px;border-radius:12px;background:color-mix(in srgb,var(--danger) 14%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger);font-size:13px;}

/* ── Shell layout ───────────────────────────────────────────── */
.admin-body{display:grid;grid-template-columns:248px 1fr;min-height:100vh;}
.admin-side{position:sticky;top:0;height:100vh;border-right:1px solid var(--hairline);padding:24px 20px;display:flex;flex-direction:column;gap:22px;background:color-mix(in srgb,var(--panel) 50%,transparent);backdrop-filter:blur(12px);}
.admin-side .brand{font-size:16px;}
.admin-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.admin-nav a{padding:10px 14px;border-radius:12px;color:var(--text-2);font-size:14px;font-weight:500;transition:all .15s var(--ease);}
.admin-nav a:hover{background:var(--glass);color:var(--text);}
.admin-nav a.active{background:var(--accent-dim,color-mix(in srgb,var(--accent) 16%,transparent));color:var(--accent-hi);}
.admin-nav a.ext{margin-top:8px;color:var(--text-3);font-size:13px;}
.admin-logout{margin-top:auto;}

.admin-main{padding:38px 40px 80px;max-width:1080px;}
.admin-h1{font-size:clamp(26px,3.5vw,36px);margin-bottom:6px;}
.admin-sub{color:var(--text-2);font-size:14.5px;line-height:1.6;margin-bottom:26px;max-width:70ch;}
.admin-sub code,.admin-h1 code{font-family:var(--font-mono);font-size:.85em;color:var(--accent-hi);}
.admin-back{display:inline-block;color:var(--text-2);font-size:13px;margin-bottom:14px;}
.admin-back:hover{color:var(--text);}

.admin-flash{margin-bottom:22px;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--success) 12%,transparent);border:1px solid color-mix(in srgb,var(--success) 35%,transparent);color:var(--success);font-size:13.5px;}

/* ── Dashboard ──────────────────────────────────────────────── */
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.admin-stat{padding:20px;text-align:center;}
.admin-stat-n{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;background:linear-gradient(120deg,var(--iris-1),var(--iris-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.admin-stat-l{font-size:12px;color:var(--text-3);margin-top:8px;text-transform:uppercase;letter-spacing:.6px;}
.admin-quick{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* ── Tools list ─────────────────────────────────────────────── */
.admin-create-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
.admin-tool-list{display:flex;flex-direction:column;gap:10px;}
.admin-tool-row{display:flex;align-items:center;gap:16px;padding:16px 18px;}
.admin-tool-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--glass);border:1px solid var(--hairline);flex-shrink:0;}
.admin-tool-meta{flex:1;min-width:0;}
.admin-tool-name{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.admin-tool-sub{font-size:12.5px;color:var(--text-3);margin-top:3px;}
.admin-tool-sub code{font-family:var(--font-mono);}
.admin-tool-actions{display:flex;gap:7px;flex-shrink:0;align-items:center;}

/* ── Edit form ──────────────────────────────────────────────── */
.admin-edit{padding:24px;}
.admin-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text-2);margin-top:8px;cursor:pointer;}
.admin-check input{width:17px;height:17px;accent-color:var(--accent);}
textarea.field-input{resize:vertical;font-family:inherit;line-height:1.5;}

/* ── Theme Studio ───────────────────────────────────────────── */
.admin-theme{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:20px;align-items:start;}
.admin-theme-form{padding:24px;position:sticky;top:24px;}
.admin-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.admin-color label{display:block;margin-bottom:6px;}
.admin-color-row{display:flex;gap:8px;align-items:center;}
.admin-swatch{width:42px;height:40px;border:1px solid var(--hairline);border-radius:10px;background:none;cursor:pointer;padding:2px;flex-shrink:0;}
.admin-swatch::-webkit-color-swatch{border:none;border-radius:7px;}
.admin-swatch::-moz-color-swatch{border:none;border-radius:7px;}
.admin-hex{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;}

.admin-preview{position:sticky;top:24px;border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--void);height:calc(100vh - 48px);display:flex;flex-direction:column;}
.admin-preview-bar{padding:11px 16px;font-size:12.5px;color:var(--text-2);border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:9px;background:var(--panel);}
.admin-preview iframe{flex:1;width:100%;border:none;background:var(--void);}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1000px){
  .admin-theme{grid-template-columns:1fr;}
  .admin-theme-form,.admin-preview{position:static;}
  .admin-preview{height:520px;}
  .admin-stats{grid-template-columns:repeat(2,1fr);}
  .admin-create-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  .admin-body{grid-template-columns:1fr;}
  .admin-side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;}
  .admin-nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;order:3;}
  .admin-logout{margin:0;}
  .admin-main{padding:26px 20px 70px;}
  .admin-tool-row{flex-wrap:wrap;}
  .admin-tool-actions{flex:1 1 100%;}
}
