/* AICO Client Portal - brand system */
:root{
  --black:#000; --white:#fff; --gray:#999; --line:#222;
  --rose:#E07E8E; --rose-ink:#2a0e13;
  --panel:#0a0a0a; --panel2:#111;
  --green:#7fbf8e; --green-ink:#0d2013;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark}
body{
  background:var(--black); color:var(--white);
  font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:1.55;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit}

h1,h2,h3,.display{
  font-family:'Big Shoulders Display',sans-serif;
  text-transform:uppercase; letter-spacing:.02em; font-weight:700;
}
.mono, .eyebrow, .badge, .tab, .btn, label, th{
  font-family:'Space Mono',monospace;
}
.eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gray)}

/* ---- header ---- */
.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(0,0,0,.92); backdrop-filter:blur(8px); z-index:50;
}
.brand{font-family:'Big Shoulders Display',sans-serif; font-size:26px; font-weight:800; letter-spacing:.06em}
.brand span{color:var(--rose)}
.top .who{display:flex; align-items:center; gap:18px; font-size:12px; color:var(--gray)}
.top .who form{display:inline}
.navlinks{display:flex; gap:6px}
.navlinks a{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border:1px solid transparent; border-radius:999px; color:var(--gray);
}
.navlinks a.on{color:var(--white); border-color:var(--line); background:var(--panel2)}
.navlinks a:hover{color:var(--white)}

