/* ==========================================================================
   artue.fun — Image Tools
   Theme: dark, developer-tools, syntax-highlighting palette
   ========================================================================== */

:root{
  /* base surface */
  --bg:            #0b0e14;
  --bg-elevated:   #10141d;
  --bg-panel:      #151a24;
  --bg-panel-2:    #1a202c;
  --border:        #232a3a;
  --border-soft:   #1a2130;

  /* text */
  --text:          #e6e8ef;
  --text-dim:      #97a1b8;
  --text-faint:    #5c6580;

  /* syntax accent palette (One-Dark inspired) */
  --syn-keyword:   #c993ff;  /* purple  — primary brand accent */
  --syn-func:      #82aaff;  /* blue    — links, interactive   */
  --syn-string:    #9ece6a;  /* green   — success / free       */
  --syn-number:    #f6a969;  /* orange  — warnings / numbers   */
  --syn-tag:       #ff6b81;  /* pink/red— destructive / tags   */
  --syn-const:     #ffd580;  /* yellow  — constants / stars    */
  --syn-comment:   #626f8c;  /* comment gray-blue              */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1180px;
}

[data-theme="light"]{
  --bg:            #f7f8fb;
  --bg-elevated:   #ffffff;
  --bg-panel:      #ffffff;
  --bg-panel-2:    #eef0f6;
  --border:        #dfe3ee;
  --border-soft:   #e7eaf3;
  --text:          #1a1f2b;
  --text-dim:      #545e78;
  --text-faint:    #8891a8;
  --syn-comment:   #8891a8;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
body.no-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }
h1,h2,h3,h4{ font-family: var(--mono); font-weight:600; line-height:1.25; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color: var(--text-dim); }
code, .mono{ font-family: var(--mono); }

.container{ max-width: var(--maxw); margin:0 auto; padding: 0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 2px solid var(--syn-func);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------- background grid --------------------------- */
.bg-grid{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
  opacity:.5;
}

/* --------------------------------- nav ----------------------------------- */
.nav{
  position: sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  max-width: var(--maxw); margin:0 auto; padding: 14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:9px; font-family: var(--mono); font-weight:700; font-size:17px; color:var(--text); }
.brand .dot{ color: var(--syn-keyword); }
.brand-mark{
  width:28px; height:28px; border-radius:7px;
  background: linear-gradient(145deg, var(--syn-keyword), var(--syn-func));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size:14px; font-weight:800; color:#0b0e14;
}
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  font-size:14.5px; color: var(--text-dim); position:relative; padding:4px 0;
}
.nav-links a:hover{ color: var(--text); }
.nav-links a.active{ color: var(--syn-func); }
.nav-dropdown{ position:relative; }
.nav-dropdown-panel{
  position:absolute; top: calc(100% + 14px); left:50%; transform:translateX(-50%);
  width:560px; background: var(--bg-elevated); border:1px solid var(--border);
  border-radius: var(--radius-md); padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  opacity:0; visibility:hidden; translate: 0 6px; transition: all .16s ease;
  box-shadow: 0 20px 45px rgba(0,0,0,.45);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel{ opacity:1; visibility:visible; translate:0 0; }
.nav-dropdown-panel a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--text-dim); font-size:13.5px;
}
.nav-dropdown-panel a:hover{ background: var(--bg-panel-2); color:var(--text); }
.nav-dropdown-panel a .swatch{ width:8px; height:8px; border-radius:2px; flex:none; }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.theme-toggle{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background: var(--bg-panel);
  color: var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-toggle:hover{ color: var(--syn-const); border-color: var(--syn-const); }
.icon-sun{ display:none; }
[data-theme="light"] .icon-moon{ display:none; }
[data-theme="light"] .icon-sun{ display:block; }

.nav-burger{ display:none; width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--bg-panel); align-items:center; justify-content:center; cursor:pointer; color:var(--text); }
.nav-burger span, .nav-burger span::before, .nav-burger span::after{
  content:""; display:block; width:16px; height:2px; background: currentColor; position:relative; transition: all .2s ease;
}
.nav-burger span::before{ position:absolute; top:-5px; }
.nav-burger span::after{ position:absolute; top:5px; }

.mobile-panel{
  display:none; position:fixed; inset:60px 0 0 0; z-index:49; background: var(--bg);
  padding:20px 24px; overflow-y:auto;
}
.mobile-panel.open{ display:block; }
.mobile-panel a{ display:block; padding:14px 0; font-family:var(--mono); font-size:16px; border-bottom:1px solid var(--border-soft); color: var(--text); }
.mobile-panel .mp-label{ font-family:var(--mono); font-size:12px; color:var(--syn-comment); margin:18px 0 6px; }

