:root{
  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-2:#fafafa;
  --line:#e5e7eb;
  --line-strong:#d1d5db;
  --text:#111827;
  --muted:#6b7280;
  --accent:#2563eb;
  --accent-soft:#eff6ff;
  --success:#166534;
  --danger:#b91c1c;
  --radius:16px;
  --radius-sm:12px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0d10;
    --surface:#111418;
    --surface-2:#171b21;
    --line:#242a33;
    --line-strong:#343b46;
    --text:#f3f4f6;
    --muted:#9ca3af;
    --accent:#60a5fa;
    --accent-soft:#122033;
    --success:#4ade80;
    --danger:#f87171;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="datetime-local"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="date"],
input[type="time"],
textarea,
select{
  width:100%;
  padding:.82rem .9rem;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input[type="file"]{
  width:100%;
  padding:.65rem .75rem;
  border:1px dashed var(--line-strong);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--muted);
}

input[type="color"]{
  width:100%;
  min-width:56px;
  height:44px;
  padding:4px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:var(--surface);
}

input[type="range"]{
  width:100%;
  accent-color:var(--accent);
}

input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

textarea{
  min-height:140px;
  resize:vertical;
}
.small{min-height:92px}
.output{min-height:180px}

button{
  appearance:none;
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--text);
  padding:.75rem .9rem;
  border-radius:12px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .05s ease;
}
button:hover{border-color:var(--accent)}
button:active{transform:translateY(1px)}
.primary{
  background:var(--text);
  color:var(--surface);
  border-color:var(--text);
  font-weight:600;
}
.primary:hover{
  background:var(--accent);
  border-color:var(--accent);
}
.chip{
  background:transparent;
  text-align:left;
}
.chip.is-active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}

.actions, .toolbar-actions, .chips{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}
.actions label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--muted);
  padding:.3rem 0;
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.app-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  min-height:100vh;
}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:24px;
  border-right:1px solid var(--line);
  background:var(--surface);
  overflow:auto;
}
.logo{
  display:inline-block;
  text-decoration:none;
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:.5rem;
}
.sidebar__text{
  margin:0 0 1rem;
  color:var(--muted);
}
.search-wrap{
  display:block;
  margin-bottom:1rem;
}
.sidebar__section{
  margin-bottom:1rem;
}
.sidebar__label{
  font-size:.86rem;
  color:var(--muted);
  margin-bottom:.5rem;
}
.chips--stack{
  flex-direction:column;
}
.chips--stack .chip{
  width:100%;
}
.sidebar__meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:1rem;
}
.meta-box{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  padding:.9rem;
}
.meta-box strong{
  display:block;
  font-size:1.2rem;
}
.meta-box span{
  color:var(--muted);
  font-size:.92rem;
}

.content{
  padding:24px;
  min-width:0;
}
.content-head, .page-head, .tool-wrap{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:16px;
}
.content-head{
  padding:20px 22px;
  margin-bottom:16px;
}
.content-head h1, .page-head h1{
  margin:0;
  font-size:1.8rem;
  line-height:1.15;
}
.content-head p, .page-head p, .muted, .status, .breadcrumbs{
  color:var(--muted);
}
.content-head p{
  margin:.4rem 0 0;
}

.tool-grid{
  display:grid;
  gap:12px;
}
.tool-grid--list{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.tool-card{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  text-decoration:none;
}
.tool-card[hidden]{display:none!important}
.tool-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.badge, .eyebrow{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.78rem;
}
.tool-card__link{
  text-decoration:none;
  color:var(--accent);
  font-weight:600;
}
.tool-card h3{
  margin:0;
  font-size:1.05rem;
}
.tool-card h3 a{
  text-decoration:none;
}
.tool-card p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.empty-state{
  margin:16px 0 0;
  color:var(--muted);
}

.shell{
  width:min(1000px, calc(100% - 32px));
  margin:24px auto 40px;
}
.shell--narrow{
  width:min(1000px, calc(100% - 32px));
}
.page-head{
  padding:18px 20px;
  margin-bottom:16px;
}
.page-head h1{
  margin:.2rem 0 .35rem;
}
.page-head p{
  margin:0;
}
.breadcrumbs{
  font-size:.92rem;
  margin-bottom:.35rem;
}
.breadcrumbs a{
  color:var(--accent);
  text-decoration:none;
}

.tool-wrap{
  padding:18px;
}
.split-2, .split-3{
  display:grid;
  gap:12px;
}
.split-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.note{
  border:1px dashed var(--line-strong);
  background:var(--surface-2);
  border-radius:12px;
  padding:.75rem .85rem;
  color:var(--muted);
}
.preview{
  min-height:180px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  background:var(--surface-2);
  overflow:auto;
}
.table-like{white-space:pre-wrap}
.status{
  margin-top:10px;
}

.canvas-stage{
  width:100%;
  max-width:100%;
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}
.media-stage{
  margin-top:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  border:1px dashed var(--line-strong);
  background:var(--surface-2);
  border-radius:12px;
  min-height:220px;
  padding:14px;
  overflow:auto;
}
.preview-image{
  max-width:100%;
  max-height:420px;
  display:block;
  border-radius:10px;
}
.preview-thumb{
  width:72px;
  height:72px;
  object-fit:contain;
  display:block;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  margin:.5rem auto;
}
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-top:14px;
}
.swatch-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  padding:12px;
  text-align:center;
}
.swatch-color{
  width:100%;
  height:64px;
  border-radius:10px;
  border:1px solid var(--line);
  margin-bottom:8px;
}
.gradient-preview{min-height:200px}

@media (max-width: 980px){
  .app-layout{grid-template-columns:1fr}
  .sidebar{
    position:static;
    height:auto;
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .chips--stack{flex-direction:row}
  .tool-grid--list{grid-template-columns:1fr}
}

@media (max-width: 760px){
  .content{padding:16px}
  .shell{width:min(1000px, calc(100% - 20px)); margin:16px auto 28px}
  .split-2, .split-3{grid-template-columns:1fr}
  .sidebar__meta{grid-template-columns:1fr 1fr}
}