:root{
  --navy:#1a2238; --navy-deep:#0f1424; --navy-soft:#2a3148;
  --cream:#f5efe0; --cream-warm:#ebe2cc; --cream-soft:#faf6ec;
  --gold:#c8a96a; --gold-deep:#a48645; --gold-soft:#d8bd85;
  --ink:#2c3142; --ink-soft:#5a5e70;
  --green:#5a8062; --red:#a85a5a; --blue:#4a6b8a;
  --paper:#f0e8d0;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Lora',Georgia,serif; background:var(--cream);
  color:var(--ink); line-height:1.55; overflow:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.35; mix-blend-mode:multiply;
}

/* Layout shell */
.app{display:grid; grid-template-columns:260px 1fr; grid-template-rows:auto 1fr; height:100vh; position:relative; z-index:2}
.topbar{
  grid-column:1/-1; background:var(--navy); color:var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; height:48px; border-bottom:1px solid rgba(200,169,106,0.25);
}
.topbar .left{display:flex; align-items:center; gap:14px; font-family:'Cinzel',serif;
  font-size:11px; letter-spacing:0.35em; text-transform:uppercase;}
.topbar .left .star{color:var(--gold)}
.topbar .right{display:flex; align-items:center; gap:14px}
.status-pill{display:flex; align-items:center; gap:8px;
  font-family:'Cinzel',serif; font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; padding:5px 12px; border:1px solid rgba(200,169,106,0.4);
  border-radius:100px;}
.status-dot{width:7px; height:7px; border-radius:50%; background:var(--gold)}
.status-dot.live{background:#7fc28a; box-shadow:0 0 8px #7fc28a; animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:0.4}}

/* Sidebar */
aside{
  background:var(--navy-deep); color:var(--cream);
  border-right:1px solid rgba(200,169,106,0.2);
  display:flex; flex-direction:column; padding:24px 0;
  overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:12px; padding:0 20px 24px;
  border-bottom:1px solid rgba(200,169,106,0.18); margin-bottom:18px}
.brand img{width:42px; height:42px; object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4))}
.brand-text{font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.18em;
  line-height:1.35; text-transform:uppercase}
.brand-text .gold{color:var(--gold); display:block; font-size:9.5px; letter-spacing:0.3em; margin-top:2px}
.nav-section{padding:0 12px 18px}
.nav-label{font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:0.3em;
  color:var(--gold); text-transform:uppercase; padding:4px 10px 8px;}
.nav-item{display:flex; align-items:center; gap:12px; padding:9px 12px;
  border-radius:3px; cursor:pointer; color:rgba(245,239,224,0.78);
  font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; transition:all .25s; border-left:2px solid transparent;
  white-space:nowrap; overflow:hidden}
.nav-item:hover{background:rgba(255,255,255,0.04); color:var(--cream)}
.nav-item.active{background:rgba(200,169,106,0.12); color:var(--gold);
  border-left-color:var(--gold)}
.nav-item .ico{width:18px; height:18px; display:flex; align-items:center;
  justify-content:center; opacity:0.85; flex-shrink:0}
.nav-badge{margin-left:auto; font-size:9px; padding:2px 7px; border-radius:10px;
  background:var(--gold); color:var(--navy-deep); letter-spacing:0.05em}

/* Main */
main{overflow-y:auto; padding:0; background:var(--cream)}
.page{padding:30px 40px 60px; max-width:1280px}
.page-header{display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:28px; gap:20px; flex-wrap:wrap}
.eyebrow{font-family:'Cinzel',serif; font-size:10px; letter-spacing:0.4em;
  color:var(--gold-deep); text-transform:uppercase; margin-bottom:6px}
.eyebrow::before{content:"✦"; color:var(--gold); margin-right:10px}
.page-title{font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:2.2rem; color:var(--navy); line-height:1.1; letter-spacing:-0.01em}
.page-title em{font-style:italic; color:var(--gold-deep)}
.page-sub{font-family:'Cormorant Garamond',serif; font-style:italic;
  color:var(--ink-soft); font-size:1.05rem; margin-top:4px}

/* Cards */
.grid{display:grid; gap:18px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

.card{background:#fff; border:1px solid rgba(26,34,56,0.1);
  border-radius:3px; padding:22px; position:relative;
  transition:all .3s cubic-bezier(.2,.8,.2,1)}
.card:hover{border-color:var(--gold); transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(26,34,56,0.08)}
.card.dark{background:linear-gradient(145deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--cream); border-color:rgba(200,169,106,0.3)}
.card.dark:hover{border-color:var(--gold)}

.stat-label{font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px}
.card.dark .stat-label{color:var(--gold)}
.stat-value{font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:2.6rem; color:var(--navy); line-height:1; letter-spacing:-0.02em}
.card.dark .stat-value{color:var(--cream)}
.stat-delta{margin-top:10px; font-size:0.85rem; color:var(--ink-soft);
  font-family:'Cinzel',serif; font-size:10px; letter-spacing:0.15em; text-transform:uppercase}
.stat-delta.up{color:var(--green)}
.card.dark .stat-delta{color:rgba(245,239,224,0.7)}

.section-title{font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:1.5rem; color:var(--navy); margin-bottom:14px;
  display:flex; align-items:center; gap:10px}
.section-title em{font-style:italic; color:var(--gold-deep)}
.section-title::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(200,169,106,0.4),transparent)}

