:root{
  --bg:#F6F5F1;
  --panel:#FFFFFF;
  --line:#E4E1D8;
  --ink:#1B1B1D;
  --muted:#78766D;
  --sidebar-bg:#17181C;
  --sidebar-line:#2A2C32;
  --sidebar-text:#C7C8CE;

  /* category accents */
  --c-text:#B33A34;
  --c-security:#28A97A;
  --c-time:#B8862F;
  --c-math:#3457B2;
  --c-design:#6C4CE0;

  --accent: var(--c-text);
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:'JetBrains Mono',Consolas,monospace;}

/* ---------- SHELL ---------- */
.shell{
  display:flex;
  min-height:100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:250px;
  flex-shrink:0;
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:36px;
  padding:0 4px;
}
.brand-mark{
  font-size:22px;
  color:var(--accent);
}
.brand-name{
  font-weight:700;
  font-size:16px;
  color:#fff;
  letter-spacing:-.01em;
}
.brand-sub{
  font-size:11px;
  color:#83858D;
  margin-top:2px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:transparent;
  border:none;
  color:var(--sidebar-text);
  text-align:left;
  font-family:inherit;
  font-size:13.5px;
  padding:11px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.nav-item:hover{
  background:#1F2127;
  color:#fff;
}
.nav-item.active{
  background:#22242B;
  color:#fff;
  font-weight:600;
}

.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}
.dot-text{background:var(--c-text);}
.dot-security{background:var(--c-security);}
.dot-time{background:var(--c-time);}
.dot-math{background:var(--c-math);}
.dot-design{background:var(--c-design);}

.sidebar-foot{
  margin-top:auto;
  font-size:11px;
  color:#5C5E66;
  line-height:1.6;
  padding-top:24px;
  border-top:1px solid var(--sidebar-line);
}

/* ---------- CONTENT ---------- */
.content{
  flex:1;
  padding:48px 44px 80px;
  max-width:1180px;
}

.panel{display:none;}
.panel.active{display:block;}

.panel-head{
  margin-bottom:32px;
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 10px;
  font-weight:600;
}

.panel-head h1{
  font-size:34px;
  margin:0 0 8px;
  font-weight:700;
  letter-spacing:-.01em;
}

.panel-head .lede{
  color:var(--muted);
  font-size:14.5px;
  max-width:560px;
  margin:0;
  line-height:1.6;
}

/* ---------- GRID / TOOL CARDS ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}

.tool{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 22px 24px;
  position:relative;
}

.tool::before{
  content:attr(data-id);
  position:absolute;
  top:16px; right:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--line);
  font-weight:600;
}

.tool h2{
  font-size:17px;
  margin:0 0 4px;
  font-weight:700;
}

.tool .desc{
  font-size:12.5px;
  color:var(--muted);
  margin:0 0 16px;
  line-height:1.5;
}

label{
  display:block;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:12px 0 6px;
  font-weight:600;
}

textarea, input[type=text], input[type=number], input[type=date],
input[type=datetime-local], select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--ink);
  padding:9px 11px;
  border-radius:8px;
  font-family:inherit;
  font-size:13.5px;
}
textarea{min-height:100px; resize:vertical; font-family:'JetBrains Mono',monospace; font-size:13px;}

input[type=color]{
  width:100%;
  height:44px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  background:var(--bg);
}

input[type=range]{width:100%;}

.checks{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.checks label{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  font-size:12.5px;
  color:var(--ink);
}

button{
  margin-top:16px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  padding:10px 16px;
  cursor:pointer;
  transition:opacity .15s, transform .1s;
}
button:hover{opacity:.87;}
button:active{transform:scale(.98);}

button.secondary{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
}
button.secondary:hover{background:color-mix(in srgb, var(--accent) 10%, transparent);}

.row{display:flex;gap:8px;flex-wrap:wrap;}
.row button{margin-top:10px;}

.row-tight{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.output{
  margin-top:14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 13px;
  font-size:13.5px;
  min-height:20px;
  word-break:break-word;
  white-space:pre-wrap;
}

.stats{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--muted);
}
.stats div span{
  display:block;
  font-size:19px;
  color:var(--accent);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
}

.swatch{
  width:100%;
  height:56px;
  border-radius:8px;
  margin-top:12px;
  border:1px solid var(--line);
  background:var(--bg);
}

.swatch-row{
  display:flex;
  margin-top:14px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
}
.swatch-row div{
  flex:1;
  height:60px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:6px;
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

.drop-zone{
  border:2px dashed var(--line);
  border-radius:10px;
  padding:22px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.drop-zone:hover{border-color:var(--accent);color:var(--accent);}

#ic-preview{
  max-width:100%;
  margin-top:12px;
  border-radius:8px;
  display:none;
}

#ic-download{
  display:none;
  margin-top:10px;
  color:var(--accent);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

.timer-display{
  font-family:'JetBrains Mono',monospace;
  font-size:32px;
  font-weight:700;
  color:var(--accent);
  text-align:center;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}

/* ---------- CALCULATOR ---------- */
.calc-display{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  font-size:26px;
  text-align:right;
  word-break:break-all;
  min-height:20px;
}
.keypad{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-top:12px;
}
.keypad button{
  margin-top:0;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  font-size:15px;
  padding:12px 0;
  font-family:'JetBrains Mono',monospace;
}
.keypad button.op{color:var(--accent);}
.keypad button.eq{background:var(--accent);color:#fff;grid-column:span 2;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px){
  .shell{flex-direction:column;}
  .sidebar{
    width:100%;
    height:auto;
    position:relative;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    padding:18px 16px;
  }
  .brand{margin-bottom:0; margin-right:12px;}
  .nav{
    flex-direction:row;
    flex-wrap:wrap;
    flex:1;
  }
  .sidebar-foot{display:none;}
  .content{padding:32px 20px 60px;}
}

/* ---------- ACCESSIBILITY ---------- */
button:focus-visible, .nav-item:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

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