/* UpgradeIt — shared identity: deep blue base, silver type, vivid cyan/amber accents */
:root{
  --bg:#081226; --bg2:#0c1e42; --panel:#10254f; --panel2:#14305f;
  --ink:#eef3fb; --muted:#a9bcd9; --silver:#cfd9ea;
  --cyan:#2fd4ff; --blue:#3f8cff; --amber:#ffb340; --green:#3ddc84;
  --line:rgba(160,190,235,.18); --radius:16px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(47,212,255,.14), transparent 60%),
    radial-gradient(900px 480px at -10% 20%, rgba(63,140,255,.12), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg) 100%);
  min-height:100vh;
}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}

/* header */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(8,18,38,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; gap:14px; padding-top:10px; padding-bottom:10px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:44px; height:44px; border-radius:10px; object-fit:cover; box-shadow:0 4px 14px rgba(0,0,0,.5)}
.brand .name{font-size:1.25rem; font-weight:800; letter-spacing:.4px}
.brand .name b{color:var(--cyan)}
.brand .tag{display:block; font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:1.6px; text-transform:uppercase}
nav.main{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
nav.main a{
  color:var(--silver); font-weight:600; font-size:.95rem; padding:8px 12px; border-radius:10px;
}
nav.main a:hover{background:rgba(63,140,255,.15); text-decoration:none; color:#fff}
nav.main a.here{background:rgba(47,212,255,.16); color:#fff}
.btn{
  display:inline-block; border:0; cursor:pointer; font-weight:700; font-size:1rem;
  padding:12px 22px; border-radius:12px; color:#04122b;
  background:linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow:0 8px 22px rgba(47,140,255,.35);
}
.btn:hover{filter:brightness(1.08); text-decoration:none}
.btn.amber{background:linear-gradient(90deg, var(--amber), #ff8a3c); box-shadow:0 8px 22px rgba(255,150,60,.3)}
.btn.ghost{background:transparent; color:var(--cyan); border:1px solid rgba(47,212,255,.5); box-shadow:none}
.btn.small{padding:8px 14px; font-size:.9rem}

/* hero */
.hero{padding:64px 0 40px; text-align:left}
.hero h1{font-size:2.6rem; line-height:1.12; margin:0 0 14px}
.hero h1 .hl{color:var(--cyan)}
.hero p.lead{font-size:1.15rem; color:var(--muted); max-width:720px; margin:0 0 26px; line-height:1.55}
.kicker{color:var(--amber); font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:.78rem; margin-bottom:12px}

/* sections & cards */
section.block{padding:34px 0}
section.block h2{font-size:1.7rem; margin:0 0 8px}
section.block .sub{color:var(--muted); margin:0 0 22px; max-width:760px; line-height:1.55}
.grid{display:grid; gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr} .hero h1{font-size:2rem}}
.card{
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow);
}
.card h3{margin:0 0 8px; font-size:1.12rem}
.card p{color:var(--muted); line-height:1.55; margin:0}
.card .icon{font-size:1.7rem; margin-bottom:10px}
.pill{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--silver);
}
.pill.sample{color:#ffd9a0; border-color:rgba(255,179,64,.5); background:rgba(255,179,64,.08)}
.pill.new{color:#8ff5bb; border-color:rgba(61,220,132,.5); background:rgba(61,220,132,.08)}
.pill.prog{color:#aee6ff; border-color:rgba(47,212,255,.5); background:rgba(47,212,255,.08)}
.pill.done{color:#c9d6ee; background:rgba(160,190,235,.1)}

/* mission / goals */
.mission{
  font-size:1.18rem; line-height:1.65; color:var(--ink);
  border-left:4px solid var(--cyan); padding:6px 0 6px 20px; margin:0;
}
ul.goals{list-style:none; margin:0; padding:0}
ul.goals li{
  padding:12px 0 12px 34px; position:relative; color:var(--muted); line-height:1.5;
  border-bottom:1px dashed var(--line);
}
ul.goals li:last-child{border-bottom:0}
ul.goals li::before{content:"▸"; position:absolute; left:8px; color:var(--cyan); font-weight:900}
ul.goals li b{color:var(--ink)}

/* owner */
.owner{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.owner img.portrait{
  width:170px; height:170px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(47,212,255,.55); box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.owner .bio{flex:1; min-width:260px}
.owner .bio h3{margin:0 0 4px; font-size:1.35rem}
.owner .bio .role{color:var(--amber); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:.8rem; margin-bottom:10px}
.owner .bio p{color:var(--muted); line-height:1.6; margin:0}

/* products */
.product .thumb{
  height:130px; border-radius:12px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; font-size:3rem;
  background:radial-gradient(300px 140px at 50% 0%, rgba(47,212,255,.22), transparent), linear-gradient(160deg,#173a75,#0d2148);
  border:1px solid var(--line);
}
.product .price{font-size:1.3rem; font-weight:800; color:#fff; margin:8px 0 4px}
.product .seller{color:var(--muted); font-size:.88rem; margin-bottom:12px}
.product .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* forms */
form.req{display:grid; gap:14px; max-width:680px}
form.req label{font-weight:700; font-size:.92rem; display:block; margin-bottom:6px}
form.req input, form.req select, form.req textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:#0a1a38; color:var(--ink); font-size:1rem; font-family:inherit;
}
form.req input:focus, form.req select:focus, form.req textarea:focus{outline:2px solid rgba(47,212,255,.5)}
form .two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:600px){form .two{grid-template-columns:1fr}}
.notice{
  border:1px solid rgba(255,179,64,.45); background:rgba(255,179,64,.08);
  border-radius:12px; padding:12px 16px; color:#ffe1ae; font-size:.95rem; line-height:1.5;
}
.ok{
  border:1px solid rgba(61,220,132,.45); background:rgba(61,220,132,.08);
  border-radius:12px; padding:12px 16px; color:#b9f6d4; line-height:1.5;
}

/* modal + toast */
.modal-back{
  position:fixed; inset:0; background:rgba(3,8,20,.72); display:none;
  align-items:center; justify-content:center; z-index:100; padding:18px;
}
.modal-back.open{display:flex}
.modal{
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--line); border-radius:18px; padding:24px; max-width:480px; width:100%;
  box-shadow:var(--shadow);
}
.modal h3{margin-top:0}
.modal form{display:grid; gap:12px}
.modal input, .modal textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line);
  background:#0a1a38; color:var(--ink); font-size:1rem; font-family:inherit;
}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(80px);
  background:#0e2c1e; color:#b9f6d4; border:1px solid rgba(61,220,132,.55);
  padding:12px 20px; border-radius:12px; font-weight:700; opacity:0; transition:.3s; z-index:200;
  box-shadow:var(--shadow); max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* admin table */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.toolbar .btn.small[aria-pressed="true"]{filter:brightness(1.2); outline:2px solid rgba(255,255,255,.35)}
table.inbox{width:100%; border-collapse:collapse; font-size:.95rem}
table.inbox th, table.inbox td{padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
table.inbox th{color:var(--silver); font-size:.78rem; letter-spacing:1px; text-transform:uppercase}
table.inbox td .d{color:var(--muted); font-size:.88rem; line-height:1.45}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
@media (max-width:700px){.statgrid{grid-template-columns:repeat(2,1fr)}}
.stat{background:linear-gradient(180deg, var(--panel2), var(--panel)); border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center}
.stat .n{font-size:1.8rem; font-weight:800}
.stat .l{color:var(--muted); font-size:.82rem; letter-spacing:1px; text-transform:uppercase; font-weight:700}

/* footer */
footer.site{border-top:1px solid var(--line); margin-top:40px; padding:28px 0 40px; color:var(--muted)}
footer.site .cols{display:flex; gap:34px; flex-wrap:wrap}
footer.site b{color:var(--ink)}
footer.site ul{list-style:none; padding:0; margin:8px 0 0}
footer.site li{margin:5px 0}
.samplebar{
  background:linear-gradient(90deg, rgba(255,179,64,.18), rgba(255,138,60,.12));
  border-bottom:1px solid rgba(255,179,64,.4); color:#ffe1ae;
  font-size:.88rem; font-weight:600; text-align:center; padding:7px 12px;
}