:root {
  --ink:#16151A; --ink-60:#5C5967; --ink-40:#8B8894;
  --rule:#E2E0E7; --rule-soft:#ECEAEF; --paper:#F5F4F7; --surface:#FFFFFF;
  --indigo:#2A35A0; --indigo-700:#1E2778; --indigo-100:#E9EAF7;
  --ok:#17694A; --ok-bg:#E7F4EE; --bad:#A3243A; --bad-bg:#FBEDEF;
  --warn:#8A6D1F; --warn-bg:#FBF3DC;
  --fd:"Bricolage Grotesque",system-ui,sans-serif;
  --fb:"Newsreader",Georgia,serif;
  --fm:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fd);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-0.02em;font-weight:600}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}

/* Top bar */
.p-top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:30}
.p-top__in{max-width:1080px;margin-inline:auto;padding:.9rem clamp(1rem,4vw,2rem);display:flex;align-items:center;gap:1rem}
.p-brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.p-brand img{border-radius:2px}
.p-brand__mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);font-size:.7rem;font-weight:700}
.p-brand strong{display:block;font-size:.9rem}
.p-brand small{font-family:var(--fm);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.p-topnav{display:flex;align-items:center;gap:1.25rem;font-size:.8rem}
.p-topnav a{color:rgba(255,255,255,.75)}
.p-topnav a:hover{color:#fff}
.p-signout{font-family:var(--fm);font-size:.6875rem!important;letter-spacing:.1em;text-transform:uppercase}

.p-main{padding-block:clamp(1.5rem,4vw,3rem);min-height:70vh}

/* Alerts */
.p-alert{padding:.85rem 1.1rem;border-left:3px solid var(--ok);background:var(--ok-bg);color:var(--ok);margin-bottom:1.5rem;font-size:.9rem}
.p-alert--bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.p-alert--warn{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}

/* Auth cards (login/register/reset) */
.p-auth{max-width:440px;margin:2vh auto 0}
.p-auth__card{background:var(--surface);border:1px solid var(--rule)}
.p-auth__hd{padding:1.6rem 1.6rem .4rem}
.p-auth__hd h1{font-size:1.4rem}
.p-auth__hd p{color:var(--ink-40);font-size:.9rem;margin:.4rem 0 0}
.p-auth form{padding:1.6rem;display:grid;gap:1.1rem}
.p-auth__alt{padding:1rem 1.6rem;border-top:1px solid var(--rule);background:#FAFAFC;font-size:.875rem;color:var(--ink-60)}
.p-auth__alt a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px}

/* Fields */
.p-field label{display:block;font-family:var(--fm);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);margin-bottom:.45rem}
.p-field input,.p-field textarea,.p-field select{width:100%;padding:.7rem .85rem;border:1px solid var(--rule);background:var(--surface);font-family:var(--fd);font-size:.9375rem;border-radius:2px}
.p-field textarea{resize:vertical;line-height:1.6;font-family:var(--fb);font-size:1rem}
.p-field input:focus,.p-field textarea:focus,.p-field select:focus{outline:none;border-color:var(--indigo)}
.p-help{font-size:.8125rem;color:var(--ink-40);margin:.4rem 0 0}
.p-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.p-filename{font-family:var(--fm);font-size:.6875rem;color:var(--ink-60);margin-top:.3rem}

/* Buttons */
.p-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.15rem;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--fm);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s,color .15s;border-radius:2px}
.p-btn:hover{background:var(--indigo);border-color:var(--indigo)}
.p-btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.p-btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.p-btn--bad{background:transparent;color:var(--bad);border-color:#E6C7CE}
.p-btn--bad:hover{background:var(--bad);border-color:var(--bad);color:#fff}
.p-btn--sm{padding:.45rem .7rem;font-size:.5625rem}

/* Dashboard layout */
.p-dash{display:grid;grid-template-columns:230px 1fr;gap:clamp(1.25rem,3vw,2.25rem);align-items:start}
.p-side{position:sticky;top:88px;background:var(--surface);border:1px solid var(--rule)}
.p-side a{display:block;padding:.7rem 1rem;font-size:.875rem;border-bottom:1px solid var(--rule-soft)}
.p-side a:last-child{border-bottom:0}
.p-side a:hover{background:var(--indigo-100)}
.p-side a.is-on{background:var(--indigo);color:#fff}
.p-status{padding:1rem;border-bottom:1px solid var(--rule);font-size:.8rem}
.p-badge{display:inline-block;font-family:var(--fm);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.p-badge--pending{background:var(--warn-bg);color:var(--warn)}
.p-badge--approved{background:var(--ok-bg);color:var(--ok)}
.p-badge--suspended{background:var(--bad-bg);color:var(--bad)}

.p-panel{background:var(--surface);border:1px solid var(--rule);margin-bottom:1.5rem}
.p-panel__hd{padding:1.1rem 1.4rem;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:1rem}
.p-panel__hd h2{font-size:1.05rem}
.p-panel__hd .sp{margin-left:auto}
.p-panel__body{padding:1.4rem;display:grid;gap:1.2rem}
.p-panel__foot{padding:1.1rem 1.4rem;border-top:1px solid var(--rule);background:#FAFAFC;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* Image preview */
.p-preview{display:flex;align-items:center;gap:.9rem;margin-bottom:.5rem;flex-wrap:wrap}
.p-preview img{border:1px solid var(--rule);object-fit:cover}
.p-preview .thumb-photo{width:84px;height:84px;border-radius:50%}
.p-preview .thumb-cover{width:180px;height:70px}

/* Projects editor */
.p-projs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.p-proj{background:var(--surface);padding:1rem;display:grid;grid-template-columns:80px 1fr auto;gap:1rem;align-items:center}
.p-proj img,.p-proj .thumb-none{width:80px;height:64px;object-fit:cover;border:1px solid var(--rule)}
.p-proj .thumb-none{display:grid;place-items:center;background:var(--paper);font-family:var(--fm);font-size:.5rem;color:var(--ink-40)}

.p-note{font-size:.85rem;color:var(--ink-60);background:var(--indigo-100);border-left:2px solid var(--indigo);padding:.9rem 1.1rem}

/* Footer */
.p-foot{border-top:1px solid var(--rule);background:var(--surface)}
.p-foot__in{display:flex;justify-content:space-between;gap:1rem;padding-block:1.4rem;font-size:.8rem;color:var(--ink-40)}
.p-foot__in a:hover{color:var(--indigo)}

@media (max-width:820px){
  .p-dash{grid-template-columns:1fr}
  .p-side{position:static;display:flex;flex-wrap:wrap}
  .p-side .p-status{width:100%}
  .p-side a{border-bottom:0;border-right:1px solid var(--rule-soft)}
  .p-grid2{grid-template-columns:1fr}
  .p-proj{grid-template-columns:64px 1fr;gap:.75rem}
}