/* Tables / lists */
.list-row{display:grid; grid-template-columns:auto 1fr auto auto;
  gap:14px; align-items:center; padding:14px 0;
  border-bottom:1px dashed rgba(26,34,56,0.15)}
.list-row:last-child{border-bottom:0}
.avatar{width:38px; height:38px; border-radius:50%;
  background:var(--navy); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.05em;
  border:2px solid var(--gold); flex-shrink:0}
.avatar.lg{width:56px; height:56px; font-size:14px}
.row-name{font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:1.1rem; color:var(--navy)}
.row-meta{font-size:0.82rem; color:var(--ink-soft);
  font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:0.18em;
  text-transform:uppercase; margin-top:2px}
.tier-badge{padding:4px 10px; border-radius:100px;
  font-family:'Cinzel',serif; font-size:9px; letter-spacing:0.18em;
  text-transform:uppercase; border:1px solid var(--gold);
  color:var(--gold-deep); background:rgba(200,169,106,0.08)}
.founder-badge{display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; background:var(--gold); color:var(--navy-deep);
  font-family:'Cinzel',serif; font-size:8.5px; letter-spacing:0.2em;
  text-transform:uppercase; border-radius:2px}
.verified{color:var(--green); font-size:13px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; font-family:'Cinzel',serif; font-size:10.5px;
  letter-spacing:0.22em; text-transform:uppercase; border:1px solid var(--navy);
  background:var(--navy); color:var(--cream); cursor:pointer;
  border-radius:2px; transition:all .3s; text-decoration:none}
.btn:hover{background:var(--navy-deep); transform:translateY(-1px)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--navy-deep)}
.btn.gold:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:var(--cream)}
.btn.ghost{background:transparent; color:var(--navy)}
.btn.ghost:hover{background:var(--navy); color:var(--cream)}
.btn.sm{padding:6px 12px; font-size:9.5px}

/* Form fields */
.field{margin-bottom:16px}
.field label{display:block; font-family:'Cinzel',serif; font-size:9.5px;
  letter-spacing:0.25em; text-transform:uppercase; color:var(--navy);
  margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; padding:10px 12px; font-family:'Lora',serif; font-size:0.95rem;
  background:var(--cream-soft); border:1px solid rgba(26,34,56,0.2);
  color:var(--ink); border-radius:2px; transition:all .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 3px rgba(200,169,106,0.15)}

/* Dev terminal */
.terminal{background:var(--navy-deep); color:#a8d8a8;
  font-family:'JetBrains Mono','Menlo',monospace; font-size:11px;
  padding:14px 18px; border-radius:3px; height:240px; overflow-y:auto;
  border:1px solid rgba(200,169,106,0.25); line-height:1.55}
