:root { --red: #ff003b; --ink: #101114; --muted: #70727a; --paper: #f5f5f2; --line: #deded9; --ease: cubic-bezier(.23, 1, .32, 1); }
* { box-sizing: border-box; } [hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Archivo, Arial, sans-serif; }
.login-screen { min-height: 100svh; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--red) 24%, transparent), transparent 22%), #111; }
.login-card { width: min(100%, 28rem); padding: 3rem; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.25); }.login-card img { width: 13rem; max-height: 3rem; object-fit: contain; object-position: left; }.login-card > p { margin: 1.8rem 0 2.5rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.login-card form { display: grid; gap: 1rem; }.login-card label { display: grid; gap: .55rem; font-size: .78rem; font-weight: 700; }.login-card input { height: 3.25rem; border: 1px solid var(--line); padding: 0 .85rem; font: inherit; }
.login-card button, .save-bar button, .save-top, .invite-form button { border: 0; background: var(--red); color: #fff; font: 700 .78rem Archivo,Arial,sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }.login-card button:not(.text-button), .invite-form button { display: flex; justify-content: space-between; width: 100%; padding: 1.1rem 1.15rem; }.login-card .text-button { justify-self: start; padding: .2rem 0; color: var(--muted); background: none; font-size: .68rem; text-decoration: underline; text-underline-offset: .25rem; }.login-card small, .form-message { display:block; min-height:1rem; margin:0; color:var(--red); font-size:.78rem; }
.admin-shell { display:grid; grid-template-columns:17rem minmax(0,1fr); min-height:100svh; }.admin-shell aside { position:sticky; top:0; height:100svh; padding:2rem; background:#111; color:#fff; display:flex; flex-direction:column; }.admin-shell aside img { width:10rem; filter:invert(1) grayscale(1) brightness(4); object-fit:contain; object-position:left; }.side-label { margin-top:3rem; color:#818186; font-size:.66rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.admin-shell aside nav { display:grid; gap:.25rem; margin-top:1rem; }.admin-shell aside nav a,.side-bottom a,.side-bottom button { padding:.85rem .7rem; color:#dedee0; background:none; border:0; text-align:left; font:500 .9rem Archivo,Arial,sans-serif; text-decoration:none; }.admin-shell aside nav a:hover { background:#222; color:#fff; }.side-bottom { display:grid; gap:.25rem; margin-top:auto; }.side-bottom #current-user { margin:0 0 .8rem; padding:0 .7rem; color:#818186; font-size:.68rem; overflow-wrap:anywhere; }.side-bottom button { color:#ff6d89; cursor:pointer; }
.admin-content { width:min(100%,70rem); padding:3.4rem clamp(2rem,6vw,6rem) 4rem; }.admin-content>header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:4rem; }.eyebrow { margin:0 0 .7rem; color:var(--red); font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.admin-content h1 { margin:0; font-size:clamp(2.2rem,3.5vw,4rem); letter-spacing:-.07em; }.save-top { padding:1rem 1.2rem; }.admin-content section { padding:2.5rem 0; border-top:1px solid var(--line); }.section-title { display:grid; grid-template-columns:3rem 1fr; gap:1rem; margin-bottom:2rem; }.section-title>span { color:var(--red); font-size:.72rem; font-weight:800; }.section-title h2 { margin:0; font-size:1.3rem; letter-spacing:-.04em; }.section-title p { margin:.4rem 0 0; color:var(--muted); font-size:.9rem; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.form-grid label,.link-row label,.invite-form label { display:grid; gap:.45rem; color:#565861; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.form-grid input,.form-grid textarea,.link-row input,.invite-form input,.invite-form select { width:100%; border:1px solid var(--line); background:#fff; padding:.85rem; font:500 .95rem Archivo,Arial,sans-serif; resize:vertical; }
.media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.upload-box { min-height:16rem; border:1px dashed #bcbcb7; background:#fff; padding:1rem; display:grid; gap:.8rem; align-content:start; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.upload-box input { font-size:.72rem; }.upload-box img { width:100%; height:10rem; object-fit:contain; object-position:center; background:#f5f5f2; }.links-editor,.users-list { display:grid; gap:.75rem; }.link-row { display:grid; grid-template-columns:2.6rem .75fr 1fr 1.5fr; gap:.75rem; align-items:end; padding:1rem; background:#fff; border:1px solid var(--line); }.link-row>b { padding-bottom:.85rem; color:var(--red); font-size:.76rem; }.save-bar { position:sticky; bottom:1.3rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 1rem 1rem 1.3rem; background:#111; color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.2); }.save-bar span { font-size:.78rem; }.save-bar button { padding:1rem 1.2rem; }.save-bar button span { margin-left:.6rem; }
.invite-form { display:grid; grid-template-columns:1.3fr .8fr auto; gap:.75rem; align-items:end; padding:1rem; background:#fff; border:1px solid var(--line); }.invite-form button { width:auto; min-width:11rem; }.user-row { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem; background:#fff; border:1px solid var(--line); }.user-row strong,.user-row small { display:block; }.user-row small { margin-top:.35rem; color:var(--muted); }.user-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }.user-action { padding:.65rem .75rem; border:1px solid var(--line); background:#fff; color:var(--ink); font:700 .68rem Archivo,Arial,sans-serif; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; }.user-action.danger { color:#c01e3d; }
button { transition:transform 160ms var(--ease), opacity 160ms var(--ease); } button:active { transform:scale(.97); } button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid color-mix(in srgb,var(--red) 55%,white); outline-offset:2px; }
@media (max-width:860px) { .admin-shell { display:block; }.admin-shell aside { position:relative; height:auto; padding:1.25rem; }.admin-shell aside nav { display:none; }.side-label { display:none; }.side-bottom { display:flex; flex-wrap:wrap; margin:1.3rem 0 0; }.side-bottom #current-user { width:100%; padding:0 .7rem; }.admin-content { padding:2rem 1.25rem; }.admin-content>header { margin-bottom:2.7rem; }.form-grid,.media-grid { grid-template-columns:1fr; }.link-row { grid-template-columns:2rem 1fr; }.link-row label:last-child { grid-column:2; }.save-top { display:none; }.invite-form { grid-template-columns:1fr; }.invite-form button { width:100%; }.user-row { align-items:flex-start; flex-direction:column; }.user-actions { justify-content:flex-start; } }