:root {
  --bg:#151515;
  --bg-soft:#1c1c1c;
  --panel:rgba(31,31,31,.94);
  --panel-solid:#202020;
  --text:#f6f2ed;
  --muted:#aaa4a0;
  --line:rgba(255,255,255,.11);
  --accent:#d94b3d;
  --accent-soft:rgba(217,75,61,.16);
  --danger:#e06d6d;
  --success:#79c39a;
  --shadow:0 22px 65px rgba(0,0,0,.34);
  --radius:22px;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#151515}
button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}.hidden{display:none!important}

/* Public page — simple Linktree-like structure with Archona branding */
body:not(.admin-body){background:
  radial-gradient(circle at 50% -160px, rgba(217,75,61,.22), transparent 360px),
  linear-gradient(180deg,#181818 0,#131313 100%);}
.public-shell{width:min(100%,680px);margin:0 auto;padding:42px 20px 34px;position:relative}
.public-shell::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:radial-gradient(rgba(255,255,255,.22) .55px,transparent .55px);background-size:8px 8px;mask-image:linear-gradient(to bottom,#000,transparent 55%)}
.profile{text-align:center;margin:0 auto 27px;position:relative;max-width:560px}
.brand-mark{width:96px;height:72px;margin:0 auto 15px;display:grid;place-items:center;background:transparent;border:0;box-shadow:none}
.brand-a{font-family:Arial Black,Inter,sans-serif;font-size:48px;line-height:1;font-weight:900;color:var(--accent);letter-spacing:-.09em;transform:translateX(-1px)}
.profile-image{display:block;width:auto;max-width:150px;height:auto;max-height:88px;object-fit:contain;border-radius:0;border:0;box-shadow:none;margin:0 auto 15px}
.profile h1{margin:0;font-size:25px;font-weight:780;letter-spacing:-.025em}
.handle{margin:5px 0 0;font-size:12px;color:#aaa4a0;font-weight:600}
.bio{margin:12px auto 0;max-width:520px;color:#eee9e5;line-height:1.5;font-size:14px}
.section-block{margin-top:27px;position:relative}.section-block.no-title{margin-top:12px}
.section-title{margin:0 6px 10px;font-size:14px;font-weight:760;text-align:center;color:#f2eeea;letter-spacing:-.01em}
.link-stack{display:grid;gap:12px}
.link-item{position:relative;display:grid;grid-template-columns:1fr 28px;gap:14px;align-items:center;min-height:66px;padding:15px 18px;text-decoration:none;border-radius:15px;border:1px solid rgba(255,255,255,.12);background:#272727;box-shadow:0 7px 22px rgba(0,0,0,.17);transition:transform .16s ease,border-color .16s ease,background .16s ease;overflow:hidden}
.link-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.9}
.link-item:hover{transform:translateY(-2px);border-color:rgba(217,75,61,.58);background:#2e2e2e}
.link-item .title{font-size:14px;font-weight:700;text-align:center;line-height:1.35;padding-left:28px}
.link-item .subtitle{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.35;text-align:center;padding-left:28px}
.link-arrow{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#bfb8b3;font-size:13px}
.link-item.has-image:not(.featured){grid-template-columns:68px 1fr 28px}.link-item.card{min-height:94px;padding:14px}.link-item.card.has-image{grid-template-columns:78px 1fr 28px}.link-thumb{width:68px;height:54px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:#191919}.link-item.card .link-thumb{width:78px;height:66px}.link-item.has-image:not(.featured) .title,.link-item.has-image:not(.featured) .subtitle{text-align:left;padding-left:0}
.link-item.featured{min-height:150px;padding:22px;align-items:end;background:linear-gradient(145deg,rgba(217,75,61,.28),#242424);border-color:rgba(217,75,61,.46)}
.link-item.featured.has-image{min-height:210px;background-size:cover;background-position:center}.link-item.featured.has-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.08),rgba(5,5,5,.84))}.link-item.featured>*{position:relative;z-index:1}.link-item.featured .title{font-size:22px;text-align:left;padding-left:0}.link-item.featured .subtitle{text-align:left;padding-left:0;color:#ddd6d1}.link-item.featured .link-arrow{background:#fff;color:#1c1c1c}
.social-row{display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:nowrap;margin:30px 0 10px}.social-chip{width:42px;height:42px;display:grid;place-items:center;text-decoration:none;border-radius:12px;border:1px solid rgba(255,255,255,.13);background:#202020;color:#d5d0cb;transition:transform .16s ease,border-color .16s ease,background .16s ease}.social-chip svg{width:20px;height:20px;display:block}.social-chip:hover{transform:translateY(-2px);color:#fff;border-color:rgba(217,75,61,.6);background:#2a2a2a}
.public-footer{text-align:center;color:#68635f;font-size:10px;margin-top:25px;letter-spacing:.08em;text-transform:uppercase}.preview-banner{text-align:center;margin:-18px 0 20px;padding:8px 10px;border:1px solid rgba(217,75,61,.35);border-radius:12px;font-size:11px;color:#e9a39b;background:rgba(217,75,61,.08)}

/* Admin */
.admin-body { background: #0b0d11; }
.admin-layout { min-height:100vh; display:grid; grid-template-columns: 250px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 17px; border-right:1px solid var(--line); background:#0d1015; }
.sidebar-brand { display:flex; gap:11px; align-items:center; padding:3px 8px 24px; border-bottom:1px solid var(--line); }
.sidebar-mark { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:Georgia,serif;font-size:21px;border:1px solid rgba(217,75,61,.23); }
.sidebar-brand strong { display:block; font-size:14px; }
.sidebar-brand span { display:block; font-size:10px; color:#747b86; margin-top:2px; }
.nav { display:grid; gap:5px; margin-top:20px; }
.nav-btn { width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; border:0; border-radius:12px; background:transparent; color:#959ca7; cursor:pointer; text-align:left; font-size:13px; }
.nav-btn:hover { background:rgba(255,255,255,.035); color:#d5d7da; }
.nav-btn.active { background:var(--accent-soft); color:#f0aaa2; }
.nav-icon { width:19px; text-align:center; opacity:.9; }
.sidebar-bottom { position:absolute; bottom:18px; left:17px; right:17px; }
.mode-pill { padding:10px 12px; border-radius:12px; border:1px solid var(--line); color:#818893; font-size:10px; line-height:1.4; }
.mode-pill b { color:#b6bcc4; }
.main { min-width:0; }
.topbar { min-height:72px; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; background:rgba(11,13,17,.88); backdrop-filter:blur(16px); }
.topbar h1 { font-size:18px; margin:0; letter-spacing:-.01em; }
.topbar p { margin:3px 0 0; color:#737a85; font-size:11px; }
.top-actions { display:flex; gap:8px; align-items:center; }
.btn { border:1px solid var(--line); background:#151920; color:#d9dce0; padding:9px 13px; border-radius:11px; cursor:pointer; font-size:12px; font-weight:650; }
.btn:hover { border-color:rgba(217,75,61,.28); }
.btn.primary { background:var(--accent); color:#1a150b; border-color:var(--accent); }
.btn.ghost { background:transparent; }
.btn.danger { color:#f1a0a0; }
.content { padding:27px 28px 50px; max-width:1420px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.panel-head { display:flex; justify-content:space-between; gap:15px; align-items:end; margin-bottom:18px; }
.panel-head h2 { margin:0; font-size:19px; }
.panel-head p { margin:5px 0 0; color:#717984; font-size:11px; }
.admin-grid { display:grid; grid-template-columns:minmax(0, 1fr) 390px; gap:22px; align-items:start; }
.card-panel { border:1px solid var(--line); border-radius:18px; background:#10131a; box-shadow:inset 0 1px rgba(255,255,255,.025); overflow:hidden; }
.card-panel-header { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.card-panel-header strong { font-size:12px; }
.link-admin-list, .section-admin-list { display:grid; }
.admin-row { display:grid; grid-template-columns:34px 1fr auto; gap:11px; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.055); cursor:default; }
.admin-row:last-child { border-bottom:0; }
.admin-row.dragging { opacity:.4; }
.drag-handle { color:#4f5661; cursor:grab; text-align:center; user-select:none; }
.admin-row-main { min-width:0; }
.admin-row-title { font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-row-meta { margin-top:3px; display:flex; align-items:center; gap:7px; color:#6f7782; font-size:10px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.05); color:#8f96a1; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.badge.live { background:rgba(121,195,154,.1); color:#8ad1a9; }
.badge.hidden-state { background:rgba(224,109,109,.1); color:#e48e8e; }
.row-actions { display:flex; gap:5px; }
.icon-btn { width:31px;height:31px;border:1px solid var(--line);background:#151920;color:#8f96a1;border-radius:9px;cursor:pointer;display:grid;place-items:center; }
.icon-btn:hover { color:#e6e7e9; border-color:rgba(217,75,61,.25); }
.preview-wrap { position:sticky; top:94px; }
.phone { width:100%; aspect-ratio: 9/16.5; max-height:720px; border-radius:30px; border:7px solid #1d222b; background:#090b0f; overflow:hidden; box-shadow:0 25px 80px rgba(0,0,0,.45); }
.phone iframe { width:100%; height:100%; border:0; background:#0b0d11; }
.section-note { color:#6f7782; font-size:10px; margin:10px 2px 0; line-height:1.5; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field { display:grid; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { font-size:10px; font-weight:650; color:#8b929d; text-transform:uppercase; letter-spacing:.07em; }
.input, .select, .textarea { width:100%; border:1px solid var(--line); background:#0d1015; color:#e9eaec; border-radius:11px; padding:10px 11px; outline:none; font-size:12px; }
.input:focus, .select:focus, .textarea:focus { border-color:rgba(217,75,61,.45); box-shadow:0 0 0 3px rgba(217,75,61,.08); }
.textarea { min-height:88px; resize:vertical; line-height:1.5; }
.checkbox-line { display:flex; gap:9px; align-items:center; font-size:12px; color:#a9afb7; }
.settings-card { max-width:760px; padding:18px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:17px; }
.stat-card { border:1px solid var(--line); border-radius:16px; padding:15px; background:#10131a; }
.stat-label { color:#747c87; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.stat-value { margin-top:7px; font-size:28px; font-weight:700; letter-spacing:-.04em; }
.analytics-table { width:100%; border-collapse:collapse; }
.analytics-table th,.analytics-table td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.055); text-align:left; font-size:11px; }
.analytics-table th { color:#777f8a; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.analytics-table td:last-child,.analytics-table th:last-child { text-align:right; }
.empty-state { padding:32px 20px; text-align:center; color:#69717d; font-size:11px; }

/* Modal - intentionally does not close on outside click */
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.67); display:grid; place-items:center; padding:22px; backdrop-filter:blur(5px); }
.modal { width:min(100%, 650px); max-height:90vh; overflow:auto; border:1px solid rgba(255,255,255,.11); background:#12161d; border-radius:20px; box-shadow:0 35px 100px rgba(0,0,0,.55); }
.modal-head { padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky;top:0;background:#12161d;z-index:2; }
.modal-head h3 { margin:0;font-size:15px; }
.modal-body { padding:18px; }
.modal-foot { padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; position:sticky;bottom:0;background:#12161d; }
.image-preview { width:100%; height:130px; object-fit:cover; border:1px solid var(--line); border-radius:12px; background:#0b0e13; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(100%,430px); text-align:center; border:1px solid var(--line); border-radius:24px; background:#11151b; padding:34px; box-shadow:var(--shadow); }
.login-card .brand-mark { margin-bottom:20px; }
.login-card h1 { margin:0; font-family:Georgia,serif; font-size:27px; }
.login-card p { color:#858c96; font-size:12px; line-height:1.6; margin:12px auto 22px; }
.error-text { color:#e48e8e !important; }
.toast { position:fixed; right:20px; bottom:20px; z-index:200; padding:11px 14px; border-radius:11px; border:1px solid var(--line); background:#1b2028; color:#d8dadd; font-size:11px; box-shadow:var(--shadow); animation:toastin .18s ease; }
@keyframes toastin { from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }

@media(max-width:980px){
  .admin-layout{grid-template-columns:74px 1fr}.sidebar{padding:20px 10px}.sidebar-brand{justify-content:center}.sidebar-brand div:last-child,.nav-btn span:not(.nav-icon),.sidebar-bottom{display:none}.nav-btn{justify-content:center;padding:12px}.nav-icon{width:auto}.admin-grid{grid-template-columns:1fr}.preview-wrap{position:static}.phone{max-width:390px;margin:0 auto}.stats-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .public-shell{padding:30px 14px 25px}.profile h1{font-size:24px}.admin-layout{display:block}.sidebar{position:fixed;z-index:50;left:0;right:0;bottom:0;top:auto;height:auto;border-right:0;border-top:1px solid var(--line);padding:7px 8px;background:#0e1116}.sidebar-brand,.sidebar-bottom{display:none}.nav{margin:0;grid-template-columns:repeat(5,1fr)}.nav-btn{padding:7px 3px;display:grid;gap:2px;justify-items:center;font-size:9px}.nav-btn span:not(.nav-icon){display:block}.main{padding-bottom:68px}.topbar{padding:12px 14px}.content{padding:18px 14px 35px}.topbar p{display:none}.top-actions .btn.ghost{display:none}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.stats-grid{grid-template-columns:1fr 1fr}.panel-head{align-items:center}.admin-row{grid-template-columns:25px 1fr auto}.modal-backdrop{padding:10px}.modal{border-radius:16px}
}

.team-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:#f0aaa2;font-size:12px;font-weight:800;border:1px solid rgba(217,75,61,.25)}
.badge.super{background:rgba(217,75,61,.14);color:#f0aaa2}
.icon-btn.danger-icon{color:#e48e8e}


/* Public light theme (selected from Admin > Settings) */
html[data-theme="light"]{background:#f4f1ed}
html[data-theme="light"] body:not(.admin-body){color:#252321;background:
  radial-gradient(circle at 50% -160px, rgba(217,75,61,.14), transparent 360px),
  linear-gradient(180deg,#faf8f5 0,#f1eeea 100%)}
html[data-theme="light"] .public-shell::before{opacity:.08;background-image:radial-gradient(rgba(43,39,36,.24) .55px,transparent .55px)}
html[data-theme="light"] .profile h1{color:#252321}
html[data-theme="light"] .handle{color:#7f7770}
html[data-theme="light"] .bio{color:#514b46}
html[data-theme="light"] .section-title{color:#3f3a36}
html[data-theme="light"] .link-item{background:#fffdfb;border-color:rgba(52,45,40,.12);box-shadow:0 7px 22px rgba(79,64,54,.08);color:#282421}
html[data-theme="light"] .link-item:hover{background:#fff;border-color:rgba(217,75,61,.45)}
html[data-theme="light"] .link-item .subtitle{color:#817870}
html[data-theme="light"] .link-arrow{color:#7e766f}
html[data-theme="light"] .link-thumb{background:#eee9e4;border-color:rgba(52,45,40,.12)}
html[data-theme="light"] .link-item.featured{background:linear-gradient(145deg,rgba(217,75,61,.17),#fffaf6);border-color:rgba(217,75,61,.32)}
html[data-theme="light"] .link-item.featured.has-image{color:#fff}
html[data-theme="light"] .link-item.featured.has-image .subtitle{color:#eee8e4}
html[data-theme="light"] .social-chip{background:#fffdfb;border-color:rgba(52,45,40,.12);color:#514b46;box-shadow:0 5px 16px rgba(79,64,54,.06)}
html[data-theme="light"] .social-chip:hover{background:#fff;color:#211f1d;border-color:rgba(217,75,61,.45)}
html[data-theme="light"] .public-footer{color:#91877f}
html[data-theme="light"] .preview-banner{color:#a43c32;background:rgba(217,75,61,.06)}