/* ── Re-Art Portal Design System ─────────────────────────────────────
   Derived from index.php — same palette, typography, and motifs
   ──────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Rajdhani:wght@300;400;500;600&display=swap');

:root {
  --bg0:#03060d; --bg1:#060c18; --bg2:#0a1422; --bg3:#0f1d30;
  --bice:#c8e8fa; --bsky:#6bb8ef; --bcore:#2a7de1; --bdeep:#1a56b8;
  --gold:#c9a96e; --goldd:rgba(201,169,110,.55);
  --tp:#deedf8;  --ts:#a5c4d9;  --tm:#5a8db3;
  --brd:rgba(42,125,225,.18);
  --brdb:rgba(107,184,239,.45);
  --gi:rgba(200,232,250,.06);
  --fd:'Cormorant Garamond',Georgia,serif;
  --fu:'Rajdhani','Arial Narrow',sans-serif;
  --eo:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: var(--fu);
  background: var(--bg0);
  color: var(--tp);
  line-height: 1.7;
  font-size: 1rem;
  min-height: 100vh;
}

/* ── NEURAL CANVAS (login/register only) ── */
#nc { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.28 }

/* ── NAV ── */
.pnav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 14px clamp(20px,4%,60px);
  display: flex; align-items:center; justify-content:space-between;
  background: rgba(3,6,13,.82); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--brd);
}
.pnav-logo { height:32px; width:auto; mix-blend-mode:screen; filter:brightness(1.05) }
.pnav-logo:hover { filter:brightness(1.3) drop-shadow(0 0 8px var(--bsky)) }
.pnav-right { display:flex; align-items:center; gap:18px }
.pnav-user {
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ts); font-weight:500;
}
.pnav-user em { color:var(--bsky); font-style:normal }

/* ── LAYOUT ── */
.pwrap {
  position: relative; z-index:1;
  max-width: 1100px; margin:0 auto;
  padding: 100px clamp(16px,4%,40px) 60px;
}
.pwrap-narrow { max-width:480px }
.pwrap-mid    { max-width:720px }

/* ── PAGE HEADER ── */
.ph-label {
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px; font-weight:500;
}
.ph-title {
  font-family:var(--fd); font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:300; color:var(--tp); margin-bottom:6px; line-height:1.15;
}
.ph-title em { color:var(--bsky); font-style:italic }
.ph-sub { color:var(--ts); font-size:.88rem; margin-bottom:32px }

/* ── CARDS ── */
.pcard {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: 4px;
  padding: 28px;
  transition: border-color .3s;
}
.pcard:hover { border-color: var(--brdb) }

.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

/* ── ARTWORK CARD ── */
.acard {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--eo);
}
.acard:hover { border-color:var(--brdb); transform:translateY(-3px) }
.acard-img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--bg3); display:block;
}
.acard-img-placeholder {
  width:100%; aspect-ratio:4/3;
  background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  color:var(--tm); font-size:.75rem; letter-spacing:.1em;
}
.acard-body { padding:16px }
.acard-title {
  font-family:var(--fd); font-size:1.1rem; font-weight:400;
  color:var(--tp); margin-bottom:4px;
}
.acard-meta { font-size:.75rem; color:var(--tm); margin-bottom:12px }
.acard-actions { display:flex; gap:8px; flex-wrap:wrap }

