:root{
--accent:#e07a22;
--accent-dark:#b65d12;
--accent-cool:#38a6d6;
--bg:#171a1d;
--panel:#24292f;
--panel-2:#1c2127;
--text:#f2f2f2;
--muted:#c2c6ca;
--line:rgba(255,255,255,.08);
--shadow:0 14px 30px rgba(0,0,0,.22);
--glow:0 0 22px rgba(224,122,34,.16);
--cool-glow:0 0 22px rgba(56,166,214,.16);
--max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:
radial-gradient(circle at top right, rgba(224,122,34,.08), transparent 22%),
radial-gradient(circle at bottom left, rgba(224,122,34,.05), transparent 24%),
linear-gradient(180deg, var(--bg), #1b1f23 38%, #171a1d 100%);
color:var(--text);
}

main{
max-width:var(--max);
margin:auto;
padding:28px 16px 34px;
}

.hero,
.panel{
position:relative;
border-radius:18px;
border:1px solid var(--line);
background:linear-gradient(145deg,#1f2328,#121417);
box-shadow:var(--shadow);
overflow:hidden;
}

.hero{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
gap:16px;
padding:22px;
margin-bottom:20px;
}

.hero-pattern{
position:absolute;
inset:0;
background:
radial-gradient(circle at 12% 18%, rgba(255,255,255,.06), transparent 0 20%),
linear-gradient(135deg, rgba(224,122,34,.18), transparent 34%),
linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.03) 46% 47%, transparent 47% 100%);
pointer-events:none;
}

.hero-copy,
.hero-panel{
position:relative;
z-index:1;
}

.section-label,
.panel-kicker{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
background:rgba(224,122,34,.14);
color:#ffcc9f;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
box-shadow:var(--glow);
}

.hero h1,
.panel h2{
margin:12px 0 10px;
font-family:"Segoe UI","Trebuchet MS",Arial,sans-serif;
}

.hero h1{
margin:8px 0 4px;
font-size:clamp(24px,2.8vw,34px);
line-height:1.02;
max-width:13ch;
letter-spacing:-.03em;
}

.hero-lead{
margin:0 0 8px;
color:#ffd3ae;
font-size:14px;
font-weight:700;
line-height:1.35;
}

.hero-sub,
.panel-head p,
.info-card p{
margin:0;
color:var(--muted);
line-height:1.52;
}

.preview-note{
font-size:12px;
line-height:1.45;
max-width:420px;
}

.preview-note strong{
color:#fff;
}

.hero-points{
list-style:none;
padding:0;
margin:12px 0 14px;
display:grid;
gap:6px;
}

.hero-points li{
padding-left:18px;
position:relative;
color:#f0f0f0;
}

