/* Shape & Shine — Public Theme (dark, luxe, soft-gold accent)
   Works for homepage + product page. */

:root{
  --bg:#0f1115;
  --fg:#e9ecf2;
  --mut:#9aa3b2;
  --line:#222632;
  --card:#141820;
  --accent:#d6b35a;       /* soft gold */
  --accent-d:#b58c2e;
  --ok:#6ee7b7;
  --warn:#facc15;
  --err:#ef4444;
  --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
html, body { overflow-x:hidden; } /* no sideways scroll */
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Shell */
.shell{display:flex; min-height:100vh}
.sidebar{
  width:260px; background:var(--card); color:var(--fg); padding:16px;
  border-right:1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.sidebar .brand{font-weight:800; letter-spacing:.2px; margin-bottom:8px}
.sidebar a{display:block; color:var(--fg); text-decoration:none; padding:10px; border-radius:10px}
.sidebar a:hover{background:rgba(255,255,255,.05)}
.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  max-width:1100px; margin:0 auto; padding:14px 18px 0;
  border-bottom:1px solid var(--line);
  background:rgba(15,17,21,.7);
  backdrop-filter: blur(10px);
}
.topbar .brand{font-weight:900}
.burger{display:none}
@media(max-width:1000px){
  /* Off-canvas: keep sidebar out of layout; no page-width jump */
  .sidebar{
    position:fixed; left:-260px; top:0; height:100vh; z-index:1000;
    transition:left .25s ease;
  }
  .sidebar.open{ left:0; }
  .burger{
    display:inline-block; border:1px solid var(--line); border-radius:10px; padding:8px 12px;
    background:rgba(255,255,255,.06); color:var(--fg)
  }
}

/* Optional scrim if you add <div id="scrim" class="scrim"></div> in HTML */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:900; display:none; }
.scrim.show{ display:block; }

/* Blocks */
.container{max-width:1100px; margin:0 auto; padding:0 18px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin:12px 0
}
.hero h1{font-size:28px; margin:0 0 6px}
.lead{color:var(--mut); margin:0 0 12px}

/* Forms */
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:12px;
  background:#0d1015; color:var(--fg)
}
button{
  padding:12px 16px; border:0; border-radius:12px; font-weight:700; color:#171717;
  background:linear-gradient(135deg, var(--accent), var(--accent-d)); cursor:pointer
}
button:hover{filter:brightness(1.05)}
button.linkish{
  background:rgba(255,255,255,.06); color:var(--fg); border:1px solid var(--line)
}

/* Grid helpers */
.grid{display:grid; gap:12px}
@media(min-width:900px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

.notice{padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03)}
.mut{color:var(--mut); font-size:13px}

.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--fg); font-weight:700; font-size:12px;
  border:1px solid var(--line)
}

/* Progress */
.progress{height:8px; background:#151922; border:1px solid #1e2330; border-radius:999px; overflow:hidden}
.progress > div{height:8px; background:linear-gradient(90deg, var(--accent), var(--accent-d))}

/* Status */
.status{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.03); font-weight:700
}
.status .dot{width:8px; height:8px; border-radius:4px; display:inline-block}
.status.pending .dot{background:#64748b}
.status.in_progress .dot{background:var(--warn)}
.status.done .dot{background:var(--ok)}
.status.skipped .dot{background:#475569}
.status.blocked .dot{background:var(--err)}

/* Step card (product page) */
.step{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#0b0d10}
.step .hd{
  padding:12px 14px; display:flex; align-items:center; gap:12px; justify-content:space-between;
  background:rgba(255,255,255,.02); border-bottom:1px solid var(--line)
}
.step .ct{padding:12px 14px}
.step .title{font-weight:800}
.step .meta{color:var(--mut); font-size:13px; margin-top:6px; line-height:1.4}
.media{margin-top:10px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0d1116}
.media img, .media video{display:block; width:100%; height:auto}

/* Tables (if any on public pages) */
table{width:100%; border-collapse:collapse; color:var(--fg)}
th, td{border-bottom:1px solid var(--line); padding:10px; text-align:left}
th{color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.04em}

/* Links */
a{color:inherit}
a:hover{opacity:.9}

/* Cookie bar — Life subdomain */
.cookie-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 9999;

  max-width: 780px;
  width: calc(100% - 32px);
  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.6);
  backdrop-filter: blur(10px);

  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;

  color: #e5e7eb;
  font-size: 13px;
}

.cookie-bar--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.cookie-bar--hide {
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
}

.cookie-bar__icon {
  font-size: 18px;
  flex-shrink: 0;
}

.cookie-bar__text {
  flex: 1 1 180px;
  color: #cbd5f5;
}

.cookie-bar__text a {
  color: #93c5fd;
  text-decoration: underline;
}

.cookie-bar__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.cookie-btn--primary {
  background: #2563eb;
  color: #f9fafb;
}
.cookie-btn--primary:hover {
  background: #1d4ed8;
}

.cookie-btn--secondary {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.8);
}
.cookie-btn--secondary:hover {
  background: rgba(15, 23, 42, 0.8);
}