/* ── TIER BADGES ── */
.tier-gold   { color:var(--gold);   border-color:var(--goldd) }
.tier-silver { color:#b0c4d8;       border-color:rgba(176,196,216,.4) }
.tier-bronze { color:#cd8a60;       border-color:rgba(205,138,96,.4) }
.tier-badge {
  font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  border: 1px solid; border-radius:2px; padding:2px 8px; font-weight:600;
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--fu); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; font-weight:600;
  padding:9px 20px; border-radius:2px; cursor:pointer;
  text-decoration:none; border:none; transition:all .25s var(--eo);
}
.btn-primary {
  background:var(--bcore); color:#fff;
}
.btn-primary:hover { background:var(--bdeep); color:#fff }
.btn-outline {
  background:transparent; color:var(--bsky);
  border:1px solid var(--bcore);
}
.btn-outline:hover { background:var(--bcore); color:#fff }
.btn-ghost {
  background:transparent; color:var(--tm);
  border:1px solid var(--brd);
}
.btn-ghost:hover { border-color:var(--bsky); color:var(--bsky) }
.btn-danger {
  background:transparent; color:#e57373;
  border:1px solid rgba(229,115,115,.3);
}
.btn-danger:hover { background:rgba(229,115,115,.12) }
.btn-gold {
  background:transparent; color:var(--gold);
  border:1px solid var(--goldd);
}
.btn-gold:hover { background:rgba(201,169,110,.12) }
.btn-sm { padding:6px 14px; font-size:.65rem }
.btn-block { width:100%; justify-content:center }

/* ── FORMS ── */
.fgroup { margin-bottom:20px }
.flabel {
  display:block; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ts); margin-bottom:7px; font-weight:500;
}
.finput, .fselect, .ftextarea {
  width:100%; background:var(--bg1);
  border:1px solid var(--brd); border-radius:2px;
  color:var(--tp); font-family:var(--fu); font-size:.92rem;
  padding:10px 14px; transition:border-color .25s, box-shadow .25s;
  outline:none;
}
.finput:focus, .fselect:focus, .ftextarea:focus {
  border-color:var(--brdb);
  box-shadow:0 0 0 3px rgba(42,125,225,.12);
}
.finput::placeholder { color:var(--tm) }
.ftextarea { resize:vertical; min-height:100px }
.ferr { color:#e57373; font-size:.75rem; margin-top:5px }
.fhint { color:var(--tm); font-size:.72rem; margin-top:5px }

/* ── DIVIDER ── */
.pdiv {
  border:none; border-top:1px solid var(--brd);
  margin:28px 0;
}

/* ── TABLE ── */
.ptable { width:100%; border-collapse:collapse; font-size:.88rem }
.ptable th {
  text-align:left; padding:10px 14px;
  font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tm); border-bottom:1px solid var(--brd); font-weight:500;
}
.ptable td {
  padding:12px 14px;
  border-bottom:1px solid rgba(42,125,225,.08);
  color:var(--ts); vertical-align:middle;
}
.ptable tr:last-child td { border-bottom:none }
.ptable tr:hover td { background:var(--gi) }

/* ── ALERT ── */
.palert {
  padding:12px 16px; border-radius:2px; font-size:.82rem;
  margin-bottom:18px; border-left:3px solid;
}
.palert-err  { background:rgba(229,115,115,.08); border-color:#e57373; color:#e57373 }
.palert-ok   { background:rgba(107,184,239,.08); border-color:var(--bsky); color:var(--bsky) }
.palert-info { background:rgba(201,169,110,.08); border-color:var(--gold); color:var(--gold) }

/* ── AUTH PAGES (login / register) ── */
.auth-wrap {
  position:relative; z-index:1;
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 16px;
}
.auth-logo {
  height:38px; width:auto; mix-blend-mode:screen;
  filter:brightness(1.05); margin-bottom:32px; display:block;
}
.auth-box {
  width:100%; max-width:420px;
  background:var(--bg2); border:1px solid var(--brd);
  border-radius:4px; padding:36px 32px;
}
.auth-title {
  font-family:var(--fd); font-size:1.6rem; font-weight:300;
  color:var(--tp); margin-bottom:4px;
}
.auth-title em { color:var(--bsky); font-style:italic }
.auth-sub { color:var(--tm); font-size:.8rem; margin-bottom:28px }
.auth-foot { margin-top:20px; font-size:.78rem; color:var(--tm); text-align:center }
.auth-foot a { color:var(--bsky); text-decoration:none }
.auth-foot a:hover { text-decoration:underline }

/* ── UPLOAD ZONE ── */
.upload-zone {
  border:1px dashed var(--brd); border-radius:4px;
  padding:28px; text-align:center; cursor:pointer;
  transition:border-color .25s, background .25s; position:relative;
}
.upload-zone:hover, .upload-zone.drag {
  border-color:var(--brdb); background:var(--gi);
}
.upload-zone input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%;
}
.upload-zone-icon { color:var(--tm); margin-bottom:10px }
.upload-zone-text { font-size:.8rem; color:var(--tm) }
.upload-zone-text strong { color:var(--bsky) }

/* ── EXISTING FILE PREVIEW ── */
.file-preview {
  display:flex; align-items:center; gap:12px;
  background:var(--bg3); border:1px solid var(--brd);
  border-radius:4px; padding:12px 16px; margin-top:10px;
}
.file-preview-thumb { width:56px; height:40px; object-fit:cover; border-radius:2px }
.file-preview-name { font-size:.8rem; color:var(--ts); flex:1 }

/* ── SEARCH BAR ── */
.psearch { display:flex; gap:10px; margin-bottom:20px }
.psearch .finput { flex:1 }

/* ── EMPTY STATE ── */
.pempty {
  text-align:center; padding:48px 24px;
  color:var(--tm); font-size:.88rem;
}
.pempty-icon { font-size:2rem; margin-bottom:12px; opacity:.4 }

/* ── FOOTER ── */
.pfooter {
  text-align:center; padding:20px;
  font-size:.72rem; color:var(--tm);
  border-top:1px solid var(--brd); margin-top:40px;
}

/* ── RESPONSIVE ── */
@media(max-width:767px) {
  .pcard-grid { grid-template-columns:1fr }
  .auth-box { padding:28px 20px }
  .acard-actions { flex-direction:column }

  /* nav: stack logo on top, buttons below */
  .pnav {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px 12px;
    gap: 8px;
  }
  .pnav-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .pnav-user { display: none }

  /* push page content below the taller two-row nav */
  .pwrap { padding-top: 110px }
}