.terminal .ts{color:#9aa6c2}
.terminal .meth-GET{color:#82c8ff}
.terminal .meth-POST{color:#ffd07b}
.terminal .meth-PATCH{color:#c79bff}
.terminal .meth-DELETE{color:#ff8a8a}
.terminal .ok{color:#7fd58a}
.terminal .err{color:#ff8a8a}
.terminal .url{color:#e9e2cc}
.terminal-header{display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px; background:#0a0e1a; border:1px solid rgba(200,169,106,0.2);
  border-bottom:0; border-radius:3px 3px 0 0}
.terminal-header .lights{display:flex; gap:6px}
.terminal-header .lights span{width:10px; height:10px; border-radius:50%}
.terminal-header .lbl{font-family:'Cinzel',serif; font-size:9px; letter-spacing:0.3em;
  color:var(--gold); text-transform:uppercase}

/* Modal */
.modal-bg{position:fixed; inset:0; background:rgba(15,20,36,0.7);
  backdrop-filter:blur(4px); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px}
.modal{background:var(--cream-soft); border:1px solid var(--gold);
  border-radius:3px; padding:34px; max-width:520px; width:100%;
  position:relative; box-shadow:0 30px 60px rgba(15,20,36,0.4)}
.modal::before{content:""; position:absolute; inset:8px;
  border:1px solid rgba(200,169,106,0.4); pointer-events:none}
.modal h2{font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:1.7rem; color:var(--navy); margin-bottom:6px}
.modal h2 em{font-style:italic; color:var(--gold-deep)}
.modal-close{position:absolute; top:14px; right:18px; background:none;
  border:0; cursor:pointer; font-size:18px; color:var(--ink-soft)}

/* Misc */
.divider-orn{display:flex; align-items:center; gap:10px; margin:26px 0}
.divider-orn::before,.divider-orn::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,169,106,0.6),transparent)}
.divider-orn .glyph{color:var(--gold); font-size:12px}

.toast{position:fixed; bottom:24px; right:24px; z-index:200;
  background:var(--navy); color:var(--cream); padding:14px 20px;
  border:1px solid var(--gold); border-radius:2px;
  font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:0.2em;
  text-transform:uppercase; box-shadow:0 10px 30px rgba(15,20,36,0.4);
  animation:slide-in .3s ease}
@keyframes slide-in{from{transform:translateY(20px); opacity:0}}

/* Horse cards */
.horse-card{padding:0; overflow:hidden}
.horse-photo{height:140px; display:flex; align-items:center; justify-content:center;
  font-size:60px; border-bottom:1px solid rgba(26,34,56,0.1); position:relative}
.horse-photo.bay{background:linear-gradient(135deg,#8b5a3c,#5e3a25)}
.horse-photo.black{background:linear-gradient(135deg,#3a3a45,#1c1c24)}
.horse-photo.white{background:linear-gradient(135deg,#ece6d6,#c8c0aa)}
.horse-photo.gold{background:linear-gradient(135deg,#d9a85e,#b07e35)}
.horse-photo.grey{background:linear-gradient(135deg,#c8c4bd,#8a8680)}
.horse-info{padding:18px}
.horse-name{font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:1.3rem; color:var(--navy)}
.horse-meta{font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:0.2em;
  color:var(--gold-deep); text-transform:uppercase; margin-top:3px}

/* Forum */
.thread{padding:18px; background:#fff; border:1px solid rgba(26,34,56,0.1);
  border-radius:3px; margin-bottom:12px; transition:all .25s}
.thread:hover{border-color:var(--gold); transform:translateX(2px)}
.thread-title{font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:1.15rem; color:var(--navy); margin-bottom:4px}
.thread-meta{display:flex; gap:12px; font-family:'Cinzel',serif;
  font-size:9.5px; letter-spacing:0.2em; color:var(--gold-deep);
  text-transform:uppercase; margin-top:8px}
.thread-meta .cat{color:var(--gold-deep); font-weight:500}

/* Skeleton */
.skel{background:linear-gradient(90deg,rgba(26,34,56,0.06) 0%,rgba(26,34,56,0.12) 50%,rgba(26,34,56,0.06) 100%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:2px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Login overlay */
.login{position:fixed; inset:0; z-index:300;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  display:flex; align-items:center; justify-content:center; padding:30px}
.login-card{max-width:440px; width:100%; background:var(--cream-soft);
  border:1px solid var(--gold); padding:46px 38px; border-radius:3px;
  position:relative; text-align:center}
.login-card::before{content:""; position:absolute; inset:10px;
  border:1px solid rgba(200,169,106,0.5); pointer-events:none}
.login-logo{width:80px; height:80px; margin:0 auto 18px; display:block}
.login h1{font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:1.7rem; color:var(--navy); margin-bottom:6px}
.login h1 em{font-style:italic; color:var(--gold-deep)}
.login .quick{margin-top:18px; display:flex; flex-direction:column; gap:6px}
.login .quick button{background:transparent; border:1px dashed rgba(26,34,56,0.25);
  color:var(--ink); padding:8px 12px; font-family:'Lora',serif;
  font-size:0.85rem; font-style:italic; cursor:pointer; border-radius:2px;
  transition:all .25s}
.login .quick button:hover{border-color:var(--gold); background:rgba(200,169,106,0.08)}

/* Tag pills */
.pill{display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:100px; font-family:'Cinzel',serif;
  font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase;
  border:1px solid rgba(26,34,56,0.18); color:var(--ink); cursor:pointer;
  transition:all .25s; background:transparent}
.pill:hover{border-color:var(--gold); color:var(--gold-deep)}
.pill.active{background:var(--navy); color:var(--cream); border-color:var(--navy)}

.search-bar{display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid rgba(26,34,56,0.15);
  padding:10px 14px; border-radius:2px; flex:1; max-width:380px}
.search-bar input{flex:1; border:0; background:transparent; outline:0;
  font-family:'Lora',serif; font-size:0.95rem; color:var(--ink)}
.search-bar .ico{color:var(--gold-deep)}

.empty{text-align:center; padding:40px 20px; color:var(--ink-soft);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem}

/* Activity ticker */
.ticker{font-family:'Cinzel',serif; font-size:10px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink-soft); padding:8px 0;
  border-top:1px dashed rgba(26,34,56,0.15);
  border-bottom:1px dashed rgba(26,34,56,0.15); margin-bottom:18px;
  display:flex; align-items:center; gap:12px}
.ticker .live-dot{width:7px; height:7px; border-radius:50%; background:#7fc28a;
  box-shadow:0 0 8px #7fc28a; animation:pulse 1.6s infinite}

/* Tabbar mobile fallback */
@media(max-width:760px){
  .app{grid-template-columns:1fr}
  aside{position:fixed; top:48px; left:-260px; width:260px; height:calc(100vh - 48px);
    transition:left .3s; z-index:60}
  aside.open{left:0}
  .page{padding:20px}
}