@import "tailwindcss";

:root { --ink:#17211d; --muted:#66726c; --line:#dfe5e1; --paper:#f6f8f5; --card:#fff; --green:#1f7a54; --green-dark:#155c3e; --mint:#dff4e8; --lime:#c9f05b; --topbar:rgba(246,248,245,.78); --glow:#e9f7ed; --glass:rgba(255,255,255,.7); --panel:rgba(255,255,255,.68); --panel-strong:#f8fffa; --field:#fafbfa; --soft:#f5faf6; --subline:#edf0ee; --rowline:#f0f2f1; --icon-bg:#f0f3f1; --hover:#f0f4f1; --track:#dfe5e1; --disabled:#b9c2bd; --quiet:#87918b; --shadow:rgba(31,62,46,.05); --green-shadow:rgba(31,122,84,.12); }
:root[data-theme="gray"] { --ink:#f1f6f3; --muted:#a4b0aa; --line:#38413c; --paper:#171b19; --card:#222725; --green:#64d39a; --green-dark:#9aebbd; --mint:#203f31; --lime:#d4f66e; --topbar:rgba(23,27,25,.86); --glow:#1d3b2c; --glass:rgba(35,42,38,.82); --panel:rgba(34,39,37,.8); --panel-strong:#26322b; --field:#1b201e; --soft:#1c2b23; --subline:#343b37; --rowline:#303632; --icon-bg:#303733; --hover:#313b35; --track:#424a46; --disabled:#505954; --quiet:#9aa69f; --shadow:rgba(0,0,0,.22); --green-shadow:rgba(100,211,154,.15); }
:root[data-theme="black"] { --ink:#f4f7f5; --muted:#9ba49f; --line:#242926; --paper:#000; --card:#090b0a; --green:#67dda0; --green-dark:#a2f1c4; --mint:#102a1d; --lime:#d7fa69; --topbar:rgba(0,0,0,.9); --glow:#0a2417; --glass:#090b0a; --panel:#070908; --panel-strong:#0b120e; --field:#050605; --soft:#08130d; --subline:#202421; --rowline:#1b1f1c; --icon-bg:#171b18; --hover:#172019; --track:#303632; --disabled:#3e4541; --quiet:#909a94; --shadow:rgba(0,0,0,.7); --green-shadow:rgba(103,221,160,.13); }
*{box-sizing:border-box} html{background:var(--paper);transition:background .2s ease} body{margin:0;color:var(--ink);background:radial-gradient(circle at 75% 0%,var(--glow) 0,transparent 28rem),var(--paper);font-family:Arial,Helvetica,sans-serif;transition:background .2s ease,color .2s ease} button,input,select{font:inherit} button{color:inherit}
.workspace{max-width:1180px;margin:0 auto;padding:0 28px 36px}.intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:34px}.intro>div:first-child{max-width:690px}.eyebrow{margin:0 0 13px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.18em;display:flex;align-items:center;gap:7px}.family-hero-title em{color:var(--green);font-style:normal}.format-cloud{width:260px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;padding-bottom:5px}.format-cloud span,.format-cloud b{border:1px solid var(--line);background:var(--glass);color:var(--muted);border-radius:7px;padding:7px 9px;font-size:10px;letter-spacing:.08em}.format-cloud b{color:var(--green-dark);background:var(--mint)}
.app-grid{display:grid;grid-template-columns:minmax(0,1fr) 328px;align-items:start;gap:18px}.main-panel{min-width:0;display:grid;gap:14px}.dropzone{min-height:296px;border:1.5px dashed color-mix(in srgb,var(--green) 55%,var(--line));background:var(--panel);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;cursor:pointer;transition:.2s ease;box-shadow:0 16px 50px var(--shadow)}.dropzone:hover,.dropzone.is-dragging{border-color:var(--green);background:var(--panel-strong);transform:translateY(-1px);box-shadow:0 18px 50px var(--green-shadow)}.dropzone[aria-disabled="true"]{cursor:default;opacity:.72}.dropzone[aria-disabled="true"]:hover{border-color:color-mix(in srgb,var(--green) 55%,var(--line));background:var(--panel);transform:none;box-shadow:0 16px 50px var(--shadow)}.dropzone.compact{min-height:152px;flex-direction:row;justify-content:flex-start;text-align:left;gap:18px;padding:24px 28px}.drop-icon{width:58px;height:58px;display:grid;place-items:center;color:var(--green);background:var(--mint);border-radius:16px;margin-bottom:17px;box-shadow:inset 0 0 0 1px var(--green-shadow)}.compact .drop-icon{width:48px;height:48px;margin:0;flex:0 0 auto}.dropzone strong{display:block;font-size:17px;letter-spacing:-.2px}.dropzone span{display:block;color:var(--muted);font-size:13px;margin-top:7px}.browse-actions{display:flex;gap:8px;margin-top:22px}.dropzone .browse-actions button{display:flex;align-items:center;gap:7px;margin:0;padding:10px 14px;color:var(--ink);font-size:12px;font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:9px;cursor:pointer;box-shadow:0 4px 12px var(--shadow)}.dropzone .browse-actions button:disabled{cursor:not-allowed;opacity:.55}.compact .browse-actions{margin:0 0 0 auto}
.settings-card,.queue-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 50px var(--shadow)}.settings-card{padding:23px;position:sticky;top:90px}.settings-title{display:flex;align-items:center;justify-content:space-between;padding-bottom:21px;border-bottom:1px solid var(--subline)}.settings-title>div{display:flex;align-items:center;gap:9px}.settings-title h2,.queue-head h2{margin:0;font-size:15px;letter-spacing:-.2px}.settings-title span{font-size:9px;color:var(--green-dark);background:var(--mint);border-radius:5px;padding:5px 6px;font-weight:800;letter-spacing:.08em}.reset-settings{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.reset-settings:hover:not(:disabled){background:var(--hover);color:var(--green)}.reset-settings:disabled{cursor:not-allowed;opacity:.45}.field-label{display:flex;justify-content:space-between;margin:22px 1px 12px;font-size:12px;font-weight:700}.field-label b{color:var(--green);font-size:12px}.field-label.second{margin-top:25px}.range{--value:calc(50%);width:100%;height:4px;appearance:none;border-radius:5px;background:linear-gradient(90deg,var(--green) var(--value),var(--track) var(--value));outline:none}.range:disabled{cursor:not-allowed;opacity:.58}.range::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:var(--card);border:4px solid var(--green);box-shadow:0 2px 7px var(--shadow);cursor:pointer}.range::-moz-range-track{height:4px;border:0;border-radius:5px;background:var(--track)}.range::-moz-range-progress{height:4px;border-radius:5px;background:var(--green)}.range::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--card);border:4px solid var(--green);box-shadow:0 2px 7px var(--shadow);cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin-top:8px}.select-wrap{position:relative}.select-wrap select{width:100%;appearance:none;border:1px solid var(--line);border-radius:9px;background:var(--field);padding:11px 34px 11px 12px;color:var(--ink);font-size:12px;outline:none}.select-wrap select:disabled,.custom-width input:disabled{cursor:not-allowed;opacity:.58}.select-wrap svg{pointer-events:none;position:absolute;right:11px;top:11px;color:var(--muted)}.custom-width{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;margin-top:8px;padding-right:11px;background:var(--field)}.custom-width input{min-width:0;flex:1;border:0;background:transparent;color:var(--ink);outline:none;padding:10px 11px}.custom-width span{color:var(--muted);font-size:11px}.setting-note{display:flex;gap:11px;margin:22px 0;padding:14px;background:var(--soft);border:1px solid var(--line);border-radius:11px}.setting-note svg{color:var(--green);flex:0 0 auto;margin-top:1px}.setting-note strong,.setting-note span{display:block}.setting-note strong{font-size:11px;margin-bottom:4px}.setting-note span{font-size:10px;line-height:1.45;color:var(--muted)}.primary,.secondary{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;transition:.18s ease}.primary{border:0;color:#fff;background:var(--green);box-shadow:0 7px 18px var(--green-shadow)}.primary:hover:not(:disabled){background:var(--green-dark);color:var(--paper);transform:translateY(-1px)}.primary:disabled{background:var(--disabled);box-shadow:none;cursor:not-allowed}.primary.success{background:var(--ink);color:var(--paper)}.secondary{margin-top:8px;border:1px solid var(--line);color:var(--ink);background:var(--field)}.secondary:hover{border-color:var(--green);color:var(--green)}.spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}.savings{margin:10px 0 0;text-align:center;color:var(--green);font-size:10px;font-weight:700}.savings.negative{color:#d29a61}
.queue-card{overflow:hidden}.queue-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--subline)}.queue-head>div{display:flex;align-items:baseline;gap:9px}.queue-head span{color:var(--muted);font-size:10px}.clear{display:flex;align-items:center;gap:5px;background:transparent;border:0;color:var(--muted);font-size:10px;cursor:pointer}.file-list{max-height:326px;overflow:auto}.file-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto 30px;align-items:center;gap:11px;min-height:61px;padding:10px 14px 10px 18px;border-bottom:1px solid var(--rowline)}.file-row:last-child{border-bottom:0}.file-icon{width:32px;height:32px;display:grid;place-items:center;color:var(--muted);background:var(--icon-bg);border-radius:8px}.file-icon.done{color:var(--green);background:var(--mint)}.file-icon.error{color:#e17a7a;background:#421f22}.file-info{min-width:0;position:relative;padding-bottom:4px}.file-info strong,.file-info span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-info strong{font-size:11px}.file-info span{color:var(--muted);font-size:9px;margin-top:4px}.file-info i{display:block;height:2px;background:var(--green);border-radius:4px;position:absolute;bottom:-6px;left:0;transition:width .2s}.status{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:9px}.status.done{color:var(--green)}.status.error{color:#e17a7a}.icon-button{width:28px;height:28px;display:grid;place-items:center;background:transparent;border:0;border-radius:7px;color:var(--muted);cursor:pointer}.icon-button:hover{background:var(--hover);color:var(--green)}.overall{height:3px;background:var(--subline)}.overall span{display:block;height:100%;background:var(--green);transition:width .25s}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:27px 4px 0;padding:0 4px}.benefits>div{display:flex;align-items:flex-start;gap:10px}.benefits svg{color:var(--green);margin-top:2px;flex:0 0 auto}.benefits b,.benefits span{display:block}.benefits b{color:var(--ink);font-size:10px;margin-bottom:3px}.benefits span{color:var(--quiet);font-size:9px;line-height:1.45}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.intro{align-items:start}.format-cloud{display:none}.app-grid{grid-template-columns:1fr}.settings-card{position:static;grid-row:1}.dropzone{min-height:220px}.benefits{grid-template-columns:1fr;gap:14px}}
@media(max-width:520px){.workspace{padding:0 15px 32px}.dropzone.compact{align-items:center}.compact .browse-actions{display:none}.browse-actions{flex-direction:column}.file-row{grid-template-columns:32px minmax(0,1fr) auto}.file-row .icon-button{display:none}}

/* Project identity. Shared geometry and neutral themes live in forgeworks-interface.css. */
:root,:root[data-theme="light"]{--family-accent:#1f7a54;--family-accent-strong:#155c3e;--family-accent-soft:#dff4e8;--family-accent-glow:#e9f7ed;--family-accent-shadow:rgba(31,122,84,.12);--family-accent-contrast:#fff}
:root[data-theme="gray"]{--family-accent:#64d39a;--family-accent-strong:#9aebbd;--family-accent-soft:#203f31;--family-accent-glow:#1d3b2c;--family-accent-shadow:rgba(100,211,154,.15);--family-accent-contrast:#101712}
:root[data-theme="black"]{--family-accent:#67dda0;--family-accent-strong:#a2f1c4;--family-accent-soft:#102a1d;--family-accent-glow:#0a2417;--family-accent-shadow:rgba(103,221,160,.13);--family-accent-contrast:#000}
.workspace.family-container{padding-right:0;padding-bottom:36px;padding-left:0}
.format-cloud span,.format-cloud b,.settings-title span,.range-labels,.queue-head span,.clear,.file-info strong,.file-info span,.status,.savings,.benefits b,.benefits span{font-size:12px}
@media(max-width:520px){.workspace.family-container{padding-right:0;padding-bottom:32px;padding-left:0}}

.tool-guide {
  max-width: 760px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.72;
}

.tool-guide-header {
  padding-bottom: 30px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.tool-guide-header .eyebrow {
  margin-bottom: 14px;
}

.tool-guide-header h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

.tool-guide-header > p:last-child {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.tool-guide section {
  padding-top: 26px;
  scroll-margin-top: 100px;
}

.tool-guide h2 {
  padding-bottom: 9px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

.tool-guide p {
  margin: 0 0 14px;
}

.tool-guide ol,
.tool-guide ul {
  padding-left: 1.35rem;
  margin: 0 0 16px;
}

.tool-guide li {
  margin-bottom: 6px;
}

.tool-guide a {
  color: var(--family-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tool-guide table {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  overflow-x: auto;
  border-collapse: collapse;
  text-align: left;
}

.tool-guide th,
.tool-guide td {
  min-width: 10rem;
  padding: 11px 13px;
  border: 1px solid var(--line);
  vertical-align: top;
}

.tool-guide th {
  background: var(--soft);
}

.tool-guide pre {
  padding: 15px 17px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media(max-width:520px) {
  .tool-guide {
    font-size: 0.95rem;
  }

  .tool-guide-header h1 {
    font-size: clamp(2.35rem, 13vw, 3.4rem);
  }
}