.hero-points li::before{
content:"";
position:absolute;
left:0;
top:7px;
width:7px;
height:7px;
border-radius:50%;
background:linear-gradient(135deg, #ffd6b3, #e07a22);
box-shadow:0 0 0 4px rgba(224,122,34,.16);
}

.hero-buttons,
.action-row{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.hero-buttons{
gap:8px;
}

.btn-primary,
.btn-outline,
.preset-chip,
.zoom-reset{
appearance:none;
border:none;
cursor:pointer;
font:inherit;
}

.btn-primary{
background:var(--accent);
padding:11px 18px;
border-radius:999px;
font-weight:700;
color:#fff;
transition:.2s ease;
}

.btn-primary:hover{background:var(--accent-dark)}

.btn-primary:disabled,
.btn-outline:disabled{
opacity:.5;
cursor:not-allowed;
}

.btn-outline{
border:1px solid rgba(255,255,255,.18);
padding:10px 18px;
border-radius:999px;
font-weight:700;
color:#fff;
background:transparent;
transition:.2s ease;
}

.btn-outline:hover{
border-color:var(--accent);
color:#ffb87a;
}

.btn-with-cube{
display:inline-flex;
align-items:center;
gap:10px;
}

.btn-cube{
position:relative;
width:13px;
height:13px;
display:inline-block;
transform:rotate(45deg);
border-radius:2px;
background:linear-gradient(135deg, #ffd6b3, #e07a22);
box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 4px 10px rgba(224,122,34,.24);
flex:0 0 auto;
}

.btn-cube::before,
.btn-cube::after{
content:"";
position:absolute;
border-radius:2px;
}

.btn-cube::before{
inset:-3px auto auto -3px;
width:13px;
height:13px;
background:rgba(255,255,255,.14);
}

.btn-cube::after{
inset:3px auto auto 3px;
width:5px;
height:5px;
background:rgba(255,255,255,.4);
}

.hero-panel{
padding:14px;
align-self:stretch;
border-radius:16px;
background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
}

.hero-panel-label{
margin:0 0 10px;
font-size:10px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
color:#ffd3ae;
}

.hero-panel-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}

.hero-chip{
padding:10px;
border-radius:12px;
background:rgba(9,11,14,.48);
border:1px solid rgba(255,255,255,.08);
font-weight:700;
font-size:12px;
text-align:center;
}

.hero-note{
margin:12px 0 0;
color:var(--muted);
font-size:12px;
line-height:1.45;
}

.app-shell{
display:grid;
gap:20px;
margin-bottom:22px;
}

.app-grid,
.preview-grid,
.info-grid,
.help-grid{
display:grid;
gap:20px;
}

.app-grid{grid-template-columns:minmax(320px,1fr) minmax(320px,1fr)}
.app-grid-single{grid-template-columns:1fr}
.preview-grid,
.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.help-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.preview-grid-with-controls{
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start;
}

.panel{padding:24px}

.panel-head h2{
font-size:clamp(24px,3vw,34px);
line-height:1.08;
}

.dropzone{
display:grid;
place-items:center;
min-height:200px;
padding:20px;
margin-top:18px;
border-radius:18px;
border:1.5px dashed rgba(224,122,34,.42);
background:
radial-gradient(circle at center, rgba(224,122,34,.1), transparent 55%),
linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
text-align:center;
cursor:pointer;
transition:.2s ease;
}

.dropzone:hover,
.dropzone.is-dragover{
transform:translateY(-2px);
box-shadow:0 18px 34px rgba(0,0,0,.24), var(--glow);
border-color:rgba(224,122,34,.8);
}

.dropzone input{display:none}

.dropzone-title{
font-size:24px;
font-weight:800;
}

.dropzone-text{
margin-top:10px;
color:var(--muted);
}

.examples-strip{
display:flex;
gap:12px;
margin-top:14px;
margin-bottom:14px;
}

.example-card{
display:grid;
grid-template-columns:88px 1fr;
gap:12px;
width:100%;
padding:8px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
color:#fff;
text-align:left;
cursor:pointer;
transition:.2s ease;
}

.example-card:hover{
transform:translateY(-2px);
border-color:rgba(224,122,34,.45);
box-shadow:0 16px 26px rgba(0,0,0,.2), var(--glow);
}

.example-card img{
width:88px;
height:88px;
border-radius:10px;
object-fit:cover;
border:1px solid rgba(255,255,255,.08);
background:#fff;
}

.example-copy{
display:grid;
align-content:center;
gap:4px;
}

.example-copy strong{font-size:13px}

.example-copy span{
font-size:12px;
color:var(--muted);
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:10px;
margin-top:14px;
}

.stat-card{
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
}

.stat-label{
display:block;
margin-bottom:4px;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
color:#ffcfaa;
}

.stat-card strong{
font-size:13px;
line-height:1.25;
}

.tips-box{
margin-top:12px;
padding:12px 14px;
border-radius:14px;
background:rgba(13,15,18,.55);
border:1px solid rgba(255,255,255,.07);
}

.tips-box h3{
margin:0 0 8px;
font-size:14px;
}

.tips-box ul{
margin:0;
padding-left:18px;
color:var(--muted);
display:grid;
gap:5px;
font-size:12px;
line-height:1.45;
}

.preset-row{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:14px;
}

.preset-chip{
padding:7px 11px;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);
color:#eef2f5;
font-size:11px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
transition:.18s ease;
}

.preset-chip:hover{
border-color:rgba(56,166,214,.45);
box-shadow:var(--cool-glow);
}

.preset-chip.is-active{
color:#eaf9ff;
background:rgba(56,166,214,.16);
border-color:rgba(56,166,214,.38);
box-shadow:inset 0 0 0 1px rgba(56,166,214,.18), var(--cool-glow);
}

.control-list{
display:grid;
gap:8px;
margin-top:12px;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.control-field,
.toggle-field{
display:grid;
gap:4px;
padding:8px 10px;
border-radius:14px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
}

.control-field span,
.toggle-field span{
font-weight:700;
font-size:12px;
line-height:1.2;
}

.control-field strong{
justify-self:start;
font-size:10px;
line-height:1.1;
color:#ffcfaa;
}

.control-field input[type="range"]{
width:100%;
accent-color:var(--accent);
margin:0;
height:16px;
}

.control-field input[type="number"]{
width:100%;
padding:7px 10px;
border-radius:12px;
border:1px solid rgba(255,255,255,.1);
background:#0f1114;
color:#fff;
font-size:12px;
}

.control-field select{
width:100%;
padding:7px 10px;
border-radius:12px;
border:1px solid rgba(255,255,255,.1);
background:#0f1114;
color:#fff;
font-size:12px;
}

.control-field input:disabled,
.toggle-field input:disabled{
opacity:.5;
cursor:not-allowed;
}

.toggle-field{
grid-template-columns:auto 1fr;
align-items:center;
min-height:42px;
}

.toggle-field input{
width:16px;
height:16px;
accent-color:var(--accent);
}

.status-box{
margin-top:14px;
padding:10px 12px;
border-radius:14px;
background:rgba(11,14,18,.7);
border:1px solid rgba(255,255,255,.07);
color:var(--muted);
line-height:1.45;
font-size:12px;
}

.tool-row{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:14px;
}

.quality-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:12px;
}

.warnings-box{
margin-top:12px;
padding:12px 14px;
border-radius:14px;
background:rgba(11,14,18,.7);
border:1px solid rgba(255,255,255,.07);
}

.warnings-box h3{
margin:0 0 8px;
font-size:14px;
}

.warnings-box ul{
margin:0;
padding-left:18px;
display:grid;
gap:5px;
color:var(--muted);
font-size:12px;
line-height:1.45;
}

.controls-panel-below{
  margin-top:20px;
}

.controls-panel-below .panel-head{
  display:grid;
  gap:4px;
}

.controls-panel-below .panel-kicker{
  padding:5px 9px;
  font-size:9px;
}

.controls-panel-below .panel-head h2{
  margin:6px 0 2px;
  font-size:clamp(18px,2vw,24px);
  line-height:1;
}

.controls-panel-below .panel-head p{
  font-size:12px;
  line-height:1.35;
  max-width:560px;
}

.controls-panel-below .preset-row{
  margin-top:10px;
}

.controls-panel-below .control-list{
  margin-top:10px;
}

.canvas-frame{
margin-top:18px;
position:relative;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
background:
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(145deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
background-size:26px 26px, 26px 26px, auto;
overflow:hidden;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.canvas-frame.dark{
background:
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(145deg, #14181d, #0f1317);
background-size:26px 26px, 26px 26px, auto;
}

.zoom-frame{
  cursor:default;
  --preview-scale:1;
  --preview-pan-x:0px;
  --preview-pan-y:0px;
}

.zoom-frame.is-dragging{cursor:default}

.zoom-frame canvas{
display:block;
width:100%;
height:auto;
aspect-ratio:4 / 3;
transform-origin:center center;
transform:translate(var(--preview-pan-x), var(--preview-pan-y)) scale(var(--preview-scale));
transition:transform .08s linear;
will-change:transform;
}

.zoom-frame.is-dragging canvas{
transition:none;
}

.zoom-hint,
.zoom-reset{
position:absolute;
z-index:2;
border-radius:999px;
backdrop-filter:blur(10px);
}

.zoom-hint{
top:12px;
left:12px;
max-width:calc(100% - 124px);
padding:6px 10px;
background:rgba(10,12,16,.8);
border:1px solid rgba(255,255,255,.08);
color:#d8dde2;
font-size:10px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
pointer-events:none;
}

.zoom-reset{
top:12px;
right:12px;
padding:6px 10px;
background:rgba(15,18,24,.82);
border:1px solid rgba(56,166,214,.28);
color:#d8f6ff;
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
transition:.18s ease;
pointer-events:auto;
}

.zoom-reset:hover{
background:rgba(20,26,34,.96);
border-color:rgba(56,166,214,.46);
box-shadow:var(--cool-glow);
}

.drop-target-frame{
isolation:isolate;
}

  .drop-target-badge{
position:absolute;
left:12px;
bottom:12px;
z-index:2;
padding:6px 10px;
border-radius:999px;
background:rgba(10,12,16,.78);
border:1px solid rgba(255,255,255,.08);
color:#d8dde2;
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
pointer-events:none;
backdrop-filter:blur(10px);
opacity:.85;
transition:opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
}

.drop-target-frame.is-dragover{
border-color:rgba(56,166,214,.72);
box-shadow:0 18px 34px rgba(0,0,0,.24), 0 0 0 1px rgba(56,166,214,.22), var(--cool-glow);
transform:translateY(-2px);
}

.drop-target-frame.is-dragover::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at center, rgba(56,166,214,.12), transparent 58%),
linear-gradient(145deg, rgba(56,166,214,.08), rgba(56,166,214,.02));
pointer-events:none;
z-index:1;
}

.drop-target-frame.is-dragover .drop-target-badge{
opacity:1;
background:rgba(18,30,38,.94);
border-color:rgba(56,166,214,.45);
color:#e8fbff;
transform:translateY(-1px);
}

.selection-overlay{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
}

.selection-rect{
  position:absolute;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.7);
box-shadow:0 0 0 9999px rgba(4,7,10,.38);
opacity:0;
transform:translateZ(0);
}

.selection-rect{
  border-color:rgba(157,233,255,.98);
background:rgba(56,166,214,.12);
box-shadow:0 0 0 1px rgba(56,166,214,.24), 0 0 22px rgba(56,166,214,.18);
}

.selection-hover{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
border-radius:18px;
box-shadow:inset 0 0 0 1px rgba(157,233,255,.14);
opacity:0;
transition:opacity .12s ease;
}

.selection-hover.is-visible{
opacity:1;
}

.selection-overlay.is-visible .selection-rect{
opacity:1;
}

.info-card{min-height:100%}
.help-card{min-height:100%}

.input-guide-grid{
margin-top:20px;
}

.toast-stack{
position:fixed;
right:18px;
bottom:18px;
z-index:200;
display:grid;
gap:10px;
max-width:min(360px, calc(100vw - 28px));
pointer-events:none;
}

.toast{
padding:12px 14px;
border-radius:14px;
background:rgba(14,18,24,.94);
border:1px solid rgba(56,166,214,.28);
color:#eef7fb;
box-shadow:0 16px 28px rgba(0,0,0,.24), var(--cool-glow);
font-size:12px;
line-height:1.4;
opacity:0;
transform:translateY(10px);
transition:opacity .16s ease, transform .16s ease;
}

.toast.is-visible{
opacity:1;
transform:translateY(0);
}

.inline-link{
display:inline-flex;
margin-top:14px;
font-weight:700;
color:#ffcfaa;
}

.inline-link:hover{color:#fff}

@media (max-width: 980px){
  .hero,
  .app-grid,
  .preview-grid,
  .info-grid,
  .help-grid{
    grid-template-columns:1fr;
  }

  .hero h1{max-width:none}
}

@media (max-width: 640px){
  main{padding:20px 14px 28px}

  .hero,
  .panel{
    padding:20px;
    border-radius:16px;
  }

  .hero-panel-grid,
  .stats-grid{
    grid-template-columns:1fr;
  }

  .example-card{grid-template-columns:72px 1fr}

  .example-card img{
    width:72px;
    height:72px;
  }

  .hero-buttons,
  .action-row,
  .tool-row{
    align-items:stretch;
  }

  .hero-buttons > *,
  .action-row > *,
  .tool-row > *{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .preset-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .preset-chip{
    justify-content:center;
  }

  .quality-grid{
    grid-template-columns:1fr;
  }

  .dropzone{min-height:180px}

  .zoom-hint{
    max-width:none;
    right:12px;
    font-size:9px;
    letter-spacing:.05em;
  }
}