:root{
  --rose:#d61c77;
  --rose-strong:#d61c77;
  --rose-soft:rgba(214,28,119,0.14);

  --icon:var(--rose-strong);

  --ink:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.64);

  --bg:#0a0f1a;
  --card:rgba(255,255,255,0.06);

  --border:1px solid rgba(255,255,255,0.10);
  --shadow:0 18px 48px rgba(0,0,0,0.42);
  --glow:0 0 0 10px rgba(214,28,119,0.12);
  --radius:18px;

  --success:#2ecc71;
  --error:#ff5c7a;
}

html{color-scheme:dark;}

*{box-sizing:border-box;}
[hidden]{display:none !important;}

html,body{height:100%;}
body{
  margin:0;
  font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.page{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 15%, rgba(214,28,119,0.20), transparent 35%),
    radial-gradient(circle at 85% 0%, rgba(214,28,119,0.12), transparent 40%),
    radial-gradient(circle at 50% 105%, rgba(255,255,255,0.06), transparent 40%),
    linear-gradient(180deg, #0a0f1a 0%, #0b1220 100%);
}

.container{width:min(1120px,calc(100% - 36px));margin:0 auto;}

header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(14px);
  background:rgba(10,15,26,0.70);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce){
  header{transition:none !important;}
}

@media (max-width:560px){
  html.topbar-hidden header{transform:translateY(-110%);}
}

.topbar{
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
/* Default: never show the mobile menu toggle (overrides .btn display). */
.topbar-toggle{display:none !important;}

.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:0.2px;color:var(--ink);text-decoration:none;}
.brand-mark{width:40px;height:40px;background:transparent;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:700;}

.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

.btn{
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.btn .icon{margin:0;}
.btn-primary{background:linear-gradient(135deg,var(--rose-strong),var(--rose));color:#fff;box-shadow:0 20px 70px rgba(214,28,119,0.18);}
.btn-primary .icon{filter:brightness(0) invert(1);}
.btn-ghost{background:rgba(255,255,255,0.06);color:var(--ink);border:var(--border);box-shadow:0 14px 34px rgba(0,0,0,0.22);}
.btn-danger{background:rgba(255,92,122,0.12);color:var(--error);border:1px solid rgba(255,92,122,0.26);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(-1px);}
input,select,textarea{color:var(--ink);}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.42);}
input,select,textarea{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
}

select option, select optgroup{background:var(--bg);color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(214,28,119,0.55);box-shadow:var(--glow);}

a{color:var(--rose-strong);}
a:not(.btn):hover,a:not(.btn):focus{color:rgba(214,28,119,0.92);}

.muted{color:var(--muted);font-weight:700;}

.alert{margin:12px 0;padding:12px 14px;border-radius:12px;font-weight:800;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);}
.alert-success{background:rgba(46,204,113,0.12);color:var(--success);border:1px solid rgba(46,204,113,0.22);}
.alert-error{background:rgba(255,92,122,0.12);color:var(--error);border:1px solid rgba(255,92,122,0.22);}

.card,.mast,.hero,.form,.filter-card,.kpi,.item,.empty-state,.thumb,.chip,.modal-card,.photo-card{
  background:var(--card);
  border:var(--border);
  box-shadow:var(--shadow);
}

.card{border-radius:22px;padding:18px;}
.mast,.hero{border-radius:22px;}
.filter-card{border-radius:18px;padding:14px;}
.form{border-radius:20px;}

.badge,.photo-badge{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--rose-strong);
  box-shadow:0 18px 48px rgba(0,0,0,0.30);
}

.mini-btn{background:rgba(255,255,255,0.06);color:var(--ink);border:var(--border);}
.ac-panel{background:rgba(10,15,26,0.92);border:1px solid rgba(255,255,255,0.12);box-shadow:var(--shadow);}

img,svg,video{max-width:100%;height:auto;}

button,input,select,textarea{font:inherit;}

@media (max-width:560px){
  .topbar{flex-direction:column;align-items:stretch;}
  .topbar-row{width:100%;}
  .brand{justify-content:flex-start;}
  .topbar-toggle{display:inline-flex !important;flex:0 0 auto;justify-content:center;}
  header .actions{width:100%;justify-content:stretch;}
  header .actions .btn{width:100%;justify-content:center;}
  /* Collapsible actions on mobile (opened via the Menu button). */
  .topbar .actions{display:none;}
  .topbar.is-open .actions{display:flex;}
}

.container.narrow{width:min(920px,calc(100% - 36px));}

footer{
  padding:24px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
footer a,footer a:visited{color:var(--ink);opacity:0.9;text-decoration:none;}
footer a:hover,footer a:focus{opacity:1;text-decoration:none;}