/* ------------------------------- buttons --------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--mono); font-size:14px; font-weight:600;
  padding:11px 18px; border-radius: var(--radius-sm); border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--syn-keyword); color:#0b0e14; }
.btn-primary:hover{ background: color-mix(in srgb, var(--syn-keyword) 85%, white); }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--syn-func); color: var(--syn-func); }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-sm{ padding:7px 12px; font-size:12.5px; }

/* --------------------------------- hero ----------------------------------- */
.hero{ padding: 84px 0 60px; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; }
.eyebrow{ font-family: var(--mono); font-size:13.5px; color: var(--syn-comment); margin-bottom:18px; }
.eyebrow .k{ color: var(--syn-keyword); }
.hero h1{ font-size:44px; letter-spacing:-0.02em; color:var(--text); }
.hero h1 .accent{ color: var(--syn-func); }
.hero-sub{ font-size:16.5px; max-width:46ch; margin-bottom:28px; }
.hero-cta{ display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:28px; font-family:var(--mono); font-size:13px; color:var(--text-faint); flex-wrap:wrap; }
.hero-stats b{ color: var(--text); font-size:14px; }

/* terminal / code preview */
.terminal{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md);
  overflow:hidden; box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.terminal-head{
  display:flex; align-items:center; gap:16px; padding:11px 16px; background: var(--bg-panel-2); border-bottom:1px solid var(--border);
}
.term-dots{ display:flex; gap:6px; }
.term-dots span{ width:10px; height:10px; border-radius:50%; }
.term-dots span:nth-child(1){ background:#ff6b6b; }
.term-dots span:nth-child(2){ background:#ffd166; }
.term-dots span:nth-child(3){ background:#59c96a; }
.term-tabs{ display:flex; gap:4px; font-family:var(--mono); font-size:12px; }
.term-tab{ padding:4px 10px; border-radius:6px; color: var(--text-faint); }
.term-tab.active{ background: var(--bg-panel); color: var(--syn-func); }
.terminal-body{ padding:20px 22px; font-family: var(--mono); font-size:13.4px; line-height:1.85; overflow-x:auto; }
.terminal-body .ln{ color: var(--text-faint); display:inline-block; width:18px; user-select:none; }
.tk-c{ color: var(--syn-comment); }
.tk-k{ color: var(--syn-keyword); }
.tk-f{ color: var(--syn-func); }
.tk-s{ color: var(--syn-string); }
.tk-n{ color: var(--syn-number); }
.tk-t{ color: var(--syn-tag); }
.tk-v{ color: var(--syn-const); }
.tk-p{ color: var(--text-dim); }
.copy-btn{
  margin-left:auto; background:transparent; border:1px solid var(--border); color:var(--text-faint);
  font-family:var(--mono); font-size:11.5px; padding:4px 9px; border-radius:6px; cursor:pointer;
}
.copy-btn:hover{ color: var(--syn-string); border-color: var(--syn-string); }

/* ------------------------------- sections -------------------------------- */
.section{ padding: 76px 0; border-top:1px solid var(--border-soft); }
.section-head{ max-width:640px; margin-bottom:42px; }
.section-head h2{ font-size:28px; color:var(--text); }
.section-head p{ font-size:15.5px; }

/* --------------------------------- grid ----------------------------------- */
.tool-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.tool-card{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:22px; position:relative; overflow:hidden; transition: border-color .15s ease, transform .15s ease;
  border-left:3px solid var(--card-accent, var(--syn-keyword));
}
.tool-card:hover{ border-color: var(--card-accent, var(--syn-keyword)); transform: translateY(-3px); }
.tool-card .tool-icon{
  width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--card-accent, var(--syn-keyword)) 16%, transparent);
  color: var(--card-accent, var(--syn-keyword)); margin-bottom:16px;
}
.tool-card h3{ font-size:16px; margin-bottom:6px; color: var(--text); }
.tool-card p{ font-size:13.6px; margin-bottom:16px; }
.tool-card .tool-link{ font-family:var(--mono); font-size:12.6px; color: var(--card-accent, var(--syn-keyword)); display:inline-flex; align-items:center; gap:6px; }
.tool-card .tag{ position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:20px; background: var(--bg-panel-2); color:var(--text-faint); border:1px solid var(--border); }

/* -------------------------------- how it works ---------------------------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.step{ padding:22px; background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md); }
.step .num{ font-family:var(--mono); font-size:12px; color: var(--syn-comment); margin-bottom:10px; }
.step h4{ font-size:15.5px; color:var(--text); margin-bottom:6px; }
.step p{ font-size:13.6px; margin:0; }

/* ------------------------------ comparison table --------------------------- */
.compare-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); }
table.compare{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
table.compare thead th{
  text-align:left; padding:16px 18px; font-family:var(--mono); font-size:13px; color: var(--text-faint);
  border-bottom:1px solid var(--border); font-weight:600;
}
table.compare thead th.col-highlight{ color: var(--syn-func); }
table.compare tbody td, table.compare tbody th{
  padding:14px 18px; border-bottom:1px solid var(--border-soft); color: var(--text-dim); font-size:13.6px;
}
table.compare tbody th{ text-align:left; color:var(--text); font-weight:500; }
table.compare tbody tr:last-child td, table.compare tbody tr:last-child th{ border-bottom:none; }
table.compare td.col-highlight{ background: color-mix(in srgb, var(--syn-func) 7%, transparent); color: var(--text); }
.yes{ color: var(--syn-string); font-family:var(--mono); }
.no{ color: var(--syn-tag); font-family:var(--mono); }

/* -------------------------------- badges / integrations -------------------- */
.badge-row{ display:flex; flex-wrap:wrap; gap:12px; }
.fmt-badge{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-elevated); font-family:var(--mono); font-size:13px; color: var(--text-dim);
}
.fmt-badge .ext{ font-weight:700; color: var(--badge-color, var(--syn-func)); }
.fmt-badge .dim{ width:6px; height:6px; border-radius:50%; background: var(--badge-color, var(--syn-func)); }

