:root { --ink:#171717; --muted:#737373; --line:#e8e6e1; --paper:#fbfaf7; --panel:#fff; --violet:#6d4aff; --violet-dark:#5535e8; --lime:#c9ff4b; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font:inherit; }
button { color:inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:3px solid rgba(109,74,255,.22); outline-offset:2px; }
.app-shell { min-height:100vh; }
.topbar { height:76px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { width:38px; height:38px; border-radius:11px; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:900; font-size:20px; box-shadow:5px 5px 0 var(--lime); }
.brand div { display:flex; flex-direction:column; line-height:1.05; }
.brand b { font-size:15px; letter-spacing:.08em; }.brand small { color:var(--muted); margin-top:5px; font-size:11px; }
.top-actions { display:flex; align-items:center; gap:9px; }.privacy { font-size:11px; color:#6b6b6b; margin-right:10px; }.privacy i,.live i { width:7px; height:7px; border-radius:50%; background:#54b52e; display:inline-block; margin-right:6px; box-shadow:0 0 0 3px #e7f7df; }
button { border:0; background:none; cursor:pointer; }.icon-btn,.square-button { width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:#fff; display:grid; place-items:center; font-size:18px; }.icon-btn:disabled { opacity:.35; cursor:not-allowed; }
.ghost { border:1px solid var(--line); border-radius:10px; background:#fff; padding:10px 15px; font-weight:700; font-size:12px; }.primary { background:var(--violet); color:#fff; border-radius:11px; padding:13px 18px; font-weight:800; box-shadow:0 6px 16px rgba(109,74,255,.2); }.primary:hover { background:var(--violet-dark); }.primary.small { padding:10px 15px; font-size:12px; }
.workspace { min-height:calc(100vh - 76px); display:grid; grid-template-columns:250px minmax(440px,1fr) minmax(340px,430px); }
.sidebar { background:#f2f0ea; border-right:1px solid var(--line); padding:28px 18px; }.section-head,.preview-top,.panel-title { display:flex; align-items:flex-start; justify-content:space-between; }.eyebrow { font-size:9px; font-weight:900; color:#85827a; letter-spacing:.18em; }.section-head h2,.preview-top h2 { margin:5px 0 0; font-size:18px; letter-spacing:-.02em; }.step { width:27px; height:27px; border-radius:8px; background:var(--lime); display:grid; place-items:center; font-size:10px; font-weight:900; }
.type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:18px; }.type-card { min-height:65px; border-radius:11px; background:#fff; border:1px solid transparent; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:10px 12px; gap:7px; color:#5a5854; font-size:11px; font-weight:750; transition:.2s; }.type-card span { font-size:17px; height:18px; color:#77736d; }.type-card:hover { transform:translateY(-1px); border-color:#ccc8bf; }.type-card.active { background:var(--ink); color:#fff; box-shadow:0 6px 13px rgba(0,0,0,.13); }.type-card.active span { color:var(--lime); }
.recent-block { margin-top:26px; border-top:1px solid #dcd8cf; padding-top:18px; }.mini-head { display:flex; justify-content:space-between; font-size:11px; margin-bottom:8px; }.mini-head button { color:#999; font-size:10px; }.empty-recent { padding:18px 10px; color:#9c9992; text-align:center; font-size:10px; line-height:1.5; }.recent-item { display:grid; grid-template-columns:34px 1fr auto; width:100%; align-items:center; gap:9px; padding:8px; border-radius:10px; text-align:left; }.recent-item:hover { background:#fff; }.recent-icon { width:30px;height:30px;background:#fff;border:1px solid #ddd8ce;border-radius:8px;display:grid;place-items:center;font-size:8px;font-weight:900; }.recent-item span:nth-child(2) { display:flex;flex-direction:column; }.recent-item b { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:125px; }.recent-item small { font-size:8px;color:#999;margin-top:3px; }.recent-item i { color:#aaa;font-style:normal; }
.editor { background:#fff; min-width:0; }.tabs { height:65px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); padding:0 32px; gap:15px; }.tabs button { border-bottom:2px solid transparent; display:flex; align-items:center; justify-content:center; gap:8px; color:#a2a09a; font-size:11px; font-weight:800; white-space:nowrap; }.tabs button span { width:19px;height:19px;border-radius:6px;background:#f2f1ee;display:grid;place-items:center;font-size:8px; }.tabs button.active { color:var(--ink);border-bottom-color:var(--violet); }.tabs button.active span { background:var(--violet);color:#fff; }
.panel { padding:34px clamp(28px,5vw,64px) 60px; max-width:760px; margin:auto; }.panel-title { margin-bottom:28px; }.panel-title h1 { font-size:26px; letter-spacing:-.04em; margin:6px 0 5px; }.panel-title p { color:var(--muted); margin:0; font-size:12px; }.live { color:#54a929; font-size:9px; font-weight:900; letter-spacing:.12em; background:#f2faee; border-radius:20px; padding:8px 11px; }.remix { font-size:10px;font-weight:800;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fff; }
.field-grid,.control-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.field { display:flex; flex-direction:column; gap:7px; min-width:0; }.field.wide { grid-column:1/-1; }.field span,.range span b,.colors label>span { font-size:10px; color:#67645f; font-weight:800; }.field input,.field textarea,.field select { width:100%; border:1px solid #dedbd4; background:#fbfaf8; border-radius:10px; padding:12px 13px; font-size:12px; color:var(--ink); transition:.2s; }.field textarea { resize:vertical; min-height:96px; }.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--violet); background:#fff; }.check { display:flex;align-items:center;gap:8px;font-size:11px;color:#666;font-weight:700;align-self:end;padding:12px 0; }.check input { accent-color:var(--violet); width:15px;height:15px; }
.tip { margin-top:22px; padding:13px 15px; background:#f4f8ff; border:1px solid #e1eaff; border-radius:11px; display:flex; gap:11px; align-items:flex-start; color:#50617e; }.tip>span { color:var(--violet);font-weight:900; }.tip p { margin:0;font-size:10px;line-height:1.5; }.tip p b { display:block;color:#3c4f70;margin-bottom:2px; }.tip.warning { background:#fff9e9;border-color:#f3e4b8;color:#7a6632; }.tip.warning p b { color:#725b1e; }
.control-heading { margin:23px 0 12px;font-size:11px; }.preset-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:9px; }.preset-grid button { border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;text-align:left; }.preset-grid button:hover { border-color:var(--violet);transform:translateY(-1px); }.preset-grid b { display:block;font-size:9px;margin-top:6px; }.swatch { height:35px;border-radius:7px;display:block; }.control-grid { margin-top:22px; }.colors { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px; }.colors label { border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-items:center; }.colors input { width:30px;height:30px;border:0;padding:0;background:none;grid-row:1/3; }.colors code { font-size:9px;color:#999; }.switch-row { display:flex;gap:28px;margin-top:12px; }
.dropzone { border:1.5px dashed #cfcac1;border-radius:14px;min-height:155px;display:flex;align-items:center;justify-content:center;gap:15px;text-align:left;background:#fbfaf8;cursor:pointer; }.dropzone:hover { border-color:var(--violet);background:#faf8ff; }.dropzone>div { display:flex;flex-direction:column; }.dropzone b { font-size:12px; }.dropzone small { color:#999;font-size:10px;margin-top:5px; }.dropzone img { width:76px;height:76px;object-fit:cover;border-radius:16px;box-shadow:0 6px 18px #ddd; }.upload-icon { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eee9ff;color:var(--violet);font-weight:900;font-size:20px; }.text-button { padding:8px 0;font-size:10px;font-weight:700;color:var(--violet); }.text-button.danger { color:#d54444; }.range { display:block;margin:22px 0; }.range>span { display:flex;justify-content:space-between;margin-bottom:10px; }.range output { font-size:10px;color:var(--violet);font-weight:800; }.range input { width:100%;accent-color:var(--violet); }.segmented { display:grid;grid-template-columns:repeat(4,1fr);background:#f2f0ec;border-radius:11px;padding:4px;margin-bottom:18px; }.segmented button { padding:10px 5px;border-radius:8px;text-transform:capitalize;font-size:10px;font-weight:700;color:#777; }.segmented button.active { background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08); }
.export-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px; }.export-grid button { border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;text-align:left;background:#fff; }.export-grid button:hover { border-color:var(--violet);box-shadow:0 7px 20px rgba(0,0,0,.06); }.format { width:42px;height:42px;background:#e9f9e3;color:#478b2e;border-radius:10px;display:grid;place-items:center;font-size:10px;font-weight:900; }.format.violet { background:#eee9ff;color:var(--violet); }.export-grid div { display:flex;flex-direction:column; }.export-grid b { font-size:11px; }.export-grid small { color:#999;font-size:9px;margin-top:3px; }.export-grid i { font-style:normal;color:#999;font-size:17px; }.project-actions { display:flex;gap:10px;margin-top:18px; }
.preview-pane { background:#f5f3ee; border-left:1px solid var(--line); padding:28px clamp(24px,3vw,40px); position:sticky; top:76px; height:calc(100vh - 76px); overflow:auto; }.canvas-stage { margin:27px auto 18px; padding:30px; background:linear-gradient(145deg,#eceae4,#faf9f6); border-radius:20px; position:relative; display:grid;place-items:center; min-height:340px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.025); }.canvas-stage canvas { width:min(100%,300px);height:auto;max-height:350px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.1)); }.corner-label { position:absolute;right:12px;top:12px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-size:8px;font-weight:900;color:#777; }.scan-status { background:#eff8eb;border:1px solid #dcefd4;border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:10px; }.scan-status>span { width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#61ae42;color:#fff;font-size:12px; }.scan-status div { display:flex;flex-direction:column; }.scan-status b { font-size:10px;color:#49763a; }.scan-status small { font-size:8px;color:#7a9a70;margin-top:2px; }.preview-actions { display:grid;grid-template-columns:1fr 44px;gap:9px;margin-top:13px; }.preview-actions .primary { font-size:11px; }.preview-actions .square-button { width:44px;height:44px; }.quick-stats { display:grid;grid-template-columns:repeat(3,1fr);margin-top:19px;padding-top:15px;border-top:1px solid #dfdcd5; }.quick-stats div { display:flex;flex-direction:column;gap:4px;border-right:1px solid #dedbd4;padding-left:13px; }.quick-stats div:first-child { padding-left:0; }.quick-stats div:last-child { border:0; }.quick-stats span { font-size:7px;letter-spacing:.12em;color:#999;font-weight:900; }.quick-stats b { font-size:10px;text-transform:capitalize; }.privacy-note { margin:20px 0 0;text-align:center;color:#999;font-size:8px;line-height:1.5; }.toast { position:fixed;z-index:50;top:87px;left:50%;transform:translateX(-50%);background:#171717;color:#fff;padding:11px 17px;border-radius:30px;font-size:11px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.18);animation:toast-in .25s ease; }
@keyframes toast-in { from { opacity:0;transform:translate(-50%,-8px) } }
@media (max-width:1100px) { .workspace { grid-template-columns:210px 1fr; }.preview-pane { grid-column:2;position:relative;top:0;height:auto;border-top:1px solid var(--line); }.canvas-stage { min-height:280px; }.canvas-stage canvas { max-width:260px; }.sidebar { grid-row:1/3; }.privacy { display:none; } }
@media (max-width:760px) { .topbar { padding:0 15px;height:66px; }.brand small,.top-actions .icon-btn,.top-actions .ghost { display:none; }.workspace { display:block; }.sidebar { border-right:0;padding:20px 15px; }.section-head,.recent-block { display:none; }.type-grid { grid-template-columns:repeat(4,1fr);overflow-x:auto;margin:0;padding-bottom:4px; }.type-card { min-width:76px; }.tabs { padding:0 12px;gap:2px;overflow-x:auto; }.tabs button { font-size:9px; }.panel { padding:26px 18px 40px; }.panel-title h1 { font-size:22px; }.preset-grid { grid-template-columns:repeat(3,1fr); }.preview-pane { padding:25px 18px 35px; }.field-grid,.control-grid { grid-template-columns:1fr; }.field.wide { grid-column:auto; }.colors { grid-template-columns:1fr 1fr; }.export-grid { grid-template-columns:1fr; } }
@media (max-width:460px) { .type-grid { grid-template-columns:repeat(12,76px); }.tabs button span { display:none; }.preset-grid { grid-template-columns:repeat(2,1fr); }.colors { grid-template-columns:1fr; }.canvas-stage { padding:20px;min-height:260px; }.switch-row { flex-direction:column;gap:0; }.privacy-note { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }

.hidden { display:none!important; }
.type-card { cursor:pointer; }
.panel-body { min-height:420px; }
.editor-note { color:var(--muted);font-size:10px;line-height:1.5;margin-top:18px; }
.logo-preview { width:76px;height:76px;object-fit:cover;border-radius:16px;box-shadow:0 6px 18px #ddd; }
.danger { color:#d54444!important; }

/* Advanced tools stay in a separate drawer so the primary QR flow remains simple. */
.power-button { display:flex;align-items:center;gap:6px; }.power-button span { color:var(--violet); }
.media-button { display:flex;align-items:center;gap:6px; }.media-button span { color:#e24b4b;font-weight:900; }
.tool-backdrop { position:fixed;inset:0;background:rgba(16,14,24,.38);backdrop-filter:blur(3px);z-index:40; }
.tool-drawer { position:fixed;z-index:41;right:0;top:0;width:min(570px,100vw);height:100vh;background:#fbfaf7;border-left:1px solid var(--line);box-shadow:-22px 0 60px rgba(0,0,0,.16);transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column; }
.tool-drawer.open { transform:translateX(0); }.tool-drawer-head { padding:25px 26px 20px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:20px; }.tool-drawer-head h2 { margin:5px 0 4px;font-size:23px;letter-spacing:-.04em; }.tool-drawer-head p { margin:0;color:var(--muted);font-size:11px; }.tool-drawer-head .icon-btn { flex:none; }
.tool-nav { padding:0 20px;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:5px;overflow-x:auto; }.tool-nav button { padding:14px 12px 12px;border-bottom:2px solid transparent;color:#8b8984;font-size:10px;font-weight:850;white-space:nowrap; }.tool-nav button.active { color:var(--ink);border-color:var(--violet); }
.tool-scroll { overflow:auto;padding:25px 26px 50px; }.tool-page { display:none; }.tool-page.active { display:block;animation:tool-in .2s ease; }@keyframes tool-in{from{opacity:0;transform:translateY(5px)}}
.tool-intro { display:flex;flex-direction:column;gap:5px;margin-bottom:18px; }.tool-intro b { font-size:14px; }.tool-intro span { color:var(--muted);font-size:10px;line-height:1.5; }.tool-intro.compact { margin-bottom:12px; }
.recipe-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }.recipe-grid button { min-height:69px;padding:10px 8px;border:1px solid var(--line);background:#fff;border-radius:11px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;text-align:left;font-size:9px;font-weight:800; }.recipe-grid button span { font-size:17px;color:var(--violet); }.recipe-grid button:hover,.recipe-grid button.active { border-color:var(--violet);background:#f7f4ff;transform:translateY(-1px); }
.recipe-builder { margin-top:18px;padding:17px;border:1px solid var(--line);border-radius:14px;background:#fff; }.recipe-builder:empty { display:none; }.recipe-builder h3 { margin:0 0 4px;font-size:14px; }.recipe-builder>p { margin:0 0 16px;color:var(--muted);font-size:10px;line-height:1.45; }
.tool-field { display:flex;flex-direction:column;gap:7px;margin-bottom:12px;min-width:0; }.tool-field>span { font-size:9px;color:#68655f;font-weight:850; }.tool-field input,.tool-field textarea,.tool-field select { width:100%;border:1px solid #dedbd4;background:#fff;border-radius:10px;padding:11px 12px;font-size:11px;color:var(--ink); }.tool-field textarea { resize:vertical;line-height:1.5; }.tool-field input[type=color] { padding:3px;height:40px; }.tool-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.tool-primary,.tool-secondary { width:100%;padding:12px 15px;border-radius:10px;font-size:10px;font-weight:850; }.tool-primary { background:var(--violet);color:#fff;box-shadow:0 6px 16px rgba(109,74,255,.18); }.tool-primary:hover { background:var(--violet-dark); }.tool-secondary { background:#fff;border:1px solid var(--line);text-align:left; }.tool-secondary:hover { border-color:var(--violet); }.tool-note { margin-top:12px;padding:11px 13px;border-radius:10px;background:#f2f0eb;color:#7f7b73;font-size:9px;line-height:1.55; }
.quality-card { padding:15px;border:1px solid var(--line);border-radius:13px;background:#fff;display:flex;align-items:center;gap:13px;margin-bottom:10px; }.quality-score { width:47px;height:47px;border-radius:50%;background:#eeece8;display:grid;place-items:center;font-weight:900;font-size:13px;flex:none; }.quality-card.good .quality-score { background:#e7f8df;color:#4b9631; }.quality-card.warn .quality-score { background:#fff2d2;color:#a96b11; }.quality-card.bad .quality-score { background:#ffe4e4;color:#bd3737; }.quality-card div { display:flex;flex-direction:column;gap:4px; }.quality-card b { font-size:11px; }.quality-card small { font-size:9px;color:var(--muted);line-height:1.45; }
.action-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px; }.action-grid button { min-height:90px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px; }.action-grid button:hover { border-color:var(--violet);transform:translateY(-1px); }.action-grid button>span { color:var(--violet);font-size:13px;font-weight:900; }.action-grid b { font-size:10px; }.action-grid small { font-size:8px;color:var(--muted); }.tool-divider { height:1px;background:var(--line);margin:23px 0; }
.decode-result { margin-top:11px;padding:13px;border-radius:10px;background:#eef8ea;border:1px solid #d7eccf;font-size:10px;line-height:1.55;word-break:break-all;white-space:pre-wrap; }.decode-result.error { background:#fff0f0;border-color:#f0d1d1; }
.vault-stats { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px; }.vault-stats div { padding:17px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:4px; }.vault-stats strong { font-size:23px;letter-spacing:-.04em; }.vault-stats span { font-size:9px;color:var(--muted); }.stack-actions { display:flex;flex-direction:column;gap:8px; }.shortcut-card { margin-top:22px;padding:15px;border-radius:12px;background:#1d1c20;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:11px;font-size:9px;align-items:center; }.shortcut-card>b { grid-column:1/-1;font-size:10px; }.shortcut-card span { color:#c8c5cd; }.shortcut-card kbd { padding:2px 5px;border:1px solid #5c5962;border-radius:4px;background:#343138;color:#fff;font-size:8px;margin-right:3px; }
.focus-modal { position:fixed;z-index:60;inset:0;background:#111;display:grid;place-items:center;padding:50px; }.focus-modal[hidden] { display:none; }.focus-modal img { max-width:min(78vh,82vw);max-height:78vh;border-radius:24px;box-shadow:0 25px 80px rgba(0,0,0,.45); }.focus-modal p { position:absolute;bottom:22px;color:#aaa;font-size:10px;letter-spacing:.08em;text-transform:uppercase; }.focus-close { position:absolute;right:24px;top:20px;color:#fff;font-size:30px; }

body.dark-mode { --ink:#f5f4f1;--muted:#aaa6a0;--line:#38363c;--paper:#151419;--panel:#1c1a20;background:#151419;color:#f5f4f1; }.dark-mode .topbar,.dark-mode .editor,.dark-mode .tabs,.dark-mode .tool-drawer-head,.dark-mode .tool-nav { background:#1c1a20; }.dark-mode .sidebar,.dark-mode .preview-pane { background:#151419; }.dark-mode .type-card,.dark-mode .ghost,.dark-mode .icon-btn,.dark-mode .field input,.dark-mode .field textarea,.dark-mode .field select,.dark-mode .recipe-grid button,.dark-mode .recipe-builder,.dark-mode .tool-field input,.dark-mode .tool-field textarea,.dark-mode .tool-field select,.dark-mode .quality-card,.dark-mode .action-grid button,.dark-mode .vault-stats div,.dark-mode .tool-secondary { background:#232127;color:#f5f4f1; }.dark-mode .type-card.active { background:#f4f1ea;color:#161519; }.dark-mode .tool-drawer { background:#151419; }.dark-mode .canvas-stage { background:linear-gradient(145deg,#222126,#18171b); }.dark-mode .tool-note { background:#242228; }.dark-mode .segmented { background:#222126; }.dark-mode .segmented button.active { background:#38353e;color:#fff; }

@media(max-width:900px){.power-button{display:none}.tool-drawer{width:min(540px,100vw)}}
@media(max-width:560px){.tool-drawer-head{padding:20px}.tool-scroll{padding:20px 16px 40px}.recipe-grid{grid-template-columns:repeat(3,1fr)}.action-grid{grid-template-columns:repeat(2,1fr)}.shortcut-card{grid-template-columns:1fr}.shortcut-card>b{grid-column:auto}.focus-modal{padding:20px}.tool-row{grid-template-columns:1fr 1fr}}

.media-legal { padding:13px 14px;border-radius:11px;border:1px solid #f0dfb0;background:#fff8df;margin-bottom:15px; }.media-legal b { font-size:10px;color:#7b5b13; }.media-legal p { margin:4px 0 0;color:#8b7646;font-size:9px;line-height:1.5; }.media-legal a { color:#6d4aff;font-weight:800; }
.media-drop { min-height:170px;border:1.5px dashed #cfcac1;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;gap:10px; }.media-drop.dragging { border-color:var(--violet);background:#f6f3ff; }.media-drop-icon { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eee9ff;color:var(--violet);font-size:22px; }.media-drop>div { display:flex;flex-direction:column;gap:4px; }.media-drop b { font-size:12px; }.media-drop small { color:var(--muted);font-size:9px; }.media-drop .tool-secondary { width:auto;text-align:center;padding:9px 15px; }
.media-file { margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;display:grid;grid-template-columns:72px 1fr 38px;align-items:center;gap:12px; }.media-thumb { width:72px;height:54px;border-radius:9px;background:#18171b;overflow:hidden;display:grid;place-items:center;position:relative; }.media-thumb video { width:100%;height:100%;object-fit:cover; }.media-thumb>span { position:absolute;color:#fff;font-size:22px; }.media-file>div:nth-child(2) { min-width:0;display:flex;flex-direction:column;gap:3px; }.media-file b { font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.media-file span { color:var(--muted);font-size:9px; }.media-file small { color:#bf4a4a;font-size:8px;line-height:1.4; }
.media-settings { margin-top:21px; }.media-settings h3 { margin:17px 0 9px;font-size:10px; }.media-options { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.media-options button { padding:13px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:3px; }.media-options b { font-size:12px; }.media-options small { font-size:8px;color:var(--muted); }.media-options button.active,.resolution-grid button.active { border-color:var(--violet);background:#f5f2ff;color:var(--violet);box-shadow:inset 0 0 0 1px var(--violet); }
.resolution-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:13px; }.resolution-grid button { padding:9px 3px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:9px;font-weight:800; }.trim-settings { border:1px solid var(--line);border-radius:10px;background:#fff;margin:15px 0;padding:0 13px; }.trim-settings summary { cursor:pointer;padding:12px 0;font-size:9px;font-weight:850; }.trim-settings[open] summary { border-bottom:1px solid var(--line);margin-bottom:12px; }.media-convert { margin-top:4px; }
.media-progress { margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:11px;background:#fff; }.media-progress>div:first-child { height:7px;border-radius:5px;background:#eae7e1;overflow:hidden; }.media-progress>div>span { display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),#a88fff);transition:width .2s; }.media-progress p { display:flex;flex-direction:column;gap:3px;margin:10px 0; }.media-progress b { font-size:10px; }.media-progress small { color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.media-progress .tool-secondary { padding:8px 10px;text-align:center; }
.media-output { margin-top:14px;padding:13px;border:1px solid #cce7c2;border-radius:11px;background:#eff9eb;display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center; }.media-output>span { width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#5daa40;color:#fff;font-weight:900; }.media-output>div { display:flex;flex-direction:column;gap:3px;min-width:0; }.media-output b { font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.media-output small { color:#66845c;font-size:8px; }.media-output .tool-primary { width:auto;padding:9px 12px; }.media-note { margin-top:16px; }
.dark-mode .media-legal { background:#2b261b;border-color:#54482c; }.dark-mode .media-legal p { color:#b7a67c; }.dark-mode .media-drop,.dark-mode .media-file,.dark-mode .media-options button,.dark-mode .resolution-grid button,.dark-mode .trim-settings,.dark-mode .media-progress { background:#232127;color:#f5f4f1; }.dark-mode .media-options button.active,.dark-mode .resolution-grid button.active { background:#302a48; }
@media(max-width:1100px){.media-button{display:none}}
@media(max-width:560px){.resolution-grid{grid-template-columns:repeat(3,1fr)}.media-file{grid-template-columns:60px 1fr 38px}.media-thumb{width:60px}.media-output{grid-template-columns:32px 1fr}.media-output .tool-primary{grid-column:1/-1;width:100%}}