:root { color-scheme: dark; --bg:#090909; --panel:#121212; --panel-2:#1a1a1a; --line:#303030; --text:#f4f4f0; --muted:#999991; --accent:#c7ff54; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:Arial,"Noto Sans Thai",sans-serif; }
a { color:inherit; }
.studio-shell { width:min(1120px,calc(100% - 40px)); margin:auto; padding:26px 0 80px; }
.studio-header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:18px; }
.studio-back { font-weight:800; text-decoration:none; letter-spacing:-.02em; }
.studio-mark,.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.14em; }
.studio-account { color:var(--muted); font-size:13px; text-decoration:none; }
.studio-hero { display:grid; grid-template-columns:1fr 180px; gap:30px; padding:62px 0 38px; align-items:end; }
.studio-hero h1 { max-width:670px; margin:8px 0 12px; font-size:clamp(34px,6vw,70px); line-height:.98; letter-spacing:-.055em; }
.studio-hero p:not(.eyebrow) { color:var(--muted); margin:0; font-size:16px; }
.hero-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; width:180px; height:180px; transform:rotate(-5deg); }
.hero-grid span { background:var(--accent); opacity:.9; }
.hero-grid span:nth-child(2n) { background:#514dff; }.hero-grid span:nth-child(3n) { background:#ff5d4d; }
.studio-panel { border:1px solid var(--line); background:var(--panel); padding:26px; }
.studio-form { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(180px,.6fr); gap:22px; }
.upload-zone { min-height:230px; border:1px dashed #5c5c5c; background:var(--panel-2); display:grid; place-items:center; padding:22px; text-align:center; cursor:pointer; }
.upload-zone:hover,.upload-zone:focus-within { border-color:var(--accent); }
.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.upload-copy strong,.upload-copy span { display:block; }.upload-copy strong { font-size:19px; }.upload-copy span { margin-top:8px; color:var(--muted); font-size:13px; }
.preview { display:block; max-height:210px; max-width:100%; object-fit:contain; margin:auto; }
.studio-fields { display:grid; align-content:start; gap:16px; }
.field { display:grid; gap:7px; }.field span { font-size:12px; color:var(--muted); }.field select,.studio-submit { min-height:44px; border:1px solid var(--line); background:#0e0e0e; color:var(--text); padding:0 12px; font:inherit; }
.studio-submit { border-color:var(--accent); background:var(--accent); color:#0b0b0b; cursor:pointer; font-weight:800; }.studio-submit:disabled { cursor:not-allowed; opacity:.5; }
.feedback { color:#ff8f82; font-size:13px; min-height:18px; }.studio-status { color:var(--muted); font-size:13px; margin:0; }
.jobs { margin-top:34px; display:grid; gap:12px; }.jobs-heading { border-top:1px solid var(--line); padding-top:22px; font-size:18px; }.job { border:1px solid var(--line); padding:16px; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }.job-name { font-weight:700; overflow-wrap:anywhere; }.job-meta { display:block; color:var(--muted); font-size:12px; margin-top:6px; }.job-actions { display:flex; gap:8px; align-items:center; }.job-actions a { border:1px solid var(--line); padding:9px 12px; text-decoration:none; font-size:12px; }.job-actions a:hover { border-color:var(--accent); }.job-preview { grid-column:1/-1; max-width:160px; max-height:160px; image-rendering:pixelated; border:1px solid var(--line); background:#fff; }.status-completed { color:var(--accent); }.status-failed { color:#ff8f82; }
@media (max-width:700px) { .studio-shell { width:calc(100% - 28px); padding-top:16px; }.studio-hero { grid-template-columns:1fr; padding:42px 0 26px; }.hero-grid { width:120px; height:120px; }.studio-panel { padding:16px; }.studio-form { grid-template-columns:1fr; }.job { grid-template-columns:1fr; }.job-actions { justify-content:flex-start; } }