/* ---------------------------------- docs cta -------------------------------- */
.docs-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:30px 32px; border-radius: var(--radius-lg); border:1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--syn-keyword) 10%, var(--bg-elevated)), var(--bg-elevated));
}
.docs-cta h3{ font-size:18px; margin-bottom:4px; color:var(--text); }
.docs-cta p{ margin:0; font-size:13.8px; }

/* ----------------------------------- faq ------------------------------------ */
.faq-item{ border-bottom:1px solid var(--border-soft); padding:18px 0; }
.faq-item summary{ cursor:pointer; font-family: var(--mono); font-size:14.5px; color: var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color: var(--syn-keyword); font-size:18px; transition: transform .15s ease; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top:12px; font-size:13.8px; }

/* --------------------------------- footer ------------------------------------ */
.footer{ border-top:1px solid var(--border); padding:52px 0 28px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:32px; margin-bottom:40px; }
.footer-col h5{ font-family:var(--mono); font-size:12.5px; color: var(--text-faint); margin-bottom:14px; font-weight:600; }
.footer-col a{ display:block; font-size:13.8px; color: var(--text-dim); padding:6px 0; }
.footer-col a:hover{ color: var(--syn-func); }
.footer-brand p{ font-size:13.6px; max-width:32ch; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border-soft); font-size:12.6px; color: var(--text-faint); font-family: var(--mono); flex-wrap:wrap; gap:10px; }

/* -------------------------------- tool page layout ---------------------------- */
.tool-hero{ padding:52px 0 30px; }
.breadcrumb{ font-family: var(--mono); font-size:12.6px; color: var(--text-faint); margin-bottom:16px; }
.breadcrumb a{ color: var(--syn-func); }
.tool-hero h1{ font-size:32px; }
.tool-hero p{ max-width:60ch; font-size:15.5px; }

.workbench{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:24px; align-items:start; padding-bottom:70px;
}
.panel{ background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md); padding:24px; }
.panel h3{ font-size:14.5px; color: var(--text-faint); margin-bottom:16px; text-transform:none; }

.dropzone{
  border:1.5px dashed var(--border); border-radius: var(--radius-md); padding:44px 20px; text-align:center; cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.drag{ border-color: var(--syn-func); background: color-mix(in srgb, var(--syn-func) 6%, transparent); }
.dropzone .dz-icon{ color: var(--syn-func); margin-bottom:14px; }
.dropzone h4{ font-size:15px; color: var(--text); margin-bottom:4px; }
.dropzone p{ font-size:12.8px; margin:0; }
.dropzone input{ display:none; }

.field{ margin-bottom:16px; }
.field label{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12.6px; color:var(--text-dim); margin-bottom:8px; }
.field label span.val{ color: var(--syn-func); }
.field input[type=range]{ width:100%; accent-color: var(--syn-keyword); }
.field select, .field input[type=text], .field input[type=number]{
  width:100%; background: var(--bg-panel); border:1px solid var(--border); color: var(--text); padding:10px 12px;
  border-radius: var(--radius-sm); font-family: var(--mono); font-size:13.5px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:7px 13px; border-radius:20px; border:1px solid var(--border); font-family:var(--mono); font-size:12.5px; color: var(--text-dim); cursor:pointer; background: var(--bg-panel); }
.chip.active{ border-color: var(--syn-keyword); color: var(--syn-keyword); background: color-mix(in srgb, var(--syn-keyword) 12%, transparent); }

.preview-box{ border:1px solid var(--border); border-radius: var(--radius-sm); background: repeating-conic-gradient(var(--bg-panel-2) 0% 25%, var(--bg-panel) 0% 50%) 50%/16px 16px; min-height:220px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:14px; }
.preview-box img{ max-height:320px; object-fit:contain; }
.preview-box .ph{ font-family:var(--mono); color:var(--text-faint); font-size:12.6px; text-align:center; padding:30px; }

.stat-row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12.6px; color:var(--text-dim); padding:8px 0; border-bottom:1px dashed var(--border-soft); }
.stat-row b{ color: var(--text); }
.stat-row .down{ color: var(--syn-string); }

.log{ font-family: var(--mono); font-size:12.2px; color: var(--text-faint); background: var(--bg-panel); border:1px solid var(--border); border-radius: var(--radius-sm); padding:12px 14px; max-height:160px; overflow-y:auto; margin-top:14px; }
.log div{ padding:2px 0; }
.log .ok{ color: var(--syn-string); }
.log .warn{ color: var(--syn-number); }

.file-list{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.file-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background: var(--bg-panel); font-family: var(--mono); font-size:12.4px; }
.file-row .name{ flex:1; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row .sz{ color: var(--text-faint); }
.file-row button{ background:none; border:none; color: var(--syn-tag); cursor:pointer; font-family:var(--mono); }

/* --------------------------------- crop widget ------------------------------------ */
.crop-stage{ position:relative; width:100%; max-height:420px; overflow:hidden; border-radius: var(--radius-sm); background: var(--bg-panel-2); touch-action:none; }
.crop-stage img{ width:100%; display:block; user-select:none; pointer-events:none; }
.crop-sel{
  position:absolute; border:2px solid var(--syn-func); box-shadow: 0 0 0 2000px rgba(0,0,0,.55);
  cursor:move; touch-action:none;
}
.crop-handle{
  position:absolute; right:-7px; bottom:-7px; width:16px; height:16px; border-radius:4px;
  background: var(--syn-func); border:2px solid var(--bg); cursor:se-resize; touch-action:none;
}

/* ------------------------------- content pages -------------------------------- */
.content-page{ padding:60px 0 90px; }
.content-page .prose{ max-width:760px; }
.content-page h1{ font-size:32px; margin-bottom:10px; }
.content-page .updated{ font-family:var(--mono); font-size:12.6px; color: var(--syn-comment); margin-bottom:36px; display:block; }
.content-page h2{ font-size:20px; margin-top:38px; color:var(--text); }
.content-page h3{ font-size:16px; margin-top:24px; color:var(--text); }
.content-page p, .content-page li{ font-size:15px; color: var(--text-dim); }
.content-page ul{ margin: 0 0 1em; padding-left:20px; list-style:disc; }
.content-page a{ color: var(--syn-func); text-decoration:underline; text-underline-offset:3px; }

.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
.contact-info .info-row{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border-soft); }
.contact-info .info-row .k{ font-family:var(--mono); font-size:12.6px; color: var(--syn-comment); width:90px; flex:none; }
.contact-info .info-row .v{ font-size:14px; color: var(--text); }
form.card-form{ background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md); padding:26px; }
form.card-form .field label{ margin-bottom:6px; }
form.card-form textarea{ width:100%; background: var(--bg-panel); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius: var(--radius-sm); font-family: var(--sans); font-size:13.8px; min-height:110px; resize:vertical; }

.adslot{ border:1px dashed var(--border); border-radius: var(--radius-md); padding:14px; text-align:center; font-family:var(--mono); font-size:11px; color: var(--text-faint); margin: 30px 0; }

/* ----------------------------------- responsive -------------------------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .tool-grid{ grid-template-columns: repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .workbench{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .hero{ padding:52px 0 40px; }
  .hero h1{ font-size:32px; }
  .tool-grid{ grid-template-columns:1fr; }
  .section{ padding:52px 0; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  table.compare{ min-width:560px; }
}