/* ---- layout ---- */
.wrap{max-width:1280px; margin:0 auto; padding:36px 32px 90px}
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.pagehead h1{font-size:44px; line-height:1}
.pagehead .sub{color:var(--gray); margin-top:6px; font-size:14px}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel2); color:var(--white); transition:.15s;
}
.btn:hover{border-color:var(--gray)}
.btn.primary{background:var(--rose); border-color:var(--rose); color:var(--rose-ink); font-weight:700}
.btn.green{background:var(--green); border-color:var(--green); color:var(--green-ink); font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.small{padding:7px 14px; font-size:11px}
.btn.danger:hover{border-color:#c0392b; color:#e57368}

/* ---- tabs ---- */
.tabs{display:flex; gap:4px; flex-wrap:wrap}
.tab{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; color:var(--gray); border:1px solid transparent;
}
.tab.on{background:var(--rose); color:var(--rose-ink); font-weight:700}
.tab:not(.on):hover{border-color:var(--line); color:var(--white)}

/* ---- badges ---- */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; border:1px solid var(--line); color:var(--gray);
}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.rose{background:var(--rose); border-color:var(--rose); color:var(--rose-ink); font-weight:700}
.badge.roseline{border-color:var(--rose); color:var(--rose)}
.badge.white{border-color:rgba(127,191,142,.55); color:#ddd}
.badge.white::before{background:var(--green); box-shadow:0 0 7px var(--green)}
.badge.gray{color:var(--gray)}
.badge.green{background:var(--green); border-color:var(--green); color:var(--green-ink); font-weight:700}
.badge.yellow{background:#E5D08F; border-color:#E5D08F; color:#2a2208; font-weight:700}
.badge.blue{background:#A9C2E0; border-color:#A9C2E0; color:#101c2b; font-weight:700}
.badge.peach{background:#EBB79A; border-color:#EBB79A; color:#2b160a; font-weight:700}

/* ---- "How are we doing?" stars ---- */
.pulse{position:relative; border:none; padding:0}
.pulse summary{list-style:none; cursor:pointer; color:var(--rose)}
.pulse summary::-webkit-details-marker{display:none}
.pulse summary:hover{text-decoration:underline}
.stars{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:3px}
.stars input{display:none}
.stars label{font-size:26px; line-height:1; color:#3a3a3a; cursor:pointer; transition:color .15s}
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label{color:var(--rose)}

/* ---- card grid (Ember-style) ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px}
.card{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel);
  transition:.15s; position:relative; display:flex; flex-direction:column;
}
.card:hover{border-color:#444; transform:translateY(-2px)}
.card .thumb{
  aspect-ratio:16/10; background:var(--panel2); display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-bottom:1px solid var(--line);
}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .thumb .ph{font-family:'Big Shoulders Display',sans-serif; font-size:40px; color:#2a2a2a; font-weight:800}
.card .body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
.card .name{font-weight:600; font-size:15px; font-family:'Inter',sans-serif; line-height:1.35}
.card .meta{display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--gray); font-family:'Space Mono',monospace; margin-top:auto}
.card .attention{position:absolute; top:12px; left:12px; width:10px; height:10px; border-radius:50%; background:var(--rose); box-shadow:0 0 12px var(--rose)}

/* ---- panels & forms ---- */
.panel{border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:24px}
.panel h2{font-size:22px; margin-bottom:14px}
label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); margin:16px 0 7px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],textarea,select{
  width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  color:var(--white); padding:12px 14px; outline:none; transition:.15s;
}
input:focus,textarea:focus,select:focus{border-color:var(--rose)}
textarea{min-height:110px; resize:vertical}
.formrow{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:700px){.formrow{grid-template-columns:1fr}}

.dropzone{
  border:1px dashed #333; border-radius:10px; padding:18px; color:var(--gray);
  font-size:13px; display:flex; align-items:center; gap:12px; margin-top:8px;
}
.dropzone input{border:none; background:none; padding:0; color:var(--gray); width:auto}

/* ---- stat tiles ---- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:30px}
.stat{border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--panel)}
.stat .n{font-family:'Big Shoulders Display',sans-serif; font-size:44px; font-weight:800; line-height:1}
.stat.hot{border-color:var(--rose)}
.stat.hot .n{color:var(--rose)}
.stat .l{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); font-family:'Space Mono',monospace; margin-top:4px}

/* ---- review banner ---- */
.reviewbar{
  border:1px solid var(--rose); background:linear-gradient(90deg, rgba(224,126,142,.14), transparent 70%);
  border-radius:12px; padding:20px 24px; margin-bottom:26px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.reviewbar .t{font-family:'Big Shoulders Display',sans-serif; font-size:24px; text-transform:uppercase}
.reviewbar .roundinfo{font-family:'Space Mono',monospace; font-size:12px; color:var(--gray)}
.reviewbar .roundinfo b{color:var(--rose)}

/* ---- asset gallery ---- */
.assets{display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:26px}
@media(max-width:860px){.assets{grid-template-columns:1fr}}
.asset{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
.asset .media{background:#050505; display:flex; align-items:center; justify-content:center; min-height:200px}
.asset .media img{width:100%; cursor:zoom-in}
.asset .media video{width:100%}
.asset .info{padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line)}
.asset .fname{font-family:'Space Mono',monospace; font-size:11px; color:var(--gray); word-break:break-all}
.asset .thread{border-top:1px solid var(--line); padding:14px 16px; display:flex; flex-direction:column; gap:10px}

/* ---- comments ---- */
.comment{border-left:2px solid var(--line); padding:6px 12px; font-size:13px}
.comment.draft{border-left-color:var(--rose)}
.comment .by{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin-bottom:2px}
.comment .by .tagdraft{color:var(--rose)}
.comment .reply{margin-top:8px; padding:8px 12px; background:var(--panel2); border-radius:8px; font-size:13px}
.comment .reply .by{color:var(--rose)}
.commentform{display:flex; gap:8px}
.commentform textarea{min-height:44px; flex:1}
.commentform .btn{align-self:flex-end}

/* ---- sticky submit bar ---- */
.submitbar{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:rgba(0,0,0,.95); border-top:1px solid var(--rose);
  padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.submitbar .info{font-family:'Space Mono',monospace; font-size:12px; color:var(--gray)}
.submitbar .info b{color:var(--white)}

/* ---- tables ---- */
table{width:100%; border-collapse:collapse}
th{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
td{padding:12px; border-bottom:1px solid #161616; font-size:13px; vertical-align:middle}
tr:hover td{background:#0d0d0d}

/* ---- login ---- */
.loginwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(ellipse at 30% 20%, rgba(224,126,142,.08), transparent 55%), var(--black)}
.loginbox{width:100%; max-width:400px; border:1px solid var(--line); border-radius:16px; padding:44px 40px; background:var(--panel)}
.loginbox .brand{font-size:38px; margin-bottom:2px}
.loginbox .eyebrow{margin-bottom:26px}
.loginbox .btn{width:100%; justify-content:center; margin-top:24px}
.error{color:var(--rose); font-size:13px; margin-top:14px}

/* ---- misc ---- */
.muted{color:var(--gray)} .small{font-size:12px}
.spread{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:18px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
hr{border:none; border-top:1px solid var(--line); margin:26px 0}
details{border:1px solid var(--line); border-radius:10px; padding:14px 18px}
details summary{cursor:pointer; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray)}
details[open] summary{margin-bottom:12px}

/* pinned comments */
.pin{
  position:absolute; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%;
  background:var(--rose); color:var(--rose-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.6); cursor:default; z-index:5;
}
.pinchip{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background:var(--rose); color:var(--rose-ink); font-size:10px; font-weight:700;
}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:100; display:none; align-items:center; justify-content:center; padding:30px; cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain}