/* =======================================================================
   Precision Film Systems™ — Base Styles (layout + components)
   - Theme-agnostic: colors/surfaces come from CSS variables
   - Pair with ONE theme file: theme-dark.css / theme-medium.css / theme-light.css
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =========================
   Design Tokens (Theme-agnostic)
   ========================= */
:root{
  /* Brand / semantic */
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --secondary:#7c3aed;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;

  /* Surfaces / text */
  --bg:#ffffff;
  --text:#1e293b;
  --muted:#64748b;

  --surface:#ffffff;     /* cards, header, footer, modals */
  --surface-2:#f8fafc;   /* soft panels */
  --surface-3:#f1f5f9;   /* hover/alt soft panels */

  /* Lines + shadows */
  --border:rgba(148,163,184,.20);
  --shadow:0 4px 6px -1px rgba(0,0,0,.10);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.10);

  /* Inputs */
  --input-bg:var(--surface);
  --input-text:var(--text);
  --input-border:rgba(148,163,184,.35);
  --input-border-focus:rgba(59,130,246,.60);
  --focus-ring:0 0 0 3px rgba(59,130,246,.10);

  /* Tables */
  --row-bg:var(--surface);
  --row-bg-hover:var(--surface-2);

  /* Special blocks */
  --notice-bg:linear-gradient(135deg, #dbeafe, #e0e7ff);
  --notice-left:var(--primary);

  /* Settings header alignment nudges */
  --settings-col-head-offset-x: -10px;
  --settings-col-head-offset-x-mobile: -8px;
}

/* =========================
   Base / Reset
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding:0 16px 16px;
  -webkit-text-size-adjust:100%;
}

.container{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.hidden{ display:none !important; }

/* =========================
   Mobile Bottom Bar
   (shows only on phones/tablet portrait)
   ========================= */
.mobile-nav{ display:none; } /* legacy (removed from markup) */
.mobile-optimize-bar{ display:none; }
.mnav-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
}
.mnav-item:hover{ background:var(--surface-3); }


/* =========================
   Header
   ========================= */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  padding:14px 16px;
  background:var(--surface);
  /* subtle "app bar" look on gradients */
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius:16px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  position:sticky;
  top:12px;
  z-index:30;
  backdrop-filter: blur(10px);
}

.logo h1{
  font-size:2.5rem;
  font-weight:800;
  color:var(--text);
}

.pro{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.tagline{
  color:var(--muted);
  font-size:1.1rem;
  margin-top:5px;
}

.security-badge{
  background:linear-gradient(135deg,var(--success),color-mix(in srgb, var(--success) 70%, white 30%));
  color:white;
  padding:10px 20px;
  border-radius:50px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}

.lock{ font-size:1.2rem; }

/* =========================
   Layout / Cards
   ========================= */
.main-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:18px;
}

/* Single-column only on smaller screens (keeps side-by-side on iPad landscape) */


.card{
  background:var(--surface);
  border-radius:16px;
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  height:fit-content;
}

.card h2{
  font-size:1.25rem;
  margin-bottom:14px;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}

/* Optional grid placement hooks */
.input-section{ grid-column:1; }
.results-section{ grid-column:2; }


/* =========================
   Section Header / Project Buttons
   ========================= */
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px;
}

.project-actions{ display:flex; gap:10px; }

.btn-project{
  background:rgba(100,116,139,.90);
  color:white;
  border:1px solid rgba(100,116,139,.30);
  padding:8px 16px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, background .2s, border-color .2s;
  font-size:.9rem;
}

.btn-project:hover{
  background:rgba(71,85,105,.95);
  transform:translateY(-1px);
}

/* Centered header variant (fixed invalid !important syntax) */
.section-header-centered {
  text-align: center !important;
  margin-bottom: 25px;
  padding-bottom: 15px;
}

.section-header-centered h2 {
  text-align: center !important;
  margin: 0 0 15px 0;
}


.project-actions-centered{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}

/* =========================
   Job Details (client info)
   ========================= */
.job-details{
  margin:-8px 0 18px;
  padding:14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
}

.job-details-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.job-details-header h3{
  margin:0;
  font-size:1rem;
  font-weight:800;
}

.job-draft-hint{
  margin:0 0 10px 0;
  font-size:.78rem;
  color:#111827;
  border:1px solid rgba(31,77,122,.22);
  background:#f4f7ff;
  border-radius:12px;
  padding:10px 12px;
}

.job-details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}

.job-field label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  color:var(--muted);
  margin:0 0 6px 0;
}

.job-field input{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--input-border);
  border-radius:8px;
  background:var(--input-bg);
  color:var(--input-text);
  font-size:.95rem;
}

.job-field input:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

.btn-new-job{
  background:color-mix(in srgb, var(--warning) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  transition:transform .15s, background .15s;
}

.btn-new-job:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--warning) 22%, transparent);
}


.job-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn-job{
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  transition:transform .15s, filter .15s, background .15s;
}

.btn-job:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

/* New Job = blue */
.btn-job-new{
  background: color-mix(in srgb, #3b82f6 22%, transparent);
  border-color: color-mix(in srgb, #3b82f6 45%, transparent);
  color:#153a6b;
}

/* Save Job = green */
.btn-job-save{
  background: color-mix(in srgb, #22c55e 22%, transparent);
  border-color: color-mix(in srgb, #22c55e 45%, transparent);
}

/* Load Job = yellow */
.btn-job-load{
  background: color-mix(in srgb, #facc15 22%, transparent);
  border-color: color-mix(in srgb, #facc15 55%, transparent);
}


/* =========================
   Film Configuration
   ========================= */
.film-configuration{
  margin-bottom:25px;
  padding:20px;
  background:var(--surface-2);
  border-radius:10px;
  border:1px solid var(--border);
}

.film-selection,
.film-selection-row{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.film-select-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:250px;
}

.film-selection label,
.film-select-wrapper label{
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  min-width:120px;
}

.select-wrapper{ flex:1; max-width:250px; }


.select-wrapper select{
  width:100%;
  padding:10px 15px;
  border:2px solid var(--input-border);
  border-radius:8px;
  font-size:1rem;
  background:var(--input-bg);
  color:var(--input-text);
  transition:border-color .2s, box-shadow .2s;
}

.select-wrapper select:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

/* =========================
   Buttons
   ========================= */
.btn-suggest{
  background:linear-gradient(135deg,var(--secondary),color-mix(in srgb, var(--secondary) 70%, black 30%));
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s;
  white-space:nowrap;
}

.btn-suggest:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

.film-note,
.film-selection small{
  color:var(--muted);
  font-size:.85rem;
  display:block;
  margin-top:5px;
}

/* =========================
   Windows Header + Actions
   ========================= */
.windows-section{ margin-bottom:30px; }

.windows-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.windows-header h3{
  font-size:1.3rem;
  color:var(--text);
  margin:0;
}

.windows-header-smaller h3{
  font-size:18px;
  margin-bottom:15px;
  color:var(--muted);
}

.window-actions{ display:flex; gap:10px; }

.btn-add,
.btn-duplicate{
  padding:8px 16px;
  border:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, background .2s;
}

.btn-add{
  background:var(--success);
  color:white;
}

.btn-add:hover{
  background:color-mix(in srgb, var(--success) 85%, black 15%);
  transform:translateY(-1px);
}

.btn-duplicate{
  background:var(--surface-2);
  color:var(--muted);
  border:1px solid var(--border);
}

.btn-duplicate:hover{ background:var(--surface-3); }

/* =========================
   Selection Controls (Compact)
   ========================= */
.selection-controls{
  background:var(--surface-2);
  padding:12px 15px;
  border-radius:8px;
  margin-bottom:15px;
  border:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.selection-info{ font-weight:600; color:var(--muted); }
.selection-buttons{ display:flex; gap:10px; }

.btn-select-all,
.btn-deselect,
.btn-group-selected{
  padding:6px 12px;
  border:none;
  border-radius:6px;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
}

.btn-select-all{
  background:color-mix(in srgb, var(--primary) 16%, transparent);
  color:var(--text);
  border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}

.btn-select-all:hover{
  background:color-mix(in srgb, var(--primary) 24%, transparent);
}

.btn-deselect{
  background:var(--surface-3);
  color:var(--text);
  border:1px solid var(--border);
}

.btn-deselect:hover{ background:color-mix(in srgb, var(--surface-3) 70%, black 5%); }

.btn-group-selected{
  background:var(--success);
  color:white;
}

.btn-group-selected:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}

.btn-group-selected:disabled{
  background:rgba(148,163,184,.35);
  color:rgba(71,85,105,.85);
  cursor:not-allowed;
  border:1px dashed rgba(148,163,184,.60);
}

/* =========================
   Windows Table (Compact)
   ========================= */
.table-header{
  display:grid;
  /* Final column order/layout: checkbox, qty, width, height, group, remove */
  grid-template-columns: var(--window-cols);
  gap: var(--window-gap);
  padding:12px 15px;
  background:var(--surface-3);
  border-radius:6px 6px 0 0;
  border:1px solid var(--border);
  border-bottom:none;
  font-weight:600;
  color:var(--muted);
  font-size:.85rem;
  text-align:center;
}

.table-header > div{ text-align:center; }

.windows-list{
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 6px 6px;
  max-height:300px;
  overflow-y:auto;
}

.window-row{
  display:grid;
  grid-template-columns: var(--window-cols);
  gap: var(--window-gap);
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  align-items:center;
  background:var(--row-bg);
  transition:background .2s;
}

.window-row:last-child{ border-bottom:none; }
.window-row:hover{ background:var(--row-bg-hover); }

.window-checkbox-cell{
  display:flex;
  justify-content:center;
  align-items:center;
}

.window-checkbox{
  width:18px;
  height:18px;
  cursor:pointer;
}

.window-input,
.window-quantity-input{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--input-border);
  border-radius:4px;
  font-size:.9rem;
  text-align:center;
  color:var(--input-text);
  font-family:monospace;
  background:var(--input-bg);
  transition:border-color .2s, box-shadow .2s;
}

.window-input{ max-width:80px; min-width:0; }
.window-quantity-input{ max-width:60px; }

.window-input:focus,
.window-quantity-input:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.window-group-cell{
  text-align:center;
  overflow:hidden;
}

/* Badge uses variables so themes can decide */
.window-group-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:12px;
  font-size:.75rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90px;
  background:color-mix(in srgb, var(--primary) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  color:var(--text);
}

.btn-remove-window{
  width:32px;
  height:32px;
  background:color-mix(in srgb, var(--danger) 14%, transparent);
  color:var(--danger);
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius:4px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  transition:background .2s;
}

.btn-remove-window:hover{
  background:color-mix(in srgb, var(--danger) 22%, transparent);
}

/* =========================
   Bottom Window Controls
   ========================= */
.window-controls-bottom{
  margin-top:20px;
  padding:10px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
}


.btn-add-window{
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--border);
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  font-size:16px;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
  margin:0 5px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-add-window:visited{ color:inherit; }

.btn-add-window:hover{
  background:var(--surface-3);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

.btn-add-window:active{ transform:translateY(0); box-shadow:none; }

/* Contextual emphasis: bottom window buttons */
.window-controls-bottom .btn-add-window{
  background:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 55%, var(--border) 45%);
  color:#fff;
}
.window-controls-bottom .btn-add-window:hover{
  background:color-mix(in srgb, var(--primary) 88%, black 12%);
}
.window-controls-bottom .btn-add-window:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Blue outline secondary button */
.window-controls-bottom .btn-group-selected{
  background:transparent;
  color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 60%, var(--border) 40%);
}
.window-controls-bottom .btn-group-selected:hover{
  background:color-mix(in srgb, var(--primary) 10%, transparent);
}
.window-controls-bottom .btn-group-selected:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Destructive */
.window-controls-bottom .btn-delete-selected{
  background:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 60%, var(--border) 40%);
  color:#fff;
}
.window-controls-bottom .btn-delete-selected:hover{
  background:color-mix(in srgb, var(--danger) 88%, black 12%);
}
.window-controls-bottom .btn-delete-selected:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Select-all checkbox styling */
.select-all-checkbox{
  width:18px;
  height:18px;
  cursor:pointer;
}

/* Inline feedback below the windows list (used for group assignment confirmations) */
.windows-inline-notice{
  margin:12px 10px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--primary) 10%, var(--surface-2) 90%);
  color:var(--text);
  font-weight:700;
  font-size:14px;
  line-height:1.25;
  display:none;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .28s ease, transform .28s ease;
}
.windows-inline-notice.show{
  display:block;
  opacity:1;
  transform:translateY(0);
}
.windows-inline-notice.fade{
  opacity:0;
  transform:translateY(-2px);
}
/* =========================
   Main Action Buttons
   ========================= */
.main-actions{
  display:flex;
  gap:15px;
  margin-top:25px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

/* Mobile: keep primary actions within easy thumb reach */


/* NOTE: original .btn-optimize is intentionally hidden below (behavior kept) */
.btn-optimize,
.btn-clear{
  flex:1;
  padding:14px 20px;
  font-size:1rem;
  font-weight:600;
  border:none;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .2s, box-shadow .2s, background .2s;
  min-height:50px;
}

.btn-clear{
  background:var(--surface-3);
  color:var(--text);
  border:2px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.btn-clear:hover{ background:color-mix(in srgb, var(--surface-3) 80%, black 5%); }

.btn-error{
  background:var(--danger);
  color:white;
  margin-top:15px;
  padding:15px;
  border:none;
  border-radius:8px;
  font-size:1.1rem;
  font-weight:700;
  cursor:pointer;
}

/* Optimize Roll Size button (active primary action in your current UI) */
.btn-optimize-roll{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  border:none;
  padding:14px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  justify-content: center;
  font-size:16px;
  transition:transform .2s, box-shadow .2s, background .2s;
  display:flex;
  align-items:center;
  gap:8px;
}

.btn-optimize-roll:hover{
  background:linear-gradient(135deg,var(--primary-dark),color-mix(in srgb, var(--primary-dark) 70%, black 30%));
  transform:translateY(-2px);
  box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* =========================
   Results
   ========================= */
.results-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px solid var(--border);
}

.results-title{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

.results-title h2{
  margin:0;
  font-size:1.5rem;
  color:var(--text);
}

.btn-print-main{
  background:color-mix(in srgb, var(--muted) 70%, black 30%);
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:transform .2s, background .2s;
  white-space:nowrap;
}

.btn-print-main:hover{
  background:color-mix(in srgb, var(--muted) 60%, black 40%);
  transform:translateY(-1px);
}

.results-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin:20px 0;
}

.result-stat{
  background:var(--surface-2);
  padding:20px;
  border-radius:10px;
  text-align:center;
  border:1px solid var(--border);
  color:var(--text);
}

.stat-highlight{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  border:none;
}

.stat-label{
  display:block;
  font-size:.85rem;
  font-weight:700;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.stat-value{
  font-size:1.8rem;
  font-weight:900;
  margin-bottom:5px;
}

.result-stat small{ font-size:.8rem; opacity:.9; }

.savings-notice,
.rotation-notice{
  background:var(--notice-bg);
  padding:15px;
  border-radius:8px;
  margin-bottom:20px;
  border-left:4px solid var(--notice-left);
  color:var(--text);
}

/* =========================
   Cut Sheet (collapsible section)
   ========================= */
.cut-sheet-section{
  margin:20px 0;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}

.cut-sheet-toggle{
  background:var(--surface-2);
  padding:15px;
  margin:0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  user-select:none;
}

.cut-sheet-toggle:hover{ background:var(--surface-3); }

.toggle-icon{
  font-size:12px;
  color:var(--muted);
  display:inline-block;
  opacity:.85;
}

.cut-sheet{
  padding:20px;
  background:var(--surface);
}

.cut-sheet-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.cut-sheet-header h3{ margin:0; cursor:pointer; }

.btn-print-cut-sheet{
  background:color-mix(in srgb, var(--muted) 70%, black 30%);
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:4px;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
}

.btn-print-cut-sheet:hover{ background:color-mix(in srgb, var(--muted) 60%, black 40%); }

.cut-instruction{
  background:var(--surface);
  border:2px solid var(--border);
  padding:15px;
  border-radius:8px;
  margin-bottom:10px;
}

.cut-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.rotated-badge{
  background:var(--warning);
  color:white;
  padding:4px 8px;
  border-radius:4px;
  font-size:.8rem;
  font-weight:700;
}

.cut-details{ color:var(--muted); margin-bottom:5px; }

.cut-position{
  font-family:monospace;
  background:var(--surface-2);
  padding:8px;
  border-radius:4px;
  margin-top:5px;
}

.cut-dimensions{ font-size:.7rem; line-height:1.2; }
.cut-group{
  font-size:.7rem;
  font-weight:800;
  margin-top:2px;
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  padding:1px 4px;
  border-radius:3px;
}
.cut-rotated{ font-size:.8rem; margin-top:2px; }

/* =========================
   Cut Diagram (collapsible section)
   ========================= */
.cut-diagram-section{
  margin:20px 0;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}

.cut-diagram-toggle{
  background:var(--surface-2);
  padding:15px;
  margin:0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  user-select:none;
  text-align:left; /* formerly centered toggle */
}

.cut-diagram-toggle:hover{ background:var(--surface-3); }

.diagram-toggle-icon{
  font-size:12px;
  color:var(--muted);
}

.cut-diagram-content{
  padding:20px;
  background:var(--surface);
}

/* Container inside diagram content */
.cut-diagram-container{
  margin:30px 0;
  padding:20px;
  background:var(--surface);
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  border:1px solid var(--border);
}

.cut-diagram-container h3{
  margin-bottom:15px;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}

.diagram-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  padding:10px;
  background:var(--surface-2);
  border-radius:6px;
  font-size:.9rem;
  color:var(--text);
}

.diagram-info span{
  display:flex;
  align-items:center;
  gap:5px;
}

@media (max-width: 768px){
  .diagram-info{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}

.diagram-wrapper{
  position:relative;
  margin:20px 0;
  overflow:auto;
  border:2px solid color-mix(in srgb, var(--text) 55%, transparent);
  border-radius:8px;
  background:var(--surface-2);
}

.film-roll-diagram{
  position:relative;
  margin:0 auto;
  background:repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--surface-3) 70%, white 30%),
    color-mix(in srgb, var(--surface-3) 70%, white 30%) 10px,
    color-mix(in srgb, var(--surface-3) 80%, black 5%) 10px,
    color-mix(in srgb, var(--surface-3) 80%, black 5%) 20px
  );
  overflow:visible;
  min-height:200px;
}

.film-outline{
  position:absolute;
  inset:0;
  border:2px dashed color-mix(in srgb, var(--muted) 70%, transparent);
  pointer-events:none;
}

.cut-rectangle{
  position:absolute;
  box-sizing:border-box;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s, box-shadow .2s, opacity .2s;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,0.10);
}

.cut-rectangle:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,0.20);
  z-index:10;
}

.cut-label{
  text-align:center;
  padding:5px;
  font-size:.8rem;
  color:var(--text);
  background:rgba(255,255,255,0.90);
  border-radius:3px;
  line-height:1.2;
  max-width:90%;
}

.waste-area{
  position:absolute;
  background:repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--danger) 10%, transparent),
    color-mix(in srgb, var(--danger) 10%, transparent) 5px,
    color-mix(in srgb, var(--danger) 18%, transparent) 5px,
    color-mix(in srgb, var(--danger) 18%, transparent) 10px
  );
  border:1px dashed color-mix(in srgb, var(--danger) 55%, transparent);
  opacity:.7;
  display:flex;
  align-items:center;
  justify-content:center;
}

.waste-label{
  background:color-mix(in srgb, var(--danger) 85%, black 15%);
  color:white;
  padding:2px 6px;
  border-radius:3px;
  font-size:.7rem;
  font-weight:700;
}

/* Tooltip */
.cut-rectangle::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  background:color-mix(in srgb, var(--text) 85%, black 15%);
  color:white;
  padding:5px 10px;
  border-radius:4px;
  font-size:.8rem;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:100;
}

.cut-rectangle:hover::after{ opacity:1; }

.diagram-controls{
  display:flex;
  gap:10px;
  margin-top:15px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn-zoom,
.btn-reset{
  padding:8px 15px;
  border:none;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
}

.btn-zoom{
  background:var(--primary);
  color:white;
}
.btn-zoom:hover{ background:var(--primary-dark); }

.btn-reset{
  background:var(--muted);
  color:white;
}
.btn-reset:hover{ background:color-mix(in srgb, var(--muted) 70%, black 30%); }

.btn-print-diagram{
  padding:8px 15px;
  border:none;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
  background:var(--primary-dark);
  color:white;
}
.btn-print-diagram:hover{
  background:color-mix(in srgb, var(--primary-dark) 75%, black 25%);
}

@media (max-width: 768px){
  .cut-diagram-container{
    padding:12px;
    margin:16px 0;
  }
  .diagram-controls{
    justify-content:stretch;
  }
  .diagram-controls .btn-zoom,
  .diagram-controls .btn-reset,
  .diagram-controls .btn-print-diagram{
    flex:1 1 calc(50% - 10px);
    min-width:140px;
  }
  .cut-label{
    font-size:.72rem;
    padding:4px;
  }
}

.cut-legend{
  margin-top:20px;
  padding:15px;
  background:var(--surface-2);
  border-radius:8px;
  color:var(--text);
}

.cut-legend h4{ margin-bottom:10px; color:var(--text); }

.legend-items{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}

.legend-item{ display:flex; align-items:center; gap:10px; }

.legend-color{
  width:20px;
  height:20px;
  border-radius:4px;
  border:2px solid rgba(0,0,0,0.10);
}

.waste-color{
  background:repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--danger) 18%, white 82%),
    color-mix(in srgb, var(--danger) 18%, white 82%) 5px,
    color-mix(in srgb, var(--danger) 30%, white 70%) 5px,
    color-mix(in srgb, var(--danger) 30%, white 70%) 10px
  );
}

/* Legacy diagram toggle button (intentionally removed) */
.cut-diagram-toggle-btn{ display:none; }

/* =========================
   Modal
   ========================= */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
}

.modal-content{
  background:var(--surface);
  border-radius:12px;
  padding:30px;
  max-width:500px;
  width:100%;
  max-height:80vh;
  overflow:auto;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
}
.pfs-modal-title{
  font-weight:900;
  font-size:18px;
  margin-bottom:8px;
}
.pfs-modal-body{
  color:var(--text);
  opacity:0.85;
  line-height:1.45;
  margin-bottom:12px;
}
.pfs-modal-input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--input-border);
  background:#ffffff;
  color:#111827;
  margin-bottom:12px;
}
.pfs-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* Wider modals (viewers / settings) */
.modal-content.modal-content-wide{
  max-width: 980px;
}

/* =========================
   Job Outputs (Results)
   ========================= */
.job-outputs{
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
}

.job-outputs h3{
  margin: 0 0 12px;
  color: var(--text);
}

.job-output-buttons{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.job-output-buttons > .pfs-estimate-actions{
  display:grid;
  grid-template-columns:minmax(150px,1.4fr) repeat(2,minmax(72px,.7fr));
  grid-column:span 3;
  gap:8px;
}

.pfs-estimate-delivery-note{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}


.btn-output{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}

.btn-output:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
}

.btn-output-primary{
  background: color-mix(in srgb, var(--primary) 16%, var(--surface) 84%);
  border-color: color-mix(in srgb, var(--border) 65%, var(--primary) 35%);
}

.job-output-note{ margin-top: 10px; color: var(--muted); }

/* =========================
   Modal buttons + layout
   ========================= */
.btn-primary,
.btn-secondary{
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--border);
}

.btn-primary{
  background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
  color: var(--text);
}

.btn-secondary{
  background: var(--surface);
  color: var(--text);
}

.fy-muted{ color: var(--muted); }

/* =========================
   Viewer modal
   ========================= */
.fy-viewer{ display: flex; flex-direction: column; gap: 12px; }
.fy-viewer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.fy-viewer-header h3{ margin:0; color: var(--text); }
.fy-viewer-actions{ display:flex; gap:8px; flex-wrap: wrap; justify-content:flex-end; }
.fy-viewer-body{ min-height: 80px; }
.fy-viewer-body .cut-diagram-container{ margin-top: 0; }

/* =========================
   Settings modal
   ========================= */
.fy-settings{ display:flex; flex-direction: column; gap: 12px; }
.fy-settings-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fy-settings-header h3{ margin:0; }
.fy-settings-close{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.fy-tabs{ display:flex; gap: 8px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--border); border-radius: 12px; }
.fy-tabbtn{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}
.fy-tabbtn.active{
  border-color: color-mix(in srgb, var(--border) 60%, var(--primary) 40%);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface) 88%);
}
.fy-tab{ display:none; }
.fy-tab.active{ display:block; }

.fy-section{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
}
.fy-section h4{ margin: 0 0 10px; }
.fy-form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fy-field label{ display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 800; }
.fy-field input,
.fy-field textarea,
.fy-field select{
  width:100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.fy-field textarea{ min-height: 90px; resize: vertical; }

.fy-list{ display:flex; flex-direction:column; gap: 10px; }
.fy-row{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.fy-row > *{ flex: 1 1 auto; }
.fy-row .fy-tight{ flex: 0 0 auto; }
.fy-mini{ font-size: 12px; color: var(--muted); }
.fy-error{ color: #ef4444; }

.fy-film{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}
.fy-film-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fy-film-title{ font-weight: 900; }
.fy-icon-btn{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.fy-settings-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 6px;
}
.fy-settings-status{ color: var(--muted); font-weight: 800; }

/* =========================
   Quote modal
   ========================= */
.fy-quote{ display:flex; flex-direction: column; gap: 12px; }
.fy-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.fy-sub{ color: var(--muted); font-weight: 800; font-size: 12px; }
.fy-close{
  /* Make the close X pop (it was blending into the modal background) */
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(148,163,184,.10);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.fy-close:hover{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
  transform: translateY(-1px);
}
.fy-close:active{ transform: translateY(0); }
.fy-close:focus-visible{ outline: 2px solid rgba(37,99,235,.55); outline-offset: 2px; }
.fy-card{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
  margin-bottom: 12px;
}
.fy-card-title{ font-weight: 900; margin-bottom: 10px; color: var(--text); }
.fy-form-row{ display:flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.fy-form-row label{ font-size: 12px; font-weight: 900; color: var(--muted); }
.fy-form-row input,
.fy-form-row select{
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.fy-inline{ flex-direction: row; align-items:center; justify-content:space-between; }
.fy-check{ display:flex; align-items:center; gap: 10px; color: var(--text); font-weight: 900; }
.fy-hint{ color: var(--muted); font-size: 12px; font-weight: 700; }
.fy-actions{ display:flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.fy-addons{ display:flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.fy-addon-row{ display:flex; gap: 10px; align-items:center; }
.fy-addon-row input{ flex: 1 1 auto; }
.fy-addon-row .fy-icon-btn{ flex: 0 0 auto; }
.fy-summary{ position: sticky; top: 10px; }
.fy-quote-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}
/* Force single-column stacking when requested */
.fy-quote-grid.fy-quote-stack{ grid-template-columns: 1fr; }

.fy-quote-card{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
}
.fy-quote-card h4{ margin: 0 0 10px; }
.fy-btn{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.fy-btn:hover{ border-color: color-mix(in srgb, var(--border) 65%, var(--primary) 35%); }
.fy-btn-secondary{ background: var(--surface); }
.fy-kv{ display:flex; justify-content:space-between; gap: 10px; margin: 6px 0; }
.fy-kv strong{ color: var(--text); }
.fy-kv span{ color: var(--muted); }
.fy-divider{ height:1px; background: var(--border); margin: 10px 0; }


.suggestion-modal{ text-align:center; }
.suggestion-modal h3{ color:var(--text); margin-bottom:20px; }

.width-comparison{
  display:flex;
  flex-direction:column;
  gap:15px;
  margin:20px 0;
}

.width-option{
  border:2px solid var(--border);
  border-radius:10px;
  padding:15px;
  text-align:left;
  position:relative;
  transition:transform .2s, border-color .2s;
  background:var(--surface);
}

.width-option:hover{
  border-color:color-mix(in srgb, var(--border) 75%, black 10%);
  transform:translateY(-2px);
}

.best-choice{
  border-color:var(--success);
  background:color-mix(in srgb, var(--success) 8%, transparent);
}

.current-choice{ border-color:var(--primary); }

.width-size{
  font-size:1.5rem;
  font-weight:900;
  color:var(--text);
  margin-bottom:10px;
}

.width-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.width-stats .stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.width-stats .label{ font-size:.85rem; color:var(--muted); }
.width-stats .value{ font-weight:700; color:var(--text); }
.best-value{ color:var(--success); font-weight:900; }

.best-badge,
.current-badge{
  position:absolute;
  top:-10px;
  right:15px;
  padding:4px 12px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:900;
  text-transform:uppercase;
  color:white;
}

.best-badge{ background:var(--success); }
.current-badge{ background:var(--primary); }

.suggestion-action{
  margin-top:25px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

.suggestion-action p{ margin-bottom:15px; color:var(--muted); }

.btn-apply{
  background:linear-gradient(135deg,var(--success),color-mix(in srgb, var(--success) 75%, black 25%));
  color:white;
  border:none;
  padding:12px 30px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  font-size:1rem;
  transition:transform .2s, box-shadow .2s;
}

.btn-apply:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px color-mix(in srgb, var(--success) 30%, transparent);
}

.btn-close-suggestion{
  background:var(--muted);
  color:white;
  border:none;
  padding:10px 25px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  margin-top:20px;
  transition:background .2s;
}

.btn-close-suggestion:hover{
  background:color-mix(in srgb, var(--muted) 70%, black 30%);
}

/* =========================
   Footer
   ========================= */
footer{
  background:var(--surface);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

.footer-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-bottom:20px;
}


.footer-left h3{ color:var(--text); margin-bottom:10px; }
.footer-right p{ margin-bottom:10px; color:var(--muted); }

.footer-bottom{
  text-align:center;
  padding-top:20px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.9rem;
}

/* =========================
   Loading / Placeholder / Error
   ========================= */
#loading{ text-align:center; padding:40px; }

.loader{
  border:4px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-top:4px solid var(--primary);
  border-radius:50%;
  width:50px;
  height:50px;
  animation:spin 1s linear infinite;
  margin:0 auto 20px;
}

@keyframes spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

.placeholder{
  text-align:center;
  padding:34px 16px;
  color:var(--muted);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--surface-2) 85%, white 15%),
    var(--surface-2)
  );
  border:1px solid var(--border);
  border-radius:16px;
}

.placeholder-icon{
  font-size:4rem;
  margin-bottom:20px;
  opacity:.5;
}

.error-message{
  background:linear-gradient(135deg, rgba(254,226,226,.9), rgba(254,202,202,.9));
  border-left:4px solid var(--danger);
  padding:20px;
  border-radius:16px;
}

.error-message h3{ color:var(--danger); margin-bottom:10px; }

/* =========================
   Responsive
   ========================= */


/* Mobile number input styling */
input[type="number"]{ -webkit-appearance:none; -moz-appearance:textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

/* =========================
   Intentional Deactivation / Behavior Overrides
   (kept from your working CSS)
   ========================= */

/* Hide old group management section (intentionally disabled) */
.group-management{ display:none !important; }

/* Hide film note + duplicate button (intentional) */
.film-note{ display:none !important; }
.btn-duplicate{ display:none !important; }

/* Fix duplicate header issue (keep) */
.results-section h2{ display:none; }
.results-section .results-header h2{ display:block; }

/* Hide print button from results header (you moved it to cut sheet header) */
.results-title .btn-print-main{ display:none; }

/* Hide rotation notice in diagram */
.rotation-notice{ display:none !important; }

/* Ensure groups summary starts collapsed */
#groupsSummaryContainer .groups-content{ display:none; }
#groupsSummaryContainer.active .groups-content{ display:block; }
#groupsSummaryContainer .groups-toggle-icon{ transform:rotate(0deg); }
#groupsSummaryContainer.active .groups-toggle-icon{ transform:rotate(90deg); }

/* Hide old optimize button (your UI uses .btn-optimize-roll now) */
.btn-optimize{ display:none; }

/* Keep toggle arrows visible (your earlier CSS accidentally hid them) */
.icon,
h2::before, h3::before,
.btn::before{
  display:none !important;
}
.toggle-icon,
.groups-toggle-icon{
  display:inline-block !important;
  opacity:.85;
  font-size:.85rem;
}

/* Header menu (gear dropdown) */
.header-menu{ position:relative; z-index: 2000; }
.header-menu{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.gear-btn,
.menu-btn,
.pfs-whats-new-btn{
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--border);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  color:inherit;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.gear-btn:hover,
.menu-btn:hover,
.pfs-whats-new-btn:hover{ background:var(--surface-3); box-shadow:0 10px 24px rgba(0,0,0,.10); transform:translateY(-1px); }
.gear-btn:active,
.menu-btn:active,
.pfs-whats-new-btn:active{ transform:translateY(0); box-shadow:none; }
.pfs-whats-new-btn{
  position:relative;
}
.pfs-whats-new-btn.has-new-update{
  background:color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--primary) 62%, var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.pfs-whats-new-btn.has-new-update::after{
  content:"";
  position:absolute;
  right:7px;
  top:7px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:color-mix(in srgb, var(--primary) 84%, white);
  box-shadow:0 0 0 2px var(--surface);
}
.pfs-whats-new-btn.has-new-update:hover{
  background:color-mix(in srgb, var(--primary) 16%, var(--surface));
}

.bug-btn{
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 40%, var(--border) 60%);
  color:color-mix(in srgb, var(--danger) 88%, #ffffff 12%);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .12s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.menu-btn .btn-icon,
.pfs-whats-new-btn .btn-icon,
.bug-btn .btn-icon{
  font-size:18px;
  line-height:1;
  display:none;
}
.menu-btn .btn-label,
.pfs-whats-new-btn .btn-label,
.bug-btn .btn-label{
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.pfs-whats-new{
  position:relative;
  max-width:640px;
  padding:2px 4px 4px;
}
.pfs-whats-new-close{
  position:absolute;
  right:-2px;
  top:-6px;
  border:none;
  background:transparent;
  color:inherit;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  opacity:.76;
}
.pfs-whats-new-close:hover{ opacity:1; }
.pfs-whats-new-kicker{
  margin:0 0 6px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pfs-whats-new h2{
  margin:0 32px 8px 0;
  font-size:1.5rem;
  line-height:1.15;
}
.pfs-whats-new-lede{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.5;
}
.pfs-whats-new-section{
  margin:0 0 16px;
}
.pfs-whats-new-section h3{
  margin:0 0 8px;
  font-size:.95rem;
  line-height:1.2;
  color:var(--text);
}
.pfs-whats-new-list{
  margin:0;
  padding:0 0 0 18px;
  color:var(--text);
}
.pfs-whats-new-list li{
  padding:0 0 8px 2px;
  line-height:1.45;
}
.pfs-whats-new-list li:last-child{
  padding-bottom:0;
}
.pfs-whats-new-list li::marker{
  color:color-mix(in srgb, var(--primary) 72%, var(--text));
}
.pfs-whats-new-history{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.86rem;
}
.bug-btn:hover{
  background:color-mix(in srgb, var(--danger) 18%, var(--surface));
  border-color:color-mix(in srgb, var(--danger) 58%, var(--border));
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transform:translateY(-1px);
}
.bug-btn:active{ transform:translateY(0); box-shadow:none; }

.pfs-bug-modal{
  position:fixed;
  inset:0;
  background:rgba(10,14,22,.55);
  backdrop-filter: blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:2300;
}
.pfs-bug-modal.open{ display:flex; }
.pfs-bug-modal-card{
  width:min(680px, 100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:18px 18px 16px;
  position:relative;
}
.pfs-bug-modal-card h3{
  margin:0 0 14px;
  font-size:1.05rem;
}
.pfs-bug-close{
  position:absolute;
  right:10px;
  top:8px;
  border:none;
  background:transparent;
  color:inherit;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  opacity:.8;
}
.pfs-bug-close:hover{ opacity:1; }
.pfs-bug-form{
  display:grid;
  gap:8px;
}
.pfs-bug-form label{
  font-size:.86rem;
  font-weight:600;
}
.pfs-bug-form input[type="text"],
.pfs-bug-form input[type="file"],
.pfs-bug-form select,
.pfs-bug-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text);
  padding:9px 10px;
}
.pfs-bug-form textarea{
  resize:vertical;
  min-height:76px;
}
.pfs-bug-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500 !important;
}
.pfs-bug-checkbox input{ margin:0; }
.pfs-bug-form .req{ color:var(--danger); }
.pfs-bug-help{
  font-size:.78rem;
  color:var(--text-muted);
  margin-top:-2px;
}
.pfs-bug-status{
  min-height:20px;
  font-size:.86rem;
  color:var(--text-muted);
}
.pfs-bug-status.error{ color:var(--danger); }
.pfs-bug-status.ok{ color:#16a34a; }
.pfs-bug-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}
.menu-dropdown{
  position:absolute;
  right:0;
  top:100%;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  min-width:190px;
  box-shadow:var(--shadow);
  z-index: 2001;
  backdrop-filter: blur(10px);
}

@media (max-width: 640px){
  header{ padding:10px 12px; }
  .app-title-wrap{ align-items:center; justify-content:space-between; gap:10px; }
  .app-title-text h1{ font-size:1.15rem; white-space:nowrap; }
  .app-title-text p{ font-size:.75rem; white-space:nowrap; }
  .app-logo{ display:none; }
  .header-menu{ margin-left:auto; }
  .menu-dropdown{ right:0; top:44px; }
  .pfs-plan-badge{ display:none !important; }
}
.menu-dropdown button{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 10px;
  border:none;
  background:none;
  cursor:pointer;
  color:var(--text);
}
.menu-dropdown button:hover{ background:var(--surface-3); border-radius:10px; }

.menu-dropdown .menu-link{
  display:block;
  width:100%;
  text-align:left;
  padding:8px;
  border:none;
  background:none;
  cursor:pointer;
  color:var(--text);
  text-decoration:none;
 }

.menu-dropdown .menu-link:hover{
  background:rgba(255,255,255,.06);
  border-radius:6px;
 }

.menu-divider {
  height: 1px;
  margin: 10px 0;
  background: rgba(148, 163, 184, 0.25);
}

.menu-theme-row {
  display: grid;
  gap: 6px;
  padding: 6px 8px;
}

.menu-theme-label {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 600;
}

.menu-theme-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  color: inherit;
}

/* ---------------------------
   MOBILE-FIRST: prevent overflow
   - We control the window table layout via CSS vars
   - Group column removed (rows are color-coded)
--------------------------- */

/* Desktop / default */
:root {
  --window-cols: 40px 60px minmax(0, 1fr) minmax(0, 1fr) 56px;
  --window-gap: 8px;
}


/* Force the "Window Dimensions" header to truly center */
.section-header-centered {
  text-align: center;
}

.section-header-centered h2 {
  display: block !important;      /* overrides .card h2 { display:flex } */
  width: 100%;
  text-align: center !important;
  margin: 0 auto 5px auto;
}

/* ---------------------------------------
   Mobile input focus zoom fix (iOS Safari)
   Prevents auto-zoom by using >= 16px font
--------------------------------------- */


html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------------------------------------
   Mobile framing / centering fix
--------------------------------------- */


/* =========================
   Summary (Groups -> Windows)
   ========================= */

.groups-summary-container.active {
  margin-top: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 14px;
  overflow: hidden;
}

.summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.summary-header h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.summary-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.summary-groups {
  padding: 8px;
  display: grid;
  gap: 8px;
}

.summary-group {
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
}

.summary-group[open] {
  box-shadow: var(--shadow);
}

/* Hide default <details> marker */
.summary-group > summary {
  list-style: none;
}
.summary-group > summary::-webkit-details-marker {
  display: none;
}

.summary-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

.summary-group-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.summary-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
  flex: 0 0 auto;
}

.summary-group-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.group-rename-btn {  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  opacity: 0.75;
  border-radius: 10px;
  padding: 4px 8px;
  line-height: 1;
  cursor: pointer;
}

.group-rename-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  opacity: 1;
}

.group-rename-btn:active {
  transform: translateY(1px);
}


.summary-group-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.summary-pill {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.summary-chevron {
  font-size: 14px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.summary-group[open] .summary-chevron {
  transform: rotate(180deg);
}

.summary-group-body {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.summary-table {
  display: grid;
  gap: 6px;
}

.summary-row {
  display: grid;
  grid-template-columns: 60px 1fr 110px 110px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
}

.summary-row.summary-head {
  background: var(--surface-3);
  font-weight: 700;
  color: var(--text);
}

.summary-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 2px;
}


/* styling for load job modal */
.job-pick{ min-width: min(560px, 92vw); }
.job-pick-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.job-pick-header h3{ margin:0; font-weight:900; }
.job-pick-close{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

.job-pick-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: min(55vh, 520px);
  overflow:auto;
  padding-right:6px;
}

.job-pick-item{
  text-align:left;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  transition:transform .12s, filter .12s;
}
.job-pick-item:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.job-pick-title{ font-weight:900; }
.job-pick-meta{ color:var(--muted); font-size:.85rem; margin-top:2px; }

.job-pick-footer{ display:flex; justify-content:flex-end; margin-top:12px; }
.job-pick-cancel{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}

/* Prevent horizontal scrolling in modal content */
.modal-content{
  max-width: min(640px, 94vw);
  width: min(640px, 94vw);
  overflow-x: hidden;
}

/* Load Job picker */
.job-pick{
  width: 100%;
  max-width: 640px;
}

.job-pick-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.job-pick-header h3{
  margin:0;
  font-weight:900;
}

.job-pick-close{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

/* Search */
.job-pick-search{
  margin-bottom:10px;
}

.job-pick-search input{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--input-border);
  border-radius:10px;
  background:var(--input-bg);
  color:var(--input-text);
}

.job-pick-search input:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

/* List */
.job-pick-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: min(55vh, 520px);
  overflow-y:auto;
  overflow-x:hidden;     /* <-- key */
  padding-right:6px;
}

.job-pick-item{
  text-align:left;
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  transition:transform .12s, filter .12s;
}

.job-pick-item:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

.job-pick-title{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;   /* <-- prevents long names forcing width */
}

.job-pick-meta{
  color:var(--muted);
  font-size:.85rem;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;   /* <-- prevents sideways scrolling */
}

.job-pick-empty{
  color:var(--muted);
  padding:10px 2px;
}

.job-pick-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}

.job-pick-cancel{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}


/* Job manager additions (tabs + row actions) */
.job-pick-tabs{
  display:flex;
  gap:8px;
  margin: 4px 0 12px 0;
}

.job-pick-tab{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
}

.job-pick-tab.is-active{
  background: color-mix(in srgb, var(--primary) 14%, var(--surface) 86%);
}

.job-pick-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
}

.job-pick-main{ min-width:0; }
.job-pick-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.btn-mini{
  padding:6px 10px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.btn-mini.btn-danger{
  background: color-mix(in srgb, var(--danger) 16%, var(--surface) 84%);
}


.app-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.app-logo{
  height:44px;
  width:auto;
  flex:0 0 auto;
}

.app-title-text h1{
  margin:0;
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.1;
}
.app-title-text p{
  margin:2px 0 0 0;
  opacity:.85;
  font-size:.92rem;
}

.job-actions-centered{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

/* ================================
   BUTTON ROWS: MOBILE-FIRST TOOLBARS (no overflow / no tiny buttons)
   - Desktop/tablet: wraps naturally
   - Phones: becomes a scrollable "chip" row
   ================================ */

.job-actions.job-actions-centered,
.window-controls-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
}

/* Primary emphasis: first job action (New Job) */
.job-actions.job-actions-centered button:first-child{
  background: var(--primary);
  color:#fff;
  border:1px solid color-mix(in srgb, var(--primary) 55%, var(--border) 45%);
}

/* Phone toolbar: horizontal scrolling chips (fast to tap, no wrap chaos) */

/* =========================================
   WINDOWS LIST: GROW DOWN (NO INTERNAL SCROLLBARS)
   ========================================= */

/* The list itself should never scroll; let the page scroll */
#windowsList,
.windows-list{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* If the wrapper is forcing scrollbars, disable them too */
.windows-section,
.windows-card,
.job-details.windows-card{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Prevent horizontal scrollbar caused by grid/table widths */
.window-row,
.table-header{
  width: 100%;
  box-sizing: border-box;
}

/* If any cell content causes overflow, allow wrapping or shrink */
.window-row input{
  max-width: 100%;
  box-sizing: border-box;
}

/* Safety: kill any accidental horizontal scroll */
.windows-section,
.windows-card,
#windowsList,
.windows-list{
  overflow-x: hidden !important;
}

/* =========================
   Collapsible Cards (Job Details / Windows / Summary)
   ========================= */
details.collapsible-card > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details.collapsible-card > summary::-webkit-details-marker {
  display: none;
}

details.collapsible-card .collapse-indicator {
  font-size: 0.95rem;
  color: var(--muted);
  transition: transform .15s ease;
}

/* Closed: chevron points right-ish */
details.collapsible-card:not([open]) .collapse-indicator {
  transform: rotate(-90deg);
}

/* Small spacing polish so collapsed headers look clean */
details.collapsible-card > summary.job-details-header {
  margin-bottom: 10px;
}
details.collapsible-card:not([open]) > summary.job-details-header {
  margin-bottom: 0;
}

/* =========================
   Customer Grid Layout
   Desktop: Name (full)
            Street | City | State | Zip
            Phone (left) | Email (right)
   Mobile:  Name
            Street
            City | State
            Zip
            Phone
            Email
   ========================= */
.job-details-grid.customer-grid{
  display:grid;
  gap:12px 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.customer-section-title{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.job-details-grid.customer-grid .field-customer{ grid-column: 1 / span 3; }
.job-details-grid.customer-grid .field-phone{ grid-column: 4 / span 3; }

.job-details-grid.customer-grid .field-street{ grid-column: 1 / span 3; }
.job-details-grid.customer-grid .field-email{ grid-column: 4 / span 3; }

.job-details-grid.customer-grid .field-city{ grid-column: 1 / span 3; }
.job-details-grid.customer-grid .field-state{ grid-column: 4 / span 1; }
.job-details-grid.customer-grid .field-zip{ grid-column: 5 / span 2; }
.job-details-grid.customer-grid .field-billing-toggle{ grid-column: 1 / -1; }

.customer-billing-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:2px 0 0;
  color:var(--text);
  font-size:.9rem;
  font-weight:800;
  cursor:pointer;
}

.customer-billing-toggle .customer-billing-checkbox{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin:0;
  border-radius:0 !important;
  background:initial !important;
  box-shadow:none !important;
  cursor:pointer;
}

.customer-billing-fields{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px 14px;
  padding:2px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
}

.customer-billing-fields[hidden]{
  display:none !important;
}

.customer-billing-title{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.customer-billing-fields .field-billing-contact{ grid-column:1 / span 3; }
.customer-billing-fields .field-billing-phone{ grid-column:4 / span 3; }
.customer-billing-fields .field-billing-email{ grid-column:1 / span 3; }
.customer-billing-fields .field-billing-street{ grid-column:4 / span 3; }
.customer-billing-fields .field-billing-city{ grid-column:1 / span 3; }
.customer-billing-fields .field-billing-state{ grid-column:4 / span 1; }
.customer-billing-fields .field-billing-zip{ grid-column:5 / span 2; }

/* tiny UX improvements for State */
#jobState,
#jobBillingState {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* Summary header inline meta */
.summary-header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.summary-meta-inline{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.2;
}


/* Header right-side meta (Job Details / Windows / Summary) */
.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.meta-inline{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 46ch;
}


/* Roll size selected (shown above result stats) */
.roll-size-selected{
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
}

.roll-size-label{
  color: var(--muted);
  font-weight: 600;
}

.roll-size-value{
  font-size: 1rem;
}


.cut-rectangle .cut-label{
  font-size: 14px;
  line-height: 1.15;
}

.cut-rectangle .cut-label strong{
  font-size: 16px;
}

/* =========================
   Settings (in-page)
   ========================= */
.settings-page{ margin-top: 12px; }
.settings-card{ padding: 16px; }
.settings-header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.settings-title{ margin: 0; }
.settings-subtitle{ margin: 4px 0 0; color: var(--muted); font-weight: 800; font-size: 12px; }
.fy-settings-subnote{
  margin-top:4px;
  color:#8a6a21;
  font-weight:850;
}
.settings-home-btn{
  flex:0 0 auto;
  min-width:78px;
  min-height:40px;
  padding:9px 17px !important;
  border:1px solid rgba(177,132,49,.34) !important;
  border-radius:999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,246,240,.92)) !important;
  color:#111318 !important;
  font-weight:950 !important;
  line-height:1 !important;
  white-space:nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 10px 24px rgba(17,19,24,.055) !important;
}
.settings-home-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(177,132,49,.52) !important;
  background:linear-gradient(180deg, #fff, #faf7ed) !important;
}
.btn-secondary{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.fy-tabbar{ display:flex; gap: 8px; flex-wrap:wrap; margin: 8px 0 14px; }
.fy-tabbar-nowrap{ flex-wrap: nowrap; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.fy-tabbar-nowrap::-webkit-scrollbar{ height: 6px; }
.fy-tabbar-nowrap::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--border) 60%, transparent); border-radius: 999px; }
.fy-tabbar-nowrap .fy-tab-btn{ white-space: nowrap; }

.fy-tab-btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.fy-tab-btn.active{
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border) 45%);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface) 84%);
}
.fy-mode-description{
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}
.fy-tab-panel{ display:none; }
.fy-tab-panel.active{ display:block; }

.fy-wysiwyg-toolbar{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--surface);
}
.fy-wysiwyg-btn{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.fy-wysiwyg{
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.fy-wysiwyg:empty:before{ content: attr(data-placeholder); color: var(--muted); }


/* ==================== JOB MANAGER (PIPELINE) ==================== */
.jobmgr{ width:min(1100px, 94vw); }
.jobmgr-top{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.jobmgr-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.jobmgr-title-text{ font-weight:900; font-size:1.05rem; }
.jobmgr-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.jobmgr-tab{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}
.jobmgr-tab.active{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.jobmgr-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  font-size:.8rem;
  padding:0 6px;
}
.jobmgr-controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.jobmgr-search{
  flex:1 1 420px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.jobmgr-sort{
  flex:0 0 auto;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.jobmgr-footer{ display:flex; justify-content:flex-end; margin-top:12px; }

.job-board{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:12px;
}


.job-col{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:260px;
}
.job-col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.job-col-title{ font-weight:900; }
.job-col-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  font-size:.85rem;
  padding:0 8px;
}
.job-col-list{ padding:10px; display:flex; flex-direction:column; gap:10px; }
.job-col-empty{ color:var(--muted); font-size:.9rem; padding:8px; border:1px dashed var(--border); border-radius:12px; }

.job-card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:10px 10px 8px 10px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.job-card-name{ font-weight:900; }
.job-card-meta{ display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.job-card-when{ color:var(--muted); font-size:.85rem; }
.job-card-sub{ color:var(--muted); font-size:.85rem; margin-top:6px; }

.job-status-pill{
  display:inline-flex; align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
  font-size:.78rem;
  color:var(--text);
  background:color-mix(in srgb, var(--surface-2) 75%, transparent);
}

.job-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.job-status-select{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:10px;
  padding:6px 8px;
  outline:none;
}

/* Archived list */
.job-arch-list{ display:flex; flex-direction:column; gap:10px; }
.job-arch-row{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.job-arch-title{ font-weight:900; }
.job-arch-meta{ color:var(--muted); font-size:.85rem; margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.job-arch-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }


/* ==================== JOB MANAGER PAGE (LIST VIEW) ==================== */
.jobmgr-controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.jobmgr-viewtoggle{ display:flex; gap:6px; }
.jobmgr-viewbtn{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
  line-height:1;
}
.jobmgr-viewbtn.active{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}
.job-list{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  overflow:hidden;
}
.job-list-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-weight:800;
}
.job-list-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.job-list-row:last-child{ border-bottom:none; }
.job-list-main{ min-width:240px; }
.job-list-name{ font-weight:900; }
.job-list-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px; opacity:.95; }
.job-list-sub{ opacity:.9; }
.job-list-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.job-arch{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  overflow:hidden;
}
.job-arch-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-weight:800;
}
.job-arch-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.job-arch-row:last-child{ border-bottom:none; }
.job-arch-name{ font-weight:900; }
.job-arch-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px; opacity:.95; }
.job-arch-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }


/* ==================== JOB PICKER (Load Job modal) ==================== */
.jobpick{ width:100%; max-width:900px; }
.jobpick-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.jobpick-title{ font-weight:900; font-size:1.05rem; }
.jobpick-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.jobpick-tab{
  display:flex; align-items:center; gap:8px;
  border:1px solid transparent;
  background:rgba(255,255,255,.02);
  color:var(--muted);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}
.jobpick-tab.active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:var(--text);
}
.jobpick-count{ opacity:.85; font-weight:800; }
.jobpick-controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.jobpick-search, .jobpick-status, .jobpick-sort{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
}
.jobpick-search{ flex:1 1 260px; min-width:240px; }
.jobpick-list{ display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto; padding-right:4px; }
.jobpick-row{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.jobpick-row-name{ font-weight:900; }
.jobpick-row-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px; opacity:.95; }
.jobpick-row-when{ opacity:.85; }
.jobpick-row-sub{ opacity:.9; }
.jobpick-row-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.jobpick-footer{ display:flex; justify-content:flex-end; margin-top:12px; }


/* Embedded Job Manager header (index.html #jobs view) */
.jobmgr-embed-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.jobmgr-embed-title{
  font-weight:900;
  font-size:1.05rem;
}


/* ==================== Quote + Job Details (Inline) ==================== */
.fy-panel-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(2,6,23,0.10);
  padding: 14px;
}

.fy-panel-header{
  display:flex;
  flex-direction:column;
  gap: 4px;
  margin-bottom: 10px;
}

.fy-panel-subtitle{
  color: var(--muted);
  font-size: 13px;
}

.fy-form-grid{
  display: grid;
  gap: 10px;
}


.fy-field label{
  display:block;
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
  margin-bottom: 6px;
}

.fy-field input, .fy-field select, .fy-field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  color: var(--text);
  padding: 12px 12px;
  outline: none;
}

.fy-field textarea{
  min-height: 84px;
  resize: vertical;
  font: inherit;
  line-height: 1.35;
}

.fy-job-details-panel{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.fy-job-details-panel .fy-panel-header{
  margin-bottom: 12px;
}

.fy-job-details-panel .fy-panel-subtitle{
  color: #5f6872;
  font-size: .78rem;
  line-height: 1.35;
}

.fy-job-details-panel .fy-field input,
.fy-job-details-panel .fy-field select,
.fy-job-details-panel .fy-field textarea{
  border-radius: 8px;
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  padding: 8px 10px;
  font-size: .95rem;
}

.fy-job-details-panel .fy-field input:focus,
.fy-job-details-panel .fy-field select:focus,
.fy-job-details-panel .fy-field textarea:focus{
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring);
}

.fy-job-details-panel .fy-field label{
  color: #5f6872;
  font-size: .78rem;
  font-weight: 700;
}

.fy-job-details-panel .fy-help{
  color: #5f6872;
}

.fy-jobdetails-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.fy-job-section{
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.fy-job-section:first-child{
  padding-top: 0;
  border-top: 0;
}

.fy-job-section-inline{
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
}

.fy-window-section{
  grid-column: auto;
}

.fy-section-head{
  min-width: 0;
}

.fy-section-head h4{
  margin: 0;
  color: #5f6872;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fy-section-head p{
  display: none;
}

.fy-sun-preview-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fy-sun-preview-open{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent-2, #2563eb);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.2;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.fy-sun-preview-open:hover{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fy-sun-preview{
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  color: inherit;
}

.fy-sun-preview.is-loading .fy-sun-preview-compass{
  opacity: .72;
}

.fy-sun-preview-compass{
  width: 104px;
  aspect-ratio: 1;
  min-width: 0;
}

.fy-sun-mini-svg{
  display: block;
  width: 100%;
  height: 100%;
}

.fy-sun-mini-ring{
  fill: #f8fafc;
  stroke: color-mix(in srgb, var(--border) 82%, #64748b);
  stroke-width: 1.6;
}

.fy-sun-mini-inner{
  fill: none;
  stroke: color-mix(in srgb, var(--border) 64%, transparent);
  stroke-width: 1.1;
  stroke-dasharray: 2.5 4.5;
}

.fy-sun-mini-north{
  fill: color-mix(in srgb, var(--text) 82%, #334155);
  opacity: .75;
}

.fy-sun-mini-path-track{
  fill: none;
  stroke: color-mix(in srgb, #f59e0b 18%, var(--border));
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .28;
}

.fy-sun-mini-path{
  fill: none;
  stroke: url(#fySunMiniArcGradient);
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fy-sun-mini-event-label{
  fill: #5f6872;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  dominant-baseline: middle;
}

.fy-sun-mini-peak-tick{
  stroke: #7c2d12;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .9;
}

.fy-sun-mini-event-label{
  font-size: 7.4px;
  font-weight: 950;
}

.fy-sun-mini-rise-dot,
.fy-sun-mini-set-dot{
  fill: #facc15;
  stroke: #fff;
  stroke-width: 1.6;
}

.fy-sun-mini-noon-dot{
  fill: #f97316;
  stroke: #fff;
  stroke-width: 1.8;
}

.fy-sun-mini-dot{
  fill: #0f172a;
  stroke: #fff;
  stroke-width: 1.6;
}

.fy-sun-mini-label{
  fill: #5f6872;
  font: 800 10px system-ui, -apple-system, Segoe UI, Roboto, Arial;
  text-anchor: middle;
  dominant-baseline: middle;
}

.fy-sun-preview-main{
  display: grid;
  gap: 5px;
  min-width: 0;
}

.fy-sun-preview-status{
  color: inherit;
  font-size: .95rem;
  font-weight: 850;
  line-height: 1.2;
}

.fy-sun-preview-detail{
  color: #5f6872;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fy-sun-preview-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 2px;
}

.fy-sun-preview-stats div{
  min-width: 0;
}

.fy-sun-preview-stats span{
  display: block;
  color: #5f6872;
  font-size: .66rem;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.fy-sun-preview-stats strong{
  display: block;
  min-width: 0;
  color: inherit;
  font-size: .73rem;
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fy-segmented{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.fy-segment-option{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.fy-segment-option input{
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
}

.fy-segment-option span{
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.fy-segment-option input:checked + span{
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.fy-jobdetails-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.fy-jobdetails-grid .fy-check-group{
  min-width: 0;
}

.fy-group-label{
  color: #5f6872;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.fy-check-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.fy-check-grid-tight{
  display: flex;
}

.fy-check-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 22px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.fy-check-chip:hover,
.fy-job-addon-check:hover{
  color: inherit;
}

.fy-check-chip:has(input:checked){
  color: inherit;
  background: transparent;
}

.fy-check-chip input{
  appearance: auto;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: initial;
  background: initial;
}

.fy-job-addons-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.fy-job-addon-check{
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  gap: 10px;
  align-items: center;
  min-height: 30px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.fy-job-addon-check:last-child{
  border-bottom: 0;
}

.fy-job-addon-check.is-active{
  background: transparent;
}

.fy-job-addon-main{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: .9rem;
  font-weight: 750;
}

.fy-job-addon-main input{
  appearance: auto;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: initial;
  background: initial;
}

.fy-job-addon-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fy-job-addon-amount{
  color: #5f6872;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.fy-calculated-charges{
  display: grid;
  gap: 12px;
}

.fy-charge-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.fy-charge-row:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}

.fy-charge-main{
  min-width: 0;
}

.fy-charge-options{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.fy-charge-rate{
  min-width: 0;
}

.fy-charge-total{
  color: inherit;
  font-size: .9rem;
  font-weight: 850;
  text-align: left;
  padding: 0;
}

.fy-charge-hint{
  margin-top: 0;
  align-self: center;
  min-width: 0;
}

@media (max-width: 900px){
  .fy-jobdetails-layout,
  .fy-jobdetails-grid{
    grid-template-columns: 1fr;
  }

  .fy-segmented{
    width: 100%;
  }
}

@media (max-width: 620px){
  .fy-check-grid,
  .fy-check-grid-tight,
  .fy-job-addons-list{
    grid-template-columns: 1fr;
  }

  .fy-sun-preview{
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  .fy-sun-preview-compass{
    width: 92px;
  }

  .fy-sun-preview-stats{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fy-section-head{
    display: block;
  }

  .fy-sun-preview-head{
    display: flex;
  }

  .fy-section-head p{
    margin-top: 2px;
    text-align: left;
  }

  .fy-job-addon-check{
    grid-template-columns: 1fr;
  }

}

.fy-readonly{
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--muted));
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  padding: 12px 12px;
  color: var(--text);
  font-weight: 750;
}

.fy-help{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.fy-small{ font-size: 12px; }

.fy-check{
  display:flex;
  align-items:center;
  gap: 10px;
  user-select: none;
}

.fy-check input{ transform: scale(1.1); }

/* Quote layout */
.fy-quote-grid{
  display:grid;
  gap: 12px;
}


.fy-quote-card{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.fy-subtitle{
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 850;
}

.fy-addons{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 8px;
}

.fy-addon-row{
  display:grid;
  grid-template-columns: 1fr 120px 34px auto;
  gap: 8px;
  align-items:center;
}
.fy-settings-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fy-settings-col{
  border: 1px solid rgba(42, 55, 80, 0.72);
  border-radius: 10px;
  padding: 10px;
  background: rgba(17, 26, 42, 0.28);
}
.fy-form-grid-tight{
  gap: 8px;
}
.fy-settings-row-head{
  display: grid;
  gap: 8px;
  align-items: end;
  margin: 4px 0 2px;
  color: #b4bfd1;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}
.fy-tax-row-head,
.fy-tax-rate-row{
  grid-template-columns: minmax(140px, 1fr) 64px 84px;
}
.fy-addon-preset-head,
.fy-addon-preset-row{
  grid-template-columns: minmax(140px, 1fr) 76px 96px 84px;
}
.fy-tax-row-head,
.fy-addon-preset-head{
  margin-left: 0;
  width: 100%;
}
.fy-tax-row-head > div,
.fy-addon-preset-head > div{
  position: relative;
  left: var(--settings-col-head-offset-x);
}
.fy-btn-remove-text{
  min-width: 76px;
  justify-content: center;
  white-space: nowrap;
  padding: 8px 10px;
}
.fy-saved-row{
  border: 1px solid rgba(42, 55, 80, 0.88);
  border-radius: 9px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.01)),
    #142136;
}
.fy-saved-cell{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}
.fy-tax-saved-name{
  display:flex;
  flex-direction:column;
  gap:3px;
  white-space:normal;
}
.fy-tax-saved-name strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.fy-saved-match{
  color:var(--muted);
  font-size:11px;
  font-weight:650;
  line-height:1.25;
  white-space:normal;
}
.fy-tax-match-status{
  display:block;
  margin-top:5px;
  line-height:1.3;
}

.fy-addon-row input{
  margin: 0;
  width: 100%;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  color: var(--text);
  padding: 12px 12px;
  outline: none;
}
.fy-addon-row input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 167, 255, 0.18);
}

@media (max-width: 820px){
  .fy-settings-split{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fy-tax-row-head,
  .fy-tax-rate-row{
    grid-template-columns: minmax(120px, 1fr) 62px 74px;
  }
  .fy-addon-preset-head,
  .fy-addon-preset-row{
    grid-template-columns: minmax(120px, 1fr) 72px 86px 74px;
  }
  .fy-tax-row-head,
  .fy-addon-preset-head{
    margin-left: 0;
    width: 100%;
  }
  .fy-tax-row-head > div,
  .fy-addon-preset-head > div{
    left: var(--settings-col-head-offset-x-mobile);
  }
  .fy-btn-remove-text{
    min-width: 70px;
  }
}

.fy-summary-lines{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.fy-line{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  font-size: 13px;
}

.fy-line strong{ font-weight: 850; }

.fy-muted{ color: var(--muted); }

#quoteSummaryCard .fy-panel-header,
#quoteSummaryCard .fy-help{
  display:none;
}

#quoteSummaryCard .fy-panel-card{
  padding:14px !important;
}

#quoteSummaryCard .fy-summary-lines{
  gap:12px;
  color:#111318;
}

#quoteSummaryCard .fy-summary-total-band{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:
    linear-gradient(90deg, rgba(216,170,76,.16), rgba(255,255,255,.94) 46%, rgba(247,245,239,.90)),
    #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 14px 30px rgba(17,19,24,.07);
}

#quoteSummaryCard .fy-summary-total-band::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, #efd284, #d8aa4c);
}

#quoteSummaryCard .fy-summary-total-copy{
  display:grid;
  gap:4px;
  padding:14px 16px 14px 18px;
  min-width:0;
}

#quoteSummaryCard .fy-summary-total-label,
#quoteSummaryCard .fy-summary-section-title,
#quoteSummaryCard .fy-summary-metric-label{
  color:#606873;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#quoteSummaryCard .fy-summary-total-value{
  color:#111318;
  font-size:1.5rem;
  font-weight:950;
  line-height:1.05;
}

#quoteSummaryCard .fy-summary-total-submeta{
  min-width:0;
  color:#606873;
  font-size:.82rem;
  font-weight:800;
  overflow-wrap:anywhere;
}

#quoteSummaryCard .fy-summary-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

#quoteSummaryCard .fy-summary-metric{
  min-width:0;
  min-height:70px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  padding:10px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,245,239,.72)),
    #fff;
}

#quoteSummaryCard .fy-summary-metric-value{
  color:#111318;
  font-size:.9rem;
  font-weight:950;
  line-height:1.16;
  overflow-wrap:anywhere;
}

#quoteSummaryCard .fy-summary-section{
  display:grid;
  gap:7px;
}

#quoteSummaryCard .fy-summary-section-body{
  display:grid;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:rgba(255,255,255,.88);
}

#quoteSummaryCard .fy-summary-detail-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  box-shadow:inset 0 -1px 0 rgba(17,19,24,.07);
}

#quoteSummaryCard .fy-summary-detail-row:last-child{
  box-shadow:none;
}

#quoteSummaryCard .fy-summary-row-left{
  display:grid;
  gap:3px;
  min-width:0;
}

#quoteSummaryCard .fy-summary-row-label{
  color:#111318;
  font-size:.88rem;
  font-weight:850;
  line-height:1.2;
}

#quoteSummaryCard .fy-summary-row-detail{
  color:#69727d;
  font-size:.76rem;
  font-weight:750;
  line-height:1.2;
  overflow-wrap:anywhere;
}

#quoteSummaryCard .fy-summary-row-value{
  color:#111318;
  font-size:.88rem;
  font-weight:900;
  line-height:1.18;
  text-align:right;
  white-space:nowrap;
}

#quoteSummaryCard .fy-summary-detail-row.is-strong .fy-summary-row-value{
  color:#17110a;
  font-weight:950;
}

#quoteSummaryCard .fy-summary-section.is-compact .fy-summary-detail-row{
  min-height:36px;
  padding:8px 12px;
}

#quoteSummaryCard .fy-summary-note,
#quoteSummaryCard .fy-summary-empty{
  border:1px solid rgba(216,170,76,.24);
  border-radius:12px;
  background:rgba(216,170,76,.08);
  color:#6a5525;
  font-size:.8rem;
  font-weight:850;
}

#quoteSummaryCard .fy-summary-note{
  padding:10px 12px;
}

#quoteSummaryCard .fy-summary-empty{
  display:grid;
  gap:5px;
  padding:14px;
}

#quoteSummaryCard .fy-summary-empty strong{
  color:#111318;
}

#quoteSummaryCard .fy-summary-empty span{
  color:#606873;
  font-weight:750;
}

@media (max-width:420px){
  #quoteSummaryCard .fy-summary-metrics{
    grid-template-columns:1fr;
  }

  #quoteSummaryCard .fy-summary-detail-row{
    grid-template-columns:1fr;
    gap:6px;
  }

  #quoteSummaryCard .fy-summary-row-value{
    text-align:left;
    white-space:normal;
  }
}

.fy-quote-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Buttons (Quote) */
.fy-btn{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}

.fy-btn:hover{ filter: brightness(1.02); }

.fy-btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  border:none;
}


.fy-btn-secondary{
  background: color-mix(in srgb, var(--surface) 90%, var(--bg));
}

.fy-btn-ghost{ background: transparent; }


/* ---- Results spacing fixes (prevents overlap with Quote panel) ---- */
.window-count-summary{
  margin: 10px 0 16px;
}
#quoteInlineMount{
  margin-top: 6px;
}
#quoteInlineMount > details{
  margin-top: 6px;
}


.fy-radio-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.fy-radio{display:inline-flex;gap:8px;align-items:center;font-weight:800;color:var(--text);}

/* ---- Optimization modal helpers ---- */
.fy-opt-modal .fy-tabbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fy-opt-modal .fy-tab-btn{white-space:nowrap;flex:0 0 auto;}

.fy-opt-grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;}
@media (max-width: 720px){ .fy-opt-grid-2{grid-template-columns:1fr;} }

.fy-unit-toggle{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-2);}
.fy-unit-btn{appearance:none;border:0;background:transparent;color:var(--muted);font-weight:900;padding:8px 10px;cursor:pointer;}
.fy-unit-btn.active{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--text);} 

.fy-inv-item{padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);}
.fy-inv-grid{display:grid;grid-template-columns:1.1fr 1fr auto;gap:10px;align-items:end;}
@media (max-width: 720px){ .fy-inv-grid{grid-template-columns:1fr;} }


/* Force a single-column grid for specific panels */
.fy-form-grid.fy-form-stack{ grid-template-columns: 1fr !important; }


/* ===== In-page views: force single-column layout ===== */
#settingsPage .main-content,
#jobManagerPage .main-content{
  grid-template-columns: 1fr !important;
}

/* Settings should not inherit the two-column app spacing */
#settingsPage .card,
#jobManagerPage .card{
  width: 100%;
}


/* ===== Settings UI extras ===== */
.fy-toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: auto;
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(241, 245, 249, 0.95);
  color: #0f172a;
  font-weight: 800;
  width: fit-content;
  box-shadow: 0 8px 22px rgba(2,6,23,.12);
  z-index: 9999;
  pointer-events: none;
}

.fy-logo-preview-wrap.hidden{ display:none; }
.fy-logo-preview-wrap{ margin-top: 10px; }
.fy-logo-preview{
  max-width: 160px;
  max-height: 100px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  padding: 6px;
}

/* Estimate branding: five selectable PDF layouts with a shared brand palette. */
.pfs-estimate-branding-card{
  --estimate-primary:#102A43;
  --estimate-accent:#C89B3C;
  margin-top:12px;
}
.pfs-estimate-branding-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.pfs-estimate-branding-location{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:var(--surface);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.pfs-estimate-template-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.pfs-estimate-template{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px;
  padding:9px;
  border:1px solid var(--border);
  border-radius:11px;
  color:var(--text);
  background:var(--surface);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.pfs-estimate-template:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--estimate-accent) 58%,var(--border)); }
.pfs-estimate-template.is-selected{
  border-color:var(--estimate-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--estimate-accent) 18%,transparent);
}
.pfs-estimate-template strong{ font-size:11px; }
.pfs-estimate-template small{ overflow:hidden; color:var(--muted); font-size:8px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.pfs-estimate-template-preview{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1.48;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  border-radius:6px;
  background:#fff;
}
.pfs-estimate-template-preview i{ position:absolute; display:block; margin:0; }
.pfs-estimate-mini-header{ inset:0 0 auto; height:34%; background:var(--estimate-primary); }
.pfs-estimate-mini-title{ left:8%; top:13%; width:27%; height:6%; border-radius:2px; background:#fff; }
.pfs-estimate-mini-total{ right:7%; top:9%; width:29%; height:17%; border:1px solid var(--estimate-accent); border-radius:2px; background:#fff; }
.pfs-estimate-mini-line{ left:8%; height:4%; border-radius:2px; background:#d8dee3; }
.pfs-estimate-mini-line.one{ top:52%; width:72%; }
.pfs-estimate-mini-line.two{ top:66%; width:53%; }
.pfs-estimate-template-preview.is-clean{ border-top:4px solid var(--estimate-accent); }
.pfs-estimate-template-preview.is-clean .pfs-estimate-mini-header{ height:32%; background:#fff; border-bottom:2px solid var(--estimate-accent); }
.pfs-estimate-template-preview.is-clean .pfs-estimate-mini-title{ background:var(--estimate-primary); }
.pfs-estimate-template-preview.is-clean .pfs-estimate-mini-total{ background:color-mix(in srgb,var(--estimate-accent) 10%,#fff); }
.pfs-estimate-template-preview.is-split .pfs-estimate-mini-header{ width:58%; height:36%; }
.pfs-estimate-template-preview.is-split::before{ content:""; position:absolute; inset:0 0 auto 58%; height:36%; background:color-mix(in srgb,var(--estimate-primary) 10%,#fff); border-left:3px solid var(--estimate-accent); }
.pfs-estimate-template-preview.is-split .pfs-estimate-mini-total{ z-index:1; }
.pfs-estimate-template-preview.is-editorial{ border-left:6px solid var(--estimate-accent); background:#fbfaf7; }
.pfs-estimate-template-preview.is-editorial .pfs-estimate-mini-header{ height:35%; background:transparent; }
.pfs-estimate-template-preview.is-editorial .pfs-estimate-mini-title{ background:var(--estimate-primary); }
.pfs-estimate-template-preview.is-editorial .pfs-estimate-mini-total{ border-color:var(--estimate-primary); }
.pfs-estimate-template-preview.is-bold .pfs-estimate-mini-header{ height:38%; background:var(--estimate-accent); border-top:6px solid var(--estimate-primary); border-bottom:5px solid var(--estimate-primary); }
.pfs-estimate-template-preview.is-bold .pfs-estimate-mini-title{ background:var(--estimate-primary); }
.pfs-estimate-template-preview.is-bold .pfs-estimate-mini-total{ border-color:var(--estimate-primary); background:var(--estimate-primary); }
.pfs-estimate-color-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(150px,1fr)) auto;
  align-items:end;
  gap:12px;
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:color-mix(in srgb,var(--surface) 92%,var(--bg));
}
.pfs-estimate-color-field > label{ display:block; margin-bottom:6px; color:var(--muted); font-size:10px; font-weight:850; }
.pfs-estimate-color-inputs{ display:grid; grid-template-columns:42px minmax(0,1fr); gap:7px; }
.pfs-estimate-color-inputs input[type="color"]{ width:42px; min-width:42px; height:38px; padding:3px; cursor:pointer; }
.pfs-estimate-color-inputs input[type="text"]{ min-width:0; height:38px; font-family:Consolas,"SFMono-Regular",monospace; text-transform:uppercase; }
.pfs-estimate-colors-reset{ min-height:38px; white-space:nowrap; }

@media (max-width:900px){
  .pfs-estimate-template-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pfs-estimate-color-controls{ grid-template-columns:1fr 1fr; }
  .pfs-estimate-colors-reset{ grid-column:1/-1; }
}
@media (max-width:560px){
  .pfs-estimate-branding-head{ flex-direction:column; }
  .pfs-estimate-template-grid,.pfs-estimate-color-controls{ grid-template-columns:1fr; }
  .pfs-estimate-colors-reset{ grid-column:auto; width:100%; }
}

.fy-films-list{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.fy-film-row{
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.7);
}

.fy-film-row-top{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.fy-film-namewrap{ flex: 1 1 240px; min-width: 220px; }

.fy-film-prices{
  display:grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.fy-field-compact label{
  font-size: 12px;
  opacity: 0.9;
}
.fy-field-compact input{
  padding: 10px 10px;
}


/* Settings: manual save controls */
.fy-settings-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}
.fy-settings-actions-right{
  display: flex;
  align-items: center;
  gap: 8px;
}
.fy-settings-actions-right-catalog{
  display:grid;
  grid-template-columns:repeat(3, minmax(72px, 112px));
  justify-content:end;
}
.fy-settings-action-btn{
  width:100%;
  min-height:40px;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px !important;
  font-weight:950;
  white-space:nowrap;
}
#fySettingsSaveBtn{
  background:linear-gradient(135deg, #f5df98, #d8aa4c) !important;
  border-color:rgba(141,96,20,.22) !important;
  color:#111318 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.64) inset,
    0 14px 28px rgba(216,170,76,.22) !important;
}
#fySettingsSaveBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(177,132,49,.30) !important;
}
.fy-import-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.fy-unsaved-badge{
  margin-right:auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  font-weight: 800;
  font-size: 12px;
}

/* ------------------------------
   Settings > Films Catalog (v2)
------------------------------ */
.fy-films-catalog{
  display: block;
}
.fy-films-stack{
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.fy-films-toolbar{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.fy-films-toolbar .fy-field{ min-width: 0; }

.fy-films-film-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 40vh;
  overflow: auto;
  padding-right: 2px;
  margin-bottom: 12px;
}
.fy-film-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fy-film-group-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #b4bfd1;
  text-transform: uppercase;
  padding: 0 2px;
}
.fy-film-group-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fy-film-item{
  display:inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid rgba(42, 55, 80, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #152338;
  cursor: pointer;
  max-width: 100%;
  min-width: 220px;
}
.fy-film-item.active{
  border-color: #4a6ca5;
  box-shadow: inset 0 0 0 1px rgba(74, 108, 165, 0.45);
}

.fy-film-item-main{ min-width: 0; display:flex; flex-direction: column; gap: 2px; }
.fy-film-item-name{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fy-film-item-meta{
  color: #b4bfd1;
  font-size: 11px;
  font-weight: 700;
  display:flex;
  align-items:baseline;
  gap: 8px;
  flex-wrap:wrap;
}
.fy-film-item-mfr{ font-weight: 900; color: var(--text); }
.fy-film-item-meta .fy-dot{ color: var(--muted); margin: 0 6px; }

.fy-film-item-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}
.fy-film-item-actions .fy-btn{
  padding: 5px 8px;
  min-height: 30px;
  font-size: 11px;
}

.fy-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  font-weight: 800;
  font-size: 12px;
  color: var(--text);
  background: rgba(255,255,255,0.7);
}

.fy-film-editor{
  border: 1px solid rgba(42, 55, 80, 0.88);
  border-radius: 10px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #121c2d;
}
.fy-film-editor.hidden{ display:none; }

.fy-film-editor-head{ display:flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fy-film-editor-title{ font-weight: 1000; }
.fy-film-editor-actions{ display:flex; align-items: center; gap: 10px; }

.fy-film-editor-footer{ display:flex; justify-content: flex-end; margin-top: 12px; }


/* Films editor internal layout */
.fy-film-editor-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.fy-film-meta-stack{ display:flex; flex-direction: column; gap: 10px; }

.fy-section-title{
  font-weight: 1000;
  font-size: 13px;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}

.fy-warranty-inline{
  display:flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.fy-warranty-label{
  font-weight: 900;
  color: var(--muted);
  font-size: 12px;
}
.fy-warranty-inline input[type="number"]{
  width: 92px;
  max-width: 110px;
}
.fy-warranty-lifetime{ margin-right: 8px; }
.fy-warranty-lifetime span{ font-size: 13px; }

/* Warranty sits below the 2-column film editor grid to avoid overlapping the roll sizes card */
.fy-warranty-span{ grid-column: 1 / -1; }

.fy-roll-card{
  border: 1px solid rgba(42, 55, 80, 0.88);
  border-radius: 10px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
    #0f1828;
  overflow-x: auto;
}
/* In Films editor, roll sizes should feel like part of one unified container (no nested card look). */
.fy-film-editor .fy-roll-card{
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
}
/* Roll size inputs should match the app's main field styling */
.fy-roll-cell input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fy-roll-cell input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 167, 255, 0.18);
}

.fy-check{ display:inline-flex; align-items:center; gap: 8px; font-weight: 800; }
.fy-check input{ width: 18px; height: 18px; }

/* Rolls grid */
.fy-roll-grid-header,
.fy-roll-row{ display:grid; grid-template-columns: 70px 140px 140px auto; gap: 10px; align-items: center; }

.fy-roll-grid-header{ margin-top: 10px; padding: 0 2px; color: var(--muted); font-weight: 900; font-size: 12px; }
.fy-roll-grid{ display:flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.fy-roll-row.locked input[data-field="rollWidth"]{ opacity: 0.85; }

.fy-roll-actions{ display:flex; justify-content: flex-end; }



/* =========================
   Collapsible UI polish
   ========================= */
.main-actions.main-actions-right{
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}

.main-actions.main-actions-right .btn-optimize-roll{ flex: 2; }
.main-actions.main-actions-right .btn-clear{ flex: 1; }

/* Window controls: uniform buttons, no icons */
.window-controls-bottom{
  display:flex;
  gap:10px;
}
.window-controls-bottom button{
  flex: 1;
  min-height: 44px;
}

/* Group rename icon outside the title container */
.summary-group{
  position: relative;
}
.group-rename-outside{
  position:absolute;
  left:-18px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor:pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 10%, transparent);
}
.group-rename-outside:hover{
  transform: translateY(-1px);
}


/* =========================
   Quote layout (main page)
   ========================= */
.fy-quote-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fy-quote-wide{
  grid-column: 1 / -1;
}


/* --- v2 polish: Results action bar + heading spacing --- */
.results-section .main-actions-right{
  margin-bottom: 10px;
}
.results-section .results-heading{
  margin-top: 10px;
}

/* --- v2 polish: Job Outputs buttons in 2-row grid like mobile --- */
.job-output-buttons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px){
  .job-output-buttons{
    grid-template-columns: 1fr;
  }
}

/* --- v2 polish: Groups rename icon visible when collapsed + larger chevrons --- */
.summary-groups{
  padding-left: 38px; /* room for outside rename icon */
}
.summary-group-summary{
  position: relative;
  overflow: visible;
}
.summary-group-summary .group-rename-btn{
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.summary-chevron{
  font-size: 18px;
  opacity: 0.95;
}

/* =========================
   Optimization modal roll cards
   ========================= */
.roll-options{ display:flex; flex-direction:column; gap:14px; }

/* New single-roll cards (matches the screenshot style) */
.fy-rollcard{
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 14px;
  cursor:pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.fy-rollcard:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
}
.fy-rollcard.is-error{
  cursor:default;
  opacity:.82;
}
.fy-rollcard.is-error:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--border);
}
.fy-rollcard.is-error .fy-rollcard-badge{
  background:var(--muted);
  box-shadow:none;
}
.fy-rollcard.is-best{
  /* Highlight recommended choice with a subtle green tint (field-friendly) */
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border) 30%);
  background: color-mix(in srgb, var(--success) 10%, var(--surface) 90%);
}
.fy-rollcard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.fy-rollcard-width{ font-size: 2.4rem; line-height: 1; font-weight: 1000; letter-spacing: -0.02em; }
.fy-rollcard-badge{
  position:absolute;
  right: 14px;
  top: -12px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: .95rem;
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow);
}
.fy-rollcard-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
}
.fy-rollstat{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.fy-rollstat-label{ color: var(--muted); font-weight: 900; }
.fy-rollstat-value{ font-weight: 1000; font-size: 1.7rem; text-align:right; line-height: 1.05; }
.fy-rollstat-unit{ margin-top: 2px; font-size: 1.05rem; font-weight: 1000; color: var(--muted); }

@media (max-width: 560px){
  .fy-rollcard{ padding: 14px; }
  .fy-rollcard-width{ font-size: 2.2rem; }
  .fy-rollstat-value{ font-size: 1.55rem; }
  .fy-rollcard-grid{ gap: 14px 18px; }
}
/* Tighten typography inside the optimization modal (Single Roll tab)
   (matches the older, smaller “choose a roll width” cards) */
.fy-opt-modal .fy-card-title{ font-size: 0.95rem; }
.fy-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.fy-candidate-table-wrap{ overflow-x:auto; }
.fy-candidate-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.fy-candidate-table th,
.fy-candidate-table td{ padding:8px 7px; border-bottom:1px solid rgba(148,163,184,0.18); text-align:left; font-weight:900; color:var(--text); vertical-align:top; }
.fy-candidate-table th{ font-size:0.72rem; text-transform:uppercase; color:var(--muted); letter-spacing:0; }
.fy-candidate-table td{ font-size:0.86rem; line-height:1.18; }
.fy-candidate-table tbody tr:last-child td{ border-bottom:0; }
.fy-opt-modal .fy-rollcard-width{ font-size: 1.55rem; }
.fy-opt-modal .fy-rollstat-label{ font-size: 0.82rem; }
.fy-opt-modal .fy-rollstat-value{ font-size: 1.05rem; }
.fy-opt-modal .fy-rollstat-unit{ font-size: 0.80rem; }
.fy-opt-modal .fy-rollcard-badge{ font-size: 0.70rem; padding: 6px 10px; top: -10px; }
.fy-opt-modal .fy-rollcard-grid{ gap: 14px 18px; }
.fy-width-selected-count{font-size:0.78rem;font-weight:900;color:var(--muted);}
.fy-width-toggle-row{display:flex;flex-wrap:wrap;gap:8px;}
.fy-width-toggle{
  appearance:none;
  min-width:72px;
  border:1px solid color-mix(in srgb, var(--border) 84%, var(--muted) 16%);
  border-radius:10px;
  background:color-mix(in srgb, var(--surface) 84%, var(--bg) 16%);
  color:var(--muted);
  padding:10px 12px;
  font-size:0.95rem;
  font-weight:1000;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35);
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.fy-width-toggle:hover{
  border-color:color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow:0 8px 18px rgba(15,23,42,0.08);
  transform:translateY(-1px);
}
.fy-width-toggle.active,
.fy-width-toggle[aria-pressed="true"]{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color:color-mix(in srgb, var(--primary-dark) 78%, #000 22%);
  color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.24),0 10px 22px rgba(15,23,42,0.18);
}
.fy-width-toolbar{display:flex;gap:8px;flex-wrap:wrap;}
.fy-btn-compact{padding:8px 10px;border-radius:8px;font-size:0.84rem;font-weight:900;}
.fy-width-warning{
  margin-top:10px;
  color:color-mix(in srgb, var(--danger) 82%, #000 18%);
  font-size:0.86rem;
  font-weight:900;
}

/* Keep the Build Cut Plan modal a consistent height across tabs (especially Multi-Roll). */
.fy-opt-modal .fy-opt-section{
  min-height: 520px;
}

/* Inventory tab: neater "Add a roll" inputs */
.fy-opt-modal .fy-inv-add-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.fy-opt-modal .fy-inv-field{flex:1;min-width:140px;}
.fy-opt-modal .fy-inv-field-width{flex:1.2;min-width:200px;}
.fy-opt-modal .fy-inv-field-unit{flex:0 0 auto;min-width:160px;}
.fy-opt-modal .fy-inv-label{font-size:0.78rem;color:#64748b;font-weight:900;margin-bottom:6px;}
.fy-opt-modal .fy-inv-widthwrap{display:flex;gap:8px;align-items:center;}
.fy-opt-modal .fy-inv-widthwrap select,
.fy-opt-modal .fy-inv-widthwrap input,
.fy-opt-modal #fyInvDraftLength{width:100%;}
.fy-opt-modal .fy-inv-custom{max-width:120px;}
.fy-opt-modal .fy-inv-add-actions{display:flex;justify-content:flex-end;}

/* Inventory modal inputs: match Customer card fields */
.fy-opt-modal .fy-inv-widthwrap select,
.fy-opt-modal .fy-inv-widthwrap input,
.fy-opt-modal #fyInvDraftLength{
  padding:8px 10px;
  border:1px solid var(--input-border);
  border-radius:8px;
  background:var(--input-bg);
  color:var(--input-text);
  font-size:.95rem;
}
.fy-opt-modal .fy-inv-widthwrap select:focus,
.fy-opt-modal .fy-inv-widthwrap input:focus,
.fy-opt-modal #fyInvDraftLength:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

@media (max-width: 640px){
  .fy-opt-modal .fy-opt-section{
    min-height: 420px;
  }
  .fy-opt-modal .fy-inv-field{min-width: 120px;}
  .fy-opt-modal .fy-inv-field-width{min-width: 180px;}
}

@media (max-width: 560px){
  .fy-opt-modal .fy-rollcard-width{ font-size: 1.45rem; }
  .fy-opt-modal .fy-rollstat-label{ font-size: 0.80rem; }
  .fy-opt-modal .fy-rollstat-value{ font-size: 0.98rem; }
  .fy-opt-modal .fy-rollstat-unit{ font-size: 0.78rem; }
  .fy-width-toggle{flex:1 1 calc(50% - 8px);min-width:0;}
  .fy-width-toolbar .fy-btn-secondary{flex:1 1 calc(50% - 8px);}
}

.rollfit-warning{
  margin-top: 8px;
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .85rem;
  color: color-mix(in srgb, var(--danger) 85%, #000 15%);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border) 70%);
}
.rollfit-warning[data-tooltip]{ position:relative; }
.rollfit-warning[data-tooltip]:hover::after{
  content: attr(data-tooltip);
  position:absolute;
  left: 0;
  top: calc(100% + 8px);
  white-space: pre;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 3000;
  min-width: 220px;
  max-width: 320px;
}

.fy-btn-blue{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border:none; padding: 12px 14px; border-radius: 12px; font-weight: 900; cursor:pointer; }
.fy-btn-blue:disabled{ opacity:.55; cursor:not-allowed; }

 .fy-inv-add-row{
  display:grid;
  /* Width / Length / Unit toggle / Add button */
  grid-template-columns: minmax(170px, 1.4fr) minmax(140px, 1fr) minmax(120px, 140px) minmax(120px, 160px);
  gap: 10px;
  align-items: end;
}
.fy-inv-add-row .fy-field{ margin-bottom: 0 !important; min-width: 0; }
.fy-inv-add-row .fy-unit-toggle{ margin-top: 0 !important; }
@media (max-width: 560px){
  .fy-inv-add-row{
    grid-template-columns: 1fr 1fr;
  }
  .fy-inv-add-row .fy-field:nth-child(3),
  .fy-inv-add-row .fy-field:nth-child(4){
    grid-column: span 2;
  }
}

/* Width dropdown + inline custom width (stays inside the same grid cell) */
.fy-inv-widthstack{ display:flex; flex-direction:column; gap: 8px; }
.fy-inv-customwrap input{ width: 100%; }/* Inventory: compact "Add a roll" table (keeps both cards on one row on desktop) */
.fy-inv-add-table{ width: 100%; border-collapse: collapse; table-layout: fixed; }
.fy-inv-add-table th{
  text-align: left;
  padding: 0 0 6px;
  font-size: 12px;
  font-weight: 1000;
  color: var(--muted);
}
.fy-inv-add-table td{ padding: 0; vertical-align: bottom; }
.fy-inv-add-table td:last-child{ text-align: right; }
.fy-inv-add-table select{ width: 88px; }
.fy-inv-add-table input{ width: 110px; }
.fy-inv-add-table .fy-inv-customwrap input{ width: 88px; }
.fy-inv-add-table .fy-unit-toggle{ width: 108px; }
.fy-inv-add-table .fy-btn-blue{ width: 120px; padding: 10px 12px; }

/* If the modal gets narrow, allow the table to wrap naturally. */
@media (max-width: 720px){
  .fy-inv-add-table{ table-layout: auto; }
  .fy-inv-add-table select,
  .fy-inv-add-table input,
  .fy-inv-add-table .fy-unit-toggle,
  .fy-inv-add-table .fy-btn-blue{ width: 100%; }
  .fy-inv-add-table td:last-child{ text-align: left; }
}


/* =========================
   Inventory compact list
   ========================= */
.fy-inv-item-compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.2);
}
.fy-inv-item-left{ display:flex; align-items:center; gap: 10px; }
.fy-inv-pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 80%, var(--surface) 20%);
  border: 1px solid var(--border);
  font-weight: 900;
}
.fy-inv-meta{
  color: var(--muted);
  font-weight: 800;
}
.fy-btn-ghost-danger{
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border) 60%);
  color: color-mix(in srgb, var(--danger) 85%, black 15%);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
}
.fy-btn-ghost-danger:hover{
  background: color-mix(in srgb, var(--danger) 10%, transparent 90%);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border) 45%);
}


/* ==================== CUT PLAN RESULT HEADER META ==================== */
.results-inner-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.results-submeta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:baseline;
  color:var(--muted);
  font-weight:800;
}
.results-submeta strong{ color:var(--text); }
.results-mode{
  display:inline-flex;
  gap:6px;
  align-items:baseline;
}

/* ==================== LEFT COLUMN CUT PLAN BUTTON ==================== */
.main-actions.main-actions-left{
  margin-top:12px;
}
.main-actions.main-actions-left .btn-optimize-roll{
  width:100%;
  justify-content:center;
}

/* ==================== QUICK OUTPUT BUTTONS (SINGLE-ROLL) ==================== */
.fy-cut-actions{ margin-top:10px; }
.fy-cut-actions-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.fy-project-sheet-btn{
  width:100%;
  margin-top:10px;
}
.fy-project-sheet-tip{
  margin-top:6px;
  color:var(--muted);
  font-weight:700;
  text-align:center;
}

/* Compact grid for quote tools (keeps spacing tight when fewer buttons exist) */
.job-output-buttons-compact{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

/* ==================== PLAN RESULTS (MULTI-ROLL / INVENTORY) ==================== */
.fy-plan-rolls-flat{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fy-plan-rollcard{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
}

.fy-plan-rollcard-single{ margin-top:12px; }

.fy-plan-rollhead{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}

.fy-plan-rollhead-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}

.fy-plan-rolltitle{
  font-weight:900;
  color:var(--text);
  font-size:1.05rem;
}

.fy-plan-rollwindows{
  color:var(--muted);
  font-weight:900;
  font-size:0.95rem;
  white-space:nowrap;
}

.fy-plan-rollcard-notonhand{
  border-style:dashed;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface) 97%);
}

.fy-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:1000;
  font-size:0.78rem;
  line-height:1;
}
.fy-pill-order{
  background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
  border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
  color: color-mix(in srgb, var(--primary) 65%, var(--text) 35%);
}

/* Finish Remaining (plan modes) */
.fy-finish-remaining{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
  margin-top:14px;
}
.fy-finish-title{
  font-weight:1000;
  margin-bottom:6px;
}
.fy-finish-note{
  color:var(--muted);
  font-weight:900;
  margin-left:6px;
}
.fy-finish-sub{
  color:var(--muted);
  font-weight:700;
  margin-bottom:10px;
}
.fy-finish-details{
  margin:8px 0 8px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 92%, var(--border) 8%);
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
.fy-finish-details summary{
  cursor:pointer;
  padding:9px 11px;
  font-weight:900;
  color:var(--text);
}
.fy-rem-clean-list{
  border-top:1px solid var(--border);
}
.fy-rem-clean-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:8px 11px;
  border-top:1px solid color-mix(in srgb, var(--border) 68%, transparent 32%);
}
.fy-rem-clean-row:first-child{
  border-top:0;
}
.fy-rem-clean-main{
  min-width:0;
  font-weight:900;
  color:var(--text);
}
.fy-rem-clean-dim{
  color:var(--muted);
  font-weight:900;
  white-space:nowrap;
}
.fy-finish-selector .fy-finish-label{
  color:var(--muted);
  font-weight:900;
  margin-bottom:10px;
}
.fy-finish-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.fy-finish-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.fy-finish-toggle{
  border:1px solid var(--border);
  background:transparent;
  border-radius:10px;
  padding:8px 10px;
  font-weight:900;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.fy-finish-toggle:hover{
  background:color-mix(in srgb, var(--surface) 75%, var(--border) 25%);
}
.fy-finish-collapsed-meta{
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-weight:800;
}
.fy-finish-change{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:10px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}
.fy-finish-change:hover{
  background:color-mix(in srgb, var(--surface) 70%, var(--border) 30%);
}
.fy-finish-collapsed-warn{
  color:#991b1b;
  font-weight:1000;
  margin-left:6px;
}
.fy-finish-roll-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.fy-finish-roll-option{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
  border:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), var(--surface));
  color:var(--text);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
  min-width:0;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.fy-finish-roll-option:hover{
  border-color:color-mix(in srgb, var(--primary) 45%, var(--border) 55%);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.fy-finish-roll-option.is-selected{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 9%, var(--surface) 91%);
}
.fy-finish-roll-option.is-recommended{
  border-color:color-mix(in srgb, var(--primary) 62%, var(--border) 38%);
}
.fy-finish-roll-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.fy-finish-roll-top strong{ font-size:1.2rem; }
.fy-finish-roll-top span{
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
  color:var(--primary);
  border:1px solid color-mix(in srgb, var(--primary) 30%, transparent 70%);
  border-radius:999px;
  padding:4px 7px;
  background:color-mix(in srgb, var(--primary) 10%, transparent 90%);
}
.fy-finish-roll-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  font-weight:900;
}
.fy-finish-roll-stats span{
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.fy-finish-roll-stats small{
  color:var(--muted);
  font-weight:800;
}
.fy-finish-roll-fit{
  color:var(--muted);
  font-size:.82rem;
  font-weight:900;
}
.fy-finish-roll-combo{
  border-top:1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
  padding-top:8px;
  color:var(--text);
  font-size:.82rem;
  font-weight:800;
  line-height:1.35;
}
.fy-finish-roll-combo strong{
  display:block;
  margin-top:2px;
  color:var(--primary);
}
.fy-finish-actions-row{
  display:block;
}
.fy-finish-actions-row .btn-output-primary{
  width:100%;
}
.fy-finish-absorb-option{
  margin-top:10px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid color-mix(in srgb, var(--primary) 24%, var(--border) 76%);
  background:color-mix(in srgb, var(--primary) 6%, var(--surface) 94%);
  border-radius:12px;
  padding:10px 11px;
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.fy-finish-absorb-option input{
  margin-top:3px;
  flex:0 0 auto;
}
.fy-finish-absorb-option span{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.fy-finish-absorb-option small,
.fy-finish-absorb-loading{
  color:var(--muted);
  font-weight:800;
}
.fy-finish-absorb-loading{
  margin-top:10px;
}
.fy-attention-pulse{
  animation:fyAttentionPulse 1.1s ease;
}
@keyframes fyAttentionPulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 30%, transparent 70%), var(--shadow); }
  55%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent 82%), var(--shadow); }
  100%{ box-shadow:var(--shadow); }
}
.fy-finish-remaining.is-collapsed .fy-finish-expandable{
  display:none;
}
@media (max-width: 640px){
  .fy-finish-grid{ grid-template-columns:1fr; }
  .fy-finish-roll-options{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fy-finish-actions-row .btn-output-primary{ width:100%; }
}
@media (max-width: 480px){
  .fy-finish-roll-options{ grid-template-columns:1fr; }
}

.fy-rollcard.is-selected{
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border) 30%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent 82%), var(--shadow);
}

.fy-rollcard-compact{
  padding:12px 12px;
}
.fy-rollcard-compact .fy-rollcard-width{
  font-size:1.55rem;
}
.fy-rollcard-compact .fy-rollcard-grid{
  gap:10px 12px;
  margin-top:10px;
}
.fy-rollcard-compact .fy-rollstat-label{ font-size:0.80rem; }
.fy-rollcard-compact .fy-rollstat-value{ font-size:1.05rem; }
.fy-rollcard-sub{
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  font-weight:800;
  line-height:1.25;
  margin-top:4px;
}
.fy-mini-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.30);
  background:rgba(239,68,68,.08);
  color:#991b1b;
  font-weight:1000;
  font-size:0.72rem;
  white-space:nowrap;
  margin-top:4px;
}

.fy-plan-rollmeta-line{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-weight:800;
}

.fy-roll-results-grid{
  margin:0 0 12px 0;
}

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

.fy-plan-project-sheet{ margin-top:14px; }

.results-quick-totals{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:8px;
  color:var(--muted);
  font-weight:800;
}
.results-quick-totals span{
  min-width:0;
  overflow:hidden;
}
.results-quick-totals small{
  display:block;
  color:inherit;
  font-size:11px;
  font-weight:900;
  line-height:1.1;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.results-quick-totals strong{
  display:block;
  color:var(--text);
  font-weight:1000;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.results-quick-totals em{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  font-style:normal;
  font-weight:800;
  line-height:1.1;
}

/* ==================== ROLLFIT BANNERS (WARN / OK) ==================== */
.rollfit-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid color-mix(in srgb, var(--danger) 18%, var(--border) 82%);
  background:color-mix(in srgb, var(--danger) 5%, var(--surface) 95%);
  border-radius:12px;
  padding:10px 12px;
  margin:12px 0;
}
.rollfit-banner-title{
  font-weight:800;
  color:var(--text);
  min-width:0;
}
.rollfit-banner-action{
  border:1px solid rgba(153,27,27,.22);
  background:var(--surface);
  color:#991b1b;
  border-radius:10px;
  padding:7px 10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.rollfit-banner-action:hover{
  background:#fff;
  border-color:rgba(153,27,27,.38);
}
.rollfit-banner-details summary{
  cursor:pointer;
  color:#991b1b;
  font-weight:800;
  margin-top:6px;
}
.rollfit-banner-ok{
  border-color:rgba(16,185,129,.25);
  background:rgba(16,185,129,.08);
}
.rollfit-banner-ok .rollfit-banner-title{
  color:#166534;
}
.rollfit-banner-plan{}

@media (max-width: 540px){
  .rollfit-banner{
    align-items:stretch;
    flex-direction:column;
  }
  .rollfit-banner-action{
    width:100%;
  }
}

/* Smaller spacing on narrow screens */
@media (max-width: 540px){
  .fy-cut-actions-row{ grid-template-columns:1fr; }
  .results-submeta{ gap:8px; }
}

/* ==================== AUTH GATE (Login required) ==================== */
html.pfs-auth-pending .container {
  opacity: 1;
  pointer-events: auto;
}

.pfs-auth-gate {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
  background: rgba(12, 18, 28, 0.55);
}

.pfs-auth-card {
  width: min(520px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow: hidden;
}

.pfs-auth-head {
  padding: 18px 18px 14px 18px;
  border-bottom: 1px solid #e8eef6;
  display: flex;
  gap: 12px;
  align-items: center;
}

.pfs-auth-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  background: #f6f9ff;
  border: 1px solid #e3ebf8;
  padding: 6px;
}

.pfs-auth-title {
  font-weight: 900;
  font-size: 18px;
  margin: 0;
}

.pfs-auth-sub {
  font-size: 12px;
  color: #5b6b7c;
  margin-top: 2px;
}

.pfs-auth-body {
  padding: 18px;
}

.pfs-auth-error {
  display: none;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #fff3f3;
  color: #9b1c1c;
  border: 1px solid #ffd2d2;
  font-size: 13px;
}

.pfs-auth-note {
  display: none;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #eef8ff;
  color: #0c4a6e;
  border: 1px solid #cfe9ff;
  font-size: 13px;
}

.pfs-auth-label {
  display: block;
  font-size: 12px;
  color: #5b6b7c;
  margin-bottom: 6px;
}

.pfs-auth-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d7e3f4;
  border-radius: 12px;
  outline: none;
  margin-bottom: 12px;
}

.pfs-auth-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pfs-auth-name-grid .pfs-auth-input {
  margin-bottom: 12px;
}

@media (max-width: 520px) {
  .pfs-auth-name-grid {
    grid-template-columns: 1fr;
  }
}

.pfs-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pfs-auth-link {
  font-size: 12px;
  font-weight: 800;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #2f6fed;
}

.pfs-auth-hint {
  font-size: 12px;
  color: #5b6b7c;
}

.pfs-auth-toggle {
  font-size: 12px;
  text-decoration: none;
  font-weight: 800;
}

.pfs-auth-actions {
  display: flex;
  gap: 10px;
}

.pfs-auth-btn {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #d7e3f4;
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

.pfs-auth-btn-primary {
  border: 0;
  background: #2f6fed;
  color: #fff;
}

.pfs-auth-footer{
  padding: 10px 16px 16px;
  border-top: 1px solid #e8eef6;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  background: #fbfdff;
}
.pfs-auth-footer a{
  font-size: 12px;
  font-weight: 800;
  color: #2f6fed;
  text-decoration: none;
}
.pfs-auth-footer a:hover{
  text-decoration: underline;
}

.pfs-status-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#e2f2ff;
  color:#0c4a6e;
  font-size:12px;
  font-weight:800;
}
.pfs-status-badge.suspended{
  background:#fff7ed;
  color:#9a3412;
}
.pfs-status-badge.deleted{
  background:#fee2e2;
  color:#991b1b;
}
.pfs-status-badge.warning{
  background:#fef3c7;
  color:#92400e;
}
.pfs-status-badge.muted{
  background:#eef2f7;
  color:#475569;
}

/* ==================== Impersonation Banner ==================== */
.pfs-impersonate-banner{
  position: sticky;
  top: 0;
  z-index: 9998;
  background: #1e293b;
  color: #e2e8f0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}
.pfs-impersonate-banner .title{
  font-weight: 800;
}
.pfs-impersonate-banner .btn-stop{
  background: #ef4444;
  color: #fff;
  border: 0;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.pfs-subscription-access-banner{
  position: sticky;
  top: 0;
  z-index: 9997;
  background: #78350f;
  color: #fff7ed;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  font-size: 13px;
}
.pfs-subscription-access-banner .title{
  font-weight: 850;
}
.pfs-subscription-access-banner .btn-manage{
  background: #fff7ed;
  color: #78350f;
  border: 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 850;
  cursor: pointer;
}

.pfs-demo-access-banner.fresh{
  background:#166534;
  color:#f0fdf4;
}

.pfs-demo-access-banner.fresh .btn-manage{
  background:#f0fdf4;
  color:#166534;
}

.pfs-demo-access-banner.warm{
  background:#a16207;
  color:#fffbeb;
}

.pfs-demo-access-banner.warm .btn-manage{
  background:#fffbeb;
  color:#854d0e;
}

.pfs-demo-access-banner.warning,
.pfs-demo-access-banner.complete{
  background:#78350f;
  color:#fff7ed;
}

.pfs-demo-access-banner.warning .btn-manage,
.pfs-demo-access-banner.complete .btn-manage{
  background:#fff7ed;
  color:#78350f;
}

.pfs-subscription-readonly #menuActionNew,
.pfs-subscription-readonly #menuActionSave,
.pfs-subscription-readonly #pfsCutPlanBtnMobile,
.pfs-subscription-readonly #pfsCutPlanBtnDesktop,
.pfs-subscription-readonly #pfsAddWindowBtn,
.pfs-subscription-readonly #groupSelectedBtn,
.pfs-subscription-readonly #deleteSelectedBtn,
.pfs-subscription-readonly #jobOutQuoteViewBtn,
.pfs-subscription-readonly #jobOutQuoteBtn,
.pfs-subscription-readonly #jobOutQuoteEmailBtn,
.pfs-subscription-readonly #jobOutQuoteTextBtn,
.pfs-subscription-readonly #jobOutQuoteCopyBtn,
.pfs-subscription-readonly #pfsCustomerSunMapBtn{
  opacity:.58;
  cursor:not-allowed;
}

/* ==================== Saved Optimization Status Strip ==================== */
#pfsOptStatusStrip {
  margin: 10px 0 12px;
}

.pfs-opt-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
}

.pfs-opt-badge {
  font-size: 16px;
  line-height: 1;
}

.pfs-opt-title {
  font-weight: 900;
}

.pfs-opt-when {
  font-weight: 800;
  opacity: 0.9;
}

.pfs-opt-warning {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.95;
}


/* ===== Launch-tier branding ===== */
.brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-top {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 26px;
}
.brand-line {
  height: 2px;
  width: 170px;
  background: rgba(255,255,255,0.55);
  margin: 6px 0 6px 0;
  border-radius: 999px;
}
.brand-bottom {
  font-weight: 600;
  font-size: 15px;
  opacity: 0.92;
}

/* ===== Launch-tier footer ===== */
#appFooter {
  padding: 14px 16px;
}
#appFooter .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#appFooter .footer-brand {
  font-weight: 700;
}
#appFooter .footer-version {
  opacity: 0.75;
  font-weight: 600;
  margin-left: 6px;
}
#appFooter .footer-usage {
  opacity: 0.9;
  font-weight: 600;
}

/* --- Build button + usage note (desktop) --- */

/* =========================
   Premium UI Polish Overrides
   ========================= */
:root{
  --font-body:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --primary:#d8aa4c;
  --primary-dark:#b9852d;
  --secondary:#6ce7ff;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --bg:#f7f7f4;
  --text:#111318;
  --muted:#5f6872;
  --surface:#ffffff;
  --surface-2:#f7f5ef;
  --surface-3:#efebe2;
  --border:rgba(17,19,24,.11);
  --shadow:0 24px 70px rgba(17,19,24,.08);
  --shadow-lg:0 34px 100px rgba(17,19,24,.16);
  --input-bg:#ffffff;
  --input-text:#111318;
  --input-border:rgba(17,19,24,.16);
  --input-border-focus:rgba(216,170,76,.72);
  --focus-ring:0 0 0 4px rgba(216,170,76,.18);
  --pfs-ink:#08111d;
  --pfs-ink-2:#0a1726;
  --pfs-gold:#d8aa4c;
  --pfs-gold-2:#f0cd76;
  --pfs-cyan:#6ce7ff;
}

body{
  font-family:var(--font-body);
  background:
    radial-gradient(circle at 16% 18%, rgba(216,170,76,.10), transparent 30%),
    radial-gradient(circle at 84% 10%, rgba(108,231,255,.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f4 42%, #f7f5ef 100%);
  color:var(--text);
}

h1,h2,h3,h4,.results-heading,.jobpick-title,.jobmgr-title-text{
  font-family:var(--font-heading);
  letter-spacing:-.025em;
}

header{
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 60px rgba(15,23,42,.10);
  backdrop-filter: blur(14px);
}

.app-title-wrap{ gap:14px; }
.app-logo{ width:56px; height:56px; object-fit:contain; border-radius:14px; box-shadow:0 6px 18px rgba(15,23,42,.12); }
.app-title-text h1{ font-weight:700; font-size:1.8rem; }
.app-title-text p{ color:var(--muted); font-weight:500; }

.card, details.job-details{
  border-radius:14px;
  border:1px solid rgba(17,19,24,.10);
  box-shadow:var(--shadow);
}
.card{ padding:14px; }

/* tighten vertical rhythm so Create/View Cut Plan stays above fold */
.main-content{ gap:16px; }
.job-details{ margin:-6px 0 12px; }
.job-details{ padding:10px; }
.job-details-header{ padding:8px 10px; }
.main-actions{ padding-top:12px; margin-top:14px; }
.main-actions.main-actions-left{ margin-top:8px; }
.job-details-grid{ gap:8px 10px; }
.job-field input{ padding:6px 8px; font-size:.92rem; }

.job-details-header h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:-.02em;
}

.meta-inline{
  color:var(--muted);
  font-weight:600;
}

input, select, textarea{
  border-radius:12px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--input-text);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}
input::placeholder, textarea::placeholder{
  color:color-mix(in srgb, var(--input-text) 55%, transparent);
}
select{
  color:var(--input-text);
}

.btn-primary,.btn-secondary,.btn-mini,button{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:0;
  border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary, .fy-btn-primary, .btn-optimize-roll{
  background:linear-gradient(135deg, var(--pfs-gold-2), var(--pfs-gold));
  border:1px solid rgba(141,96,20,.20);
  color:#111318;
  box-shadow:0 18px 34px rgba(216,170,76,.24);
}
.btn-primary:hover, .fy-btn-primary:hover, .btn-optimize-roll:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 42px rgba(216,170,76,.30);
}
.btn-secondary, .fy-btn-secondary{
  background:var(--surface);
  border:1px solid rgba(15,23,42,.16);
}
.btn-secondary:hover, .fy-btn-secondary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(15,23,42,.10);
}
.btn-mini{
  border-radius:10px;
}

.results-section{ min-height:520px; }
.placeholder{
  border:1px dashed rgba(15,23,42,.16);
  background:linear-gradient(135deg, rgba(31,77,122,.04), rgba(209,166,72,.06));
  border-radius:18px;
  padding:26px;
  color:var(--muted);
}
.placeholder h3{
  font-family:var(--font-heading);
  color:var(--text);
  margin-bottom:6px;
}

.job-draft-hint{
  border:1px solid rgba(31,77,122,.22);
  background:#f4f7ff;
  color:#111827;
  border-radius:12px;
}

.window-controls-bottom{
  display:flex;
  gap:10px;
}
.window-controls-bottom button{
  flex:1;
  min-width:0;
  font-size:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.16) !important;
  background:var(--surface) !important;
  color:var(--text) !important;
  font-weight:700;
  text-transform:none;
}
.window-controls-bottom .btn-add-window,
.window-controls-bottom .btn-group-selected,
.window-controls-bottom .btn-delete-selected{
  background:var(--surface) !important;
  border:1px solid rgba(15,23,42,.16) !important;
  color:var(--text) !important;
}
.window-controls-bottom button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(15,23,42,.10);
}
.window-controls-bottom button:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

.pfs-pro-toast{
  position:fixed;
  left:50%;
  top:90px;
  transform:translateX(-50%);
  background:rgba(15,23,42,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 16px;
  box-shadow:0 16px 40px rgba(15,23,42,.35);
  z-index:9999;
  font-size:13px;
  line-height:1.4;
  max-width:320px;
  text-align:center;
}
.pfs-pro-toast b{ font-weight:800; }

.menu-dropdown{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 20px 40px rgba(15,23,42,.18);
}

@keyframes pfsFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.card, .collapsible-card{ animation:pfsFadeUp .45s ease both; }

@media (prefers-reduced-motion: reduce){
  .card, .collapsible-card{ animation:none; }
  *{ transition:none !important; }
}
.build-cutplan-wrap { width: 100%; display:flex; flex-direction:column; align-items:center; }
.build-cutplan-wrap .btn-optimize-roll { width: 100%; }
#optUsageInline { width: 100%; text-align: center; margin-top: 6px; }

/* --- Mobile optimize bar usage note --- */
.opt-usage-note-mobile { text-align: center; opacity: 0.9; margin-top: 6px; font-size: 12.5px; }


/* --- Footer links --- */
/* PFS footer layout (responsive) */
.footer-content{
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.footer-left{min-width: 220px;}
.footer-right{margin-left:auto;}

.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer-links a{ color: var(--muted); text-decoration:none; font-weight:600; font-size:13px; }
.footer-links a:hover{ color: var(--text); text-decoration:underline; }

.footer-bottom{ display:block !important; }

@media (max-width: 640px){
  .footer-content{ flex-direction:column; align-items:flex-start; }
  .footer-right{ width:100%; margin-left:0; }
  .footer-links{ justify-content:flex-start; }
}

/* --- Single-roll metrics actions (inside metrics grid) --- */
.result-actions-row{ display:flex; gap:10px; width:100%; }
.result-actions-row .btn-output{ flex:1; width:100%; }
.result-actions .fy-project-sheet-btn{ width:100%; margin-top:10px; }
.job-outputs-locked .job-outputs-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.job-outputs-locked .job-outputs-title{ display:flex; align-items:center; gap:10px; margin:0; }
.job-outputs-locked .job-outputs-title h3{ margin:0; }
.job-outputs-locked .job-outputs-teaser{ color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ==================== Optimization History (Previous cut plans) ==================== */
.pfs-history-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 6px;
}
.pfs-history-row{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.pfs-history-restore{
  flex:1;
  text-align:left;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.03);
  color: inherit;
}
.pfs-history-restore:hover{
  border-color: rgba(99,102,241,.55);
}
.pfs-history-row.stale .pfs-history-restore{
  opacity:.85;
}
.pfs-history-label{
  font-weight:800;
  font-size: 0.98rem;
  line-height:1.1;
}
.pfs-history-meta{
  margin-top:6px;
  font-size:0.85rem;
  opacity:.75;
}
.pfs-history-remove{
  width:44px;
  min-width:44px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.02);
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
}
.pfs-history-remove:hover{
  border-color: rgba(239,68,68,.55);
}
.pfs-history-actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}



/* ==================== Allow Window Rotation toggle ==================== */
.pfs-rot-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 10px 12px;
  margin: 10px 0 8px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}
.pfs-rot-left{min-width:0;}
.pfs-rot-label{font-weight: 900; letter-spacing: .2px;}
.pfs-rot-label-wrap{display:flex; align-items:center; gap:8px;}
.pfs-rot-help{margin-top:3px; font-size: 12px; opacity: .78; line-height: 1.3;}
.pfs-rot-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.pfs-width-roll-toggle{margin-top: 0;}
.pfs-rot-toggle.is-disabled{
  opacity: .68;
}
.pfs-rot-toggle.is-disabled .pfs-slider{
  cursor: not-allowed;
}
.pfs-rot-exception{
  display:none;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}
.pfs-rot-exception.is-visible{display:flex;}
.pfs-rot-exception input{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #22c55e;
}
.pfs-info-btn{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(148,163,184,.12);
  color: inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor:pointer;
  flex: 0 0 auto;
}
.pfs-info-btn:hover{border-color: rgba(99,102,241,.65); background: rgba(99,102,241,.16);}
.pfs-info-btn:focus-visible{outline: 2px solid rgba(99,102,241,.75); outline-offset: 2px;}
.pfs-rot-status{
  font-weight: 900;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.30);
  min-width: 44px;
  text-align:center;
}
.pfs-rot-status.on{color: #22c55e; border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.10);} 
.pfs-rot-status.off{color: #ef4444; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10);} 

/* Switch */
.pfs-switch{position:relative; display:inline-block; width: 52px; height: 30px;}
.pfs-switch input{opacity:0; width:0; height:0;}
.pfs-slider{
  position:absolute; inset:0;
  cursor:pointer;
  background: rgba(148,163,184,.25);
  border: 1px solid rgba(148,163,184,.38);
  border-radius: 999px;
  transition: .18s ease;
}
.pfs-slider:before{
  content:"";
  position:absolute;
  height: 24px;
  width: 24px;
  left: 3px;
  top: 2.5px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  transition: .18s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transform: translateX(22px);
}
.pfs-switch input:checked + .pfs-slider{background: rgba(34,197,94,.25); border-color: rgba(34,197,94,.55);} 
.pfs-switch input:checked + .pfs-slider:before{transform: translateX(0);} 
.pfs-switch input:focus-visible + .pfs-slider{outline: 2px solid rgba(99,102,241,.75); outline-offset: 2px;}

@media (max-width: 520px){
  .pfs-rot-toggle{padding: 10px 10px;}
  .pfs-rot-help{display:none;}
  .pfs-rot-exception{font-size: 11px;}
}

/* =========================
   Site-Style Header + Footer
   ========================= */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  margin-left: 0;
  margin-right: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: none;
  padding: 0;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 72px;
  padding: 0;
  gap:16px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:.1px;
  color: var(--text);
  text-decoration:none;
}
.logo img{
  width:48px;
  height:48px;
  object-fit: contain;
  border-radius:0;
}
.logo .brand{display:flex; flex-direction:column; gap:2px; line-height:1.2;}
.logo .brand-name{font-weight:700; font-size:15px; letter-spacing:.1px;}
.logo .brand-tagline{font-size:12px; color:var(--muted); font-weight:400; margin-top:0;}
@media (max-width: 860px){
  .logo .brand-tagline{font-size:11px; margin-top:1px; opacity:.9;}
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
#appFooter{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.footer{
  border-top: 0;
  margin-top: 18px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: 13px;
}
.footer a{ color: var(--muted); text-decoration: none; }
.footer a:hover{ color: var(--text); text-decoration: underline; }
.footer .footer-inner{display:flex; min-height:70px; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
#appFooter .footer-inner.container{
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
.footer .footer-left{display:flex; flex-direction:column; gap:4px;}
.footer .footer-left.footer-brand-stack{
  align-items: flex-start;
  text-align: left;
}
.footer .footer-brand{
  color: var(--text);
  font-weight: 700;
}
.footer .footer-tagline{color:var(--muted); font-weight:700; font-size:13px;}
.footer .footer-copyright{
  color: var(--muted);
  font-size: 13px;
}
.footer .footer-links{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; text-align:right;}
.footer .footer-links a{
  display:inline-flex;
  align-items:center;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
}
.footer .footer-links a:hover{ color: var(--text); text-decoration: underline; }
.footer .footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.footer .footer-help{
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
.footer .footer-links a:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--primary) 45%, white);
  outline-offset: 2px;
}
@media (min-width: 769px){
  .navbar{
    margin-bottom: 6px !important;
    border-bottom: 1px solid #2a3750 !important;
    background: rgba(12, 17, 27, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    padding: 0 !important;
  }
  .navbar .nav-inner{
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    gap: 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: min(1080px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  .navbar .logo{
    gap: 12px !important;
    color: #eaf0f8 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    letter-spacing: .1px !important;
  }
  .navbar .logo img{
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }
  .navbar .logo .brand{
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.2 !important;
  }
  .navbar .logo .brand-name{
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: .1px !important;
  }
  .navbar .logo .brand-tagline{
    color: #b4bfd1 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
  }

  #appFooter{
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  #appFooter .footer{
    border-top: 1px solid #2a3750 !important;
    margin-top: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #b4bfd1 !important;
  }
  #appFooter .footer-inner.container{
    min-height: 70px !important;
    width: min(1080px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    text-align: left !important;
  }
  #appFooter .footer .footer-brand{
    color: #eaf0f8 !important;
  }
  #appFooter .footer .footer-tagline,
  #appFooter .footer .footer-copyright,
  #appFooter .footer a,
  #appFooter .footer .footer-help{
    color: #b4bfd1 !important;
  }
  #appFooter .footer .footer-links{
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }
  #appFooter .footer .footer-links a{
    margin-left: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width: 720px){
  .footer{
    padding: 16px 0 48px;
  }
  .footer .footer-inner{
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
  .footer .footer-left{
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .footer .footer-links{
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
  }
  .footer .footer-links a{
    font-size: 11px;
    letter-spacing: 0;
  }
}

/* =========================
   Legal Modal
   ========================= */
.pfs-legal-modal{position:fixed; inset:0; display:none; z-index:9999; font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
.pfs-legal-modal[aria-hidden="false"]{display:block;}
.pfs-legal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.65);}
.pfs-legal-dialog{
  position:relative;
  max-width: 1100px;
  margin: 5vh auto;
  width: calc(100% - 24px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}
.pfs-legal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.pfs-legal-title{font-weight:800; color: var(--text); font-size: 16px;}
.pfs-legal-close{
  appearance:none;
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 38px;
}
.pfs-legal-close:hover{ background: var(--surface-3); }
.pfs-legal-frame{
  width:100%;
  height: min(72vh, 820px);
  border:0;
  background: var(--surface);
}
.pfs-no-scroll{ overflow: hidden !important; }

/* Chrome autofill trap (offscreen) */
.pfs-autofill-trap{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.pfs-autofill-trap input{
  width:1px;
  height:1px;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
}

/* Global app background: light workspace with subtle premium atmosphere */
body{
  background:
    radial-gradient(1000px 420px at 12% -10%, rgba(216,170,76,.15), transparent 74%),
    radial-gradient(920px 380px at 88% -12%, rgba(108,231,255,.11), transparent 72%),
    linear-gradient(180deg, rgba(8,17,29,.04) 0%, transparent 12%, transparent 86%, rgba(8,17,29,.05) 100%),
    linear-gradient(180deg, #fffefb 0%, #f8f6f1 44%, #f4f1ea 100%) !important;
}

/* Sharper UI + surface gradients (app-wide visual tuning) */
:root{
  --pfs-radius-panel: 10px;
  --pfs-radius-control: 8px;
}

header,
.card,
.job-details,
.modal-content,
.pfs-bug-modal-card,
.menu-dropdown,
.pfs-legal-dialog{
  border-radius: var(--pfs-radius-panel) !important;
}

.btn,
[class^="btn-"],
[class*=" btn-"],
.menu-btn,
.bug-btn,
.menu-dropdown button,
.menu-dropdown .menu-link{
  border-radius: var(--pfs-radius-control) !important;
}

.card,
.job-details,
.modal-content,
.pfs-bug-modal-card,
.menu-dropdown{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    #121a29 !important;
  border-color: #2a3750 !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.26) !important;
}

/* Optimization results surfaces: match left-column card style (cosmetic only) */
.results-section .result-stat,
.results-section .savings-notice,
.results-section .rotation-notice,
.results-section .cut-sheet-section,
.results-section .cut-sheet-toggle,
.results-section .cut-sheet,
.results-section .fy-plan-rollcard,
.results-section .fy-quote-card,
.results-section .job-outputs{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    #121a29 !important;
  border-color: #2a3750 !important;
  border-radius: var(--pfs-radius-panel) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.26) !important;
}

.results-section .cut-sheet-toggle:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    #121a29 !important;
}

.results-section .savings-notice,
.results-section .rotation-notice{
  border-left: 3px solid color-mix(in srgb, var(--primary) 70%, #ffffff 30%);
}

/* Keep the highlighted efficiency stat visibly accented */
.results-section .result-stat.stat-highlight{
  background:
    linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Optimization quick-action buttons: keep distinct from cards, match app theme */
.results-section [data-opt-action="open-cut-diagram"].btn-output,
.results-section [data-opt-action="open-window-list"].btn-output,
.results-section [data-opt-action="view-plan-roll"][data-view="diagram"].btn-output,
.results-section [data-opt-action="view-plan-roll"][data-view="windows"].btn-output{
  background:
    linear-gradient(180deg, rgba(79, 144, 255, 0.22), rgba(79, 144, 255, 0.10)),
    #15233a !important;
  border-color: #3a5686 !important;
  color: #eaf0f8 !important;
}

.results-section [data-opt-action="open-cut-diagram"].btn-output:hover,
.results-section [data-opt-action="open-window-list"].btn-output:hover,
.results-section [data-opt-action="view-plan-roll"][data-view="diagram"].btn-output:hover,
.results-section [data-opt-action="view-plan-roll"][data-view="windows"].btn-output:hover{
  background:
    linear-gradient(180deg, rgba(79, 144, 255, 0.28), rgba(79, 144, 255, 0.14)),
    #1a2a44 !important;
  border-color: #4a6ca5 !important;
}

/* ==================== Settings page visual parity (cosmetic only) ==================== */
.settings-page .settings-card,
#settingsRoot .fy-panel-card,
#settingsRoot .fy-section,
#settingsRoot .fy-film,
#settingsRoot .fy-card,
#settingsRoot .fy-quote-card,
#settingsRoot .fy-tabs{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    #121a29 !important;
  border-color: #2a3750 !important;
  border-radius: var(--pfs-radius-panel) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.26) !important;
}

.settings-page .settings-title,
.settings-page .settings-subtitle,
#settingsRoot .fy-panel-title,
#settingsRoot .fy-panel-subtitle,
#settingsRoot .fy-mini,
#settingsRoot .fy-hint{
  color: #b4bfd1 !important;
}

#settingsRoot .fy-panel-title,
.settings-page .settings-title{
  color: #eaf0f8 !important;
}

#settingsRoot .fy-btn,
#settingsRoot .fy-btn-primary,
#settingsRoot .fy-btn-secondary,
#settingsRoot .fy-tabbtn,
#settingsRoot .fy-icon-btn,
#settingsRoot .fy-wysiwyg-btn,
.settings-page .btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    #15233a !important;
  border-color: #3a5686 !important;
  color: #eaf0f8 !important;
  border-radius: var(--pfs-radius-control) !important;
}

#settingsRoot .fy-btn:hover,
#settingsRoot .fy-btn-primary:hover,
#settingsRoot .fy-btn-secondary:hover,
#settingsRoot .fy-tabbtn:hover,
#settingsRoot .fy-icon-btn:hover,
#settingsRoot .fy-wysiwyg-btn:hover,
.settings-page .btn-secondary:hover{
  border-color: #4a6ca5 !important;
  transform: translateY(-1px);
}

#settingsRoot .fy-tabbtn.active{
  background:
    linear-gradient(180deg, rgba(79, 144, 255, 0.28), rgba(79, 144, 255, 0.14)),
    #1a2a44 !important;
  border-color: #4a6ca5 !important;
}

#settingsRoot input,
#settingsRoot select,
#settingsRoot textarea,
#settingsRoot .fy-wysiwyg{
  background: #0f1828 !important;
  border-color: #2a3750 !important;
  color: #eaf0f8 !important;
  border-radius: var(--pfs-radius-control) !important;
}

#settingsRoot .fy-field label,
#settingsRoot .fy-form-row label{
  color: #b4bfd1 !important;
}

/* =========================
   Landing-site facelift pass
   Cosmetic only: shared chrome, cards, controls, and output surfaces
   ========================= */
:root{
  --pfs-radius-panel: 14px;
  --pfs-radius-control: 10px;
  --pfs-app-ink:#08111d;
  --pfs-app-ink-2:#0a1726;
  --pfs-app-gold:#d8aa4c;
  --pfs-app-gold-2:#f0cd76;
  --pfs-app-cyan:#6ce7ff;
}

.navbar{
  background:rgba(6,7,8,.96) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(8px) !important;
}

.navbar .nav-inner{
  min-height:58px !important;
  height:58px !important;
  padding-left:14px !important;
  padding-right:14px !important;
}

.navbar .logo img{
  width:42px !important;
  height:42px !important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
}

.navbar .logo .brand-name{
  color:#edf9ff !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}

.navbar .logo .brand-tagline{
  color:#a6b8c9 !important;
}

.menu-btn,
.gear-btn,
.bug-btn,
.btn-project,
.btn-add-window,
.btn-select-all,
.btn-deselect,
.btn-group-selected,
.btn-output,
.btn-print-main,
.btn-print-cut-sheet,
.fy-btn,
.fy-btn-secondary,
.fy-tabbtn,
.jobmgr-tab,
.jobmgr-viewbtn{
  border-radius:999px !important;
}

.menu-btn{
  min-height:38px;
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#fff !important;
  box-shadow:none !important;
}

.menu-btn:hover{
  background:rgba(255,255,255,.11) !important;
}

.menu-dropdown{
  background:rgba(8,8,8,.96) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.28) !important;
}

.menu-dropdown button,
.menu-dropdown .menu-link{
  color:rgba(255,255,255,.84) !important;
  border-radius:8px !important;
}

.menu-dropdown button:hover,
.menu-dropdown .menu-link:hover{
  background:rgba(216,170,76,.16) !important;
  color:#fff !important;
}

.container{
  max-width:1240px;
}

.main-content{
  align-items:start;
}

.card,
details.job-details,
.fy-panel-card,
.jobmgr-page,
.groups-summary-container.active{
  border-radius:14px !important;
  border-color:rgba(17,19,24,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,251,252,.88)) !important;
  box-shadow:0 24px 70px rgba(17,19,24,.08) !important;
}

.card.input-section{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

.job-details-header{
  margin-bottom:8px;
  border-bottom:1px solid rgba(17,19,24,.08);
}

.job-details-header h3,
.results-title h2,
.settings-header-row h2,
.jobmgr-title-text{
  color:#111318 !important;
  font-weight:800;
}

.meta-inline,
.fy-mini,
.fy-panel-subtitle,
.jobmgr-count,
.summary-meta{
  color:#6a737d !important;
}

.job-field label,
.film-selection label,
.film-select-wrapper label,
.fy-field label,
.fy-form-row label{
  color:#5f6872 !important;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

input,
select,
textarea,
.job-field input,
.select-wrapper select,
.fy-field input,
.fy-field select,
.fy-field textarea,
.jobmgr-search,
.jobmgr-sort{
  background:#fff !important;
  border-color:rgba(17,19,24,.14) !important;
  color:#111318 !important;
  border-radius:10px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.70) inset;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(216,170,76,.72) !important;
  box-shadow:0 0 0 4px rgba(216,170,76,.18) !important;
}

.table-header,
.summary-header,
.cut-sheet-toggle,
.cut-diagram-toggle,
.film-configuration,
.pfs-rot-toggle{
  background:#f7f5ef !important;
  border-color:rgba(17,19,24,.10) !important;
  color:#5f6872 !important;
}

.window-row,
.summary-group,
.cut-instruction,
.diagram-info{
  background:#fff !important;
  border-color:rgba(17,19,24,.10) !important;
}

.btn-optimize-roll{
  min-height:52px;
  color:#111318 !important;
  font-weight:800;
}

.window-controls-bottom .btn-add-window,
.window-controls-bottom .btn-group-selected,
.window-controls-bottom .btn-delete-selected,
.btn-secondary,
.fy-btn-secondary,
.btn-output,
.jobmgr-tab,
.jobmgr-viewbtn{
  background:#fff !important;
  border-color:rgba(17,19,24,.14) !important;
  color:#111318 !important;
}

.window-controls-bottom .btn-add-window:hover,
.window-controls-bottom .btn-group-selected:hover,
.window-controls-bottom .btn-delete-selected:hover,
.btn-secondary:hover,
.fy-btn-secondary:hover,
.btn-output:hover,
.jobmgr-tab:hover,
.jobmgr-viewbtn:hover{
  border-color:rgba(216,170,76,.42) !important;
  box-shadow:0 18px 38px rgba(17,19,24,.10);
}

.placeholder{
  background:
    radial-gradient(circle at 86% 16%, rgba(216,170,76,.12), transparent 34%),
    linear-gradient(180deg, #ffffff, #f7f5ef) !important;
  border:1px dashed rgba(17,19,24,.16) !important;
  color:#6a737d !important;
}

.results-section .result-stat,
.results-section .savings-notice,
.results-section .rotation-notice,
.results-section .cut-sheet-section,
.results-section .cut-sheet-toggle,
.results-section .cut-sheet,
.results-section .fy-plan-rollcard,
.results-section .fy-quote-card,
.results-section .job-outputs{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    var(--pfs-app-ink-2) !important;
  border-color:rgba(255,255,255,.11) !important;
  color:#f6fbff !important;
  box-shadow:0 24px 70px rgba(8,17,29,.22) !important;
}

.results-section .result-stat small,
.results-section .stat-label,
.results-section .cut-details,
.results-section .fy-plan-rollwindows{
  color:#a6b8c9 !important;
}

.results-section .result-stat.stat-highlight{
  background:
    linear-gradient(135deg, var(--pfs-app-gold-2), var(--pfs-app-gold)) !important;
  color:#111318 !important;
}

.results-section .result-stat.stat-highlight .stat-label,
.results-section .result-stat.stat-highlight small{
  color:rgba(17,19,24,.72) !important;
}

.results-section [data-opt-action="open-cut-diagram"].btn-output,
.results-section [data-opt-action="open-window-list"].btn-output,
.results-section [data-opt-action="view-plan-roll"][data-view="diagram"].btn-output,
.results-section [data-opt-action="view-plan-roll"][data-view="windows"].btn-output{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#fff !important;
}

.results-section [data-opt-action="open-cut-diagram"].btn-output:hover,
.results-section [data-opt-action="open-window-list"].btn-output:hover,
.results-section [data-opt-action="view-plan-roll"][data-view="diagram"].btn-output:hover,
.results-section [data-opt-action="view-plan-roll"][data-view="windows"].btn-output:hover{
  background:rgba(216,170,76,.16) !important;
  border-color:rgba(216,170,76,.38) !important;
}

#appFooter .footer{
  background:#08111d !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  color:#a6b8c9 !important;
}

#appFooter .footer-inner.container{
  min-height:92px !important;
}

#appFooter .footer .footer-brand{
  color:#edf9ff !important;
}

#appFooter .footer .footer-tagline,
#appFooter .footer .footer-copyright,
#appFooter .footer a,
#appFooter .footer .footer-help{
  color:#a6b8c9 !important;
}

#appFooter .footer a:hover{
  color:#fff !important;
}

@media (max-width:720px){
  .navbar .nav-inner{
    height:54px !important;
    min-height:54px !important;
  }

  .navbar .logo img{
    width:36px !important;
    height:36px !important;
  }

  .card,
  details.job-details{
    border-radius:12px !important;
  }
}

/* Horizontal brand lockup in app nav */
.navbar .logo{
  margin-left: 0 !important;
}

.navbar .logo img{
  width: clamp(160px, 22vw, 280px) !important;
  height: auto !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (max-width:720px){
  .navbar .logo{
    margin-left: 0 !important;
  }
  .navbar .logo img{
    width: clamp(140px, 40vw, 220px) !important;
    max-height: 36px !important;
  }
}

.pfs-auth-gate{
  background:rgba(6,7,8,.66) !important;
  backdrop-filter:blur(8px);
}

.pfs-auth-card{
  position:relative;
  width:min(480px, calc(100% - 24px));
  border-radius:14px !important;
  border:1px solid rgba(216,170,76,.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,244,211,.42), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(216,170,76,.11), transparent 34%),
    linear-gradient(180deg, #ffffff, #f7f5ef) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 0 34px rgba(216,170,76,.18),
    0 34px 100px rgba(6,7,8,.34) !important;
  overflow:hidden;
}

.pfs-auth-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(255,250,232,.76) 0%,
    rgba(240,205,118,.50) 28%,
    rgba(177,132,49,.18) 58%,
    rgba(255,255,255,.44) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.pfs-auth-head{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:26px 28px 20px !important;
  text-align:center;
  border-bottom:1px solid rgba(177,132,49,.14) !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.62), transparent 38%),
    linear-gradient(180deg, rgba(255,250,238,.64), rgba(255,255,255,.12));
}

.pfs-auth-logo{
  width:min(300px, 82%) !important;
  height:auto !important;
  max-height:72px;
  object-fit:contain;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.pfs-auth-title{
  color:#111318 !important;
  font-weight:900;
  font-size:20px;
  letter-spacing:-.02em;
}

.pfs-auth-body{
  padding:22px 28px 18px !important;
}

.pfs-auth-sub,
.pfs-auth-label,
.pfs-auth-hint{
  color:#5f6872 !important;
}

.pfs-auth-sub a{
  color:#b8872f !important;
  font-weight:900;
  text-decoration:none;
}

.pfs-auth-sub a:hover{
  color:#9d762d !important;
  text-decoration:underline;
}

.pfs-auth-label{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pfs-auth-input{
  border-color:rgba(17,19,24,.13) !important;
  background:
    linear-gradient(180deg, #ffffff, #fbfaf7) !important;
  color:#111318 !important;
}

.pfs-auth-input:focus{
  border-color:rgba(177,132,49,.58) !important;
  box-shadow:
    0 0 0 4px rgba(216,170,76,.15),
    0 8px 18px rgba(177,132,49,.08) !important;
}

.pfs-auth-link,
.pfs-auth-footer a{
  color:#b8872f !important;
}

.pfs-auth-link:hover,
.pfs-auth-footer a:hover{
  color:#9d762d !important;
}

.pfs-auth-btn{
  border-radius:999px !important;
  border-color:rgba(17,19,24,.14) !important;
  background:#fff !important;
  color:#111318 !important;
}

.pfs-auth-btn-primary{
  border:1px solid rgba(141,96,20,.28) !important;
  background:
    linear-gradient(120deg,
      #fffbe8 0%,
      #f8e8ad 20%,
      #edcf78 48%,
      #d5a64d 76%,
      #f2d889 100%
    ) !important;
  color:#2b2112 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.62) inset,
    0 14px 30px rgba(216,170,76,.24);
  text-shadow:0 1px 0 rgba(255,255,255,.36);
}

.pfs-auth-btn-primary:hover{
  background:
    linear-gradient(120deg,
      #fffdf0 0%,
      #faedbd 20%,
      #f0d587 50%,
      #ddb45e 76%,
      #f5df98 100%
    ) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 18px 38px rgba(216,170,76,.30);
  transform:translateY(-1px);
}

.pfs-auth-footer{
  border-top:1px solid rgba(17,19,24,.09) !important;
  background:rgba(255,255,255,.58) !important;
  padding:14px 20px 18px !important;
  gap:10px 16px !important;
}

/* Final contrast pass for logged-in light surfaces. Older settings/account
   selectors are very specific, so keep these scoped and late. */
#appMainContent .card:not(.results-section),
#settingsPage .card,
#accountPage .card,
#jobManagerPage .card,
#settingsRoot,
#accountRoot,
#jobMgrBody,
#settingsRoot .fy-panel-card,
#settingsRoot .fy-section,
#settingsRoot .fy-film,
#settingsRoot .fy-card,
#settingsRoot .fy-quote-card,
#settingsRoot .fy-tabs,
#accountRoot .account-card,
#accountRoot .account-section,
.jobmgr-page{
  color:#111318 !important;
}

#appMainContent .card:not(.results-section) p,
#appMainContent .card:not(.results-section) small,
#appMainContent .card:not(.results-section) .fy-mini,
#appMainContent .card:not(.results-section) .fy-panel-subtitle,
#appMainContent .card:not(.results-section) .meta-inline,
#settingsPage .fy-mini,
#accountPage .fy-mini,
#settingsRoot .fy-panel-subtitle,
#settingsRoot .fy-mini,
#settingsRoot .fy-hint,
#settingsRoot .fy-field-help,
#settingsRoot .fy-muted,
#settingsRoot .fy-form-row small,
#accountRoot .fy-mini,
#accountRoot .account-muted,
#accountRoot small,
#jobMgrBody .jobmgr-meta,
#jobMgrBody .jobmgr-empty,
.jobmgr-page .jobmgr-count{
  color:#5f6872 !important;
}

#accountRoot .account-layout{
  display:flex;
  flex-direction:column;
  gap:18px;
}

#accountRoot .account-subscription-panel{
  width:100%;
  padding:18px;
  border:1px solid rgba(17,19,24,.11);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.78));
}

#accountRoot .account-section-title{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

#accountRoot .account-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

#accountRoot .account-section-title-text{
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  color:#111318;
}

#accountRoot .account-section-sub{
  line-height:1.4;
}

#accountRoot .account-badge-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

#accountRoot .account-billing-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
  margin-top:16px;
}

@media (min-width: 860px){
  #accountRoot .account-billing-hero-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1020px){
  #accountRoot .account-billing-hero-grid{
    grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.05fr);
  }
}

#accountRoot .account-current-subscription-panel,
#accountRoot .account-next-payment-card,
#accountRoot .account-billing-portal-panel,
#accountRoot .account-addons-card{
  min-width:0;
  height:100%;
  border:1px solid rgba(17,19,24,.10);
  border-radius:8px;
  background:#fff;
}

#accountRoot .account-current-subscription-panel{
  display:flex;
  flex-direction:column;
  padding:16px;
}

#accountRoot .account-next-payment-card{
  padding:16px;
  border-color:rgba(216,170,76,.62);
  background:linear-gradient(180deg, rgba(255,250,238,.94), #fff);
  box-shadow:0 14px 30px rgba(99,78,30,.08);
}

#accountRoot .account-billing-portal-panel{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
  padding:16px;
  background:rgba(255,255,255,.72);
}

#accountRoot .account-addons-card{
  padding:16px;
  background:rgba(255,255,255,.72);
}

#accountRoot .account-overview-kicker{
  margin-bottom:6px;
  color:#6b7280;
  font-size:11px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}

#accountRoot .account-current-plan-name{
  color:#111318;
  font-size:21px;
  line-height:1.16;
  font-weight:950;
}

#accountRoot .account-billing-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

#accountRoot .account-billing-chip{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border-radius:999px;
  background:#e9f5fd;
  color:#0f4c6a;
  font-size:11px;
  font-weight:900;
}

#accountRoot .account-billing-chip.warning{
  background:#fff4cf;
  color:#6c4d08;
}

#accountRoot .account-scheduled-plan-change{
  display:grid;
  gap:3px;
  margin-top:14px;
  padding:11px 12px;
  border:1px solid rgba(24,103,219,.22);
  border-radius:8px;
  background:rgba(235,244,255,.82);
  color:#27364a;
  font-size:12px;
  line-height:1.35;
}

#accountRoot .account-scheduled-plan-change-kicker{
  color:#0b5dc5;
  font-size:10px;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}

#accountRoot .account-scheduled-plan-change strong{
  color:#111318;
  font-size:14px;
}

#accountRoot .account-subscription-facts{
  display:grid;
  gap:8px;
  margin-top:14px;
}

#accountRoot .account-current-plan-action{
  margin-top:auto;
  padding-top:14px;
}

#accountRoot .account-subscription-fact{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  color:#343a40;
  font-size:12px;
  line-height:1.35;
}

#accountRoot .account-subscription-fact-label{
  color:#6b7280;
  font-weight:850;
}

#accountRoot .account-subscription-fact-value{
  color:#111318;
  font-weight:850;
  text-align:right;
}

#accountRoot .account-next-payment-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

#accountRoot .account-next-payment-date{
  color:#343a40;
  font-size:13px;
  font-weight:850;
}

#accountRoot .account-discount-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  background:#e9f8ef;
  color:#16723b;
  font-size:11px;
  font-weight:950;
}

#accountRoot .account-payment-breakdown{
  display:grid;
  gap:8px;
  margin-top:12px;
}

#accountRoot .account-payment-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  color:#343a40;
  font-size:13px;
  line-height:1.35;
}

#accountRoot .account-payment-line span:last-child{
  color:#111318;
  font-weight:900;
  text-align:right;
}

#accountRoot .account-payment-line.discount,
#accountRoot .account-payment-line.discount span:last-child{
  color:#16723b;
  font-weight:950;
}

#accountRoot .account-payment-line.total{
  margin-top:4px;
  padding-top:11px;
  border-top:1px solid rgba(17,19,24,.12);
  color:#111318;
  font-size:15px;
  font-weight:950;
}

#accountRoot .account-payment-line.total span:last-child{
  font-size:28px;
  line-height:1;
  font-weight:950;
}

#accountRoot .account-payment-loading{
  margin-top:12px;
  color:#6b7280;
  font-size:13px;
  line-height:1.4;
  font-weight:750;
}

#accountRoot .account-next-plan-copy{
  margin-top:12px;
  color:#4f5f73;
  font-size:12px;
  line-height:1.4;
  font-weight:750;
}

#accountRoot .account-portal-copy{
  color:#5f6875;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
}

#accountRoot .account-billing-portal-panel .account-portal-action{
  width:100%;
  margin-top:auto;
  display:flex;
  justify-content:center;
}

#accountRoot .account-billing-portal-panel #btnManageSub{
  width:min(180px, 100%);
}

#accountRoot .account-billing-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(17,19,24,.09);
}

@media (min-width: 860px){
  #accountRoot .account-billing-grid{
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  }
}

#accountRoot .account-billing-block{
  min-width:0;
}

#accountRoot .account-block-title{
  margin-bottom:8px;
  color:#111318;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#accountRoot .account-portal-action{
  margin-top:2px;
}

#accountRoot .account-two-col{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

@media (min-width: 920px){
  #accountRoot .account-two-col{
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  }
}

#accountRoot .account-col{
  min-width:0;
  padding:18px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:8px;
  background:rgba(255,255,255,.74);
}

#accountRoot .account-global-actions{
  display:flex;
  justify-content:flex-end;
}

#accountRoot .account-global-actions .fy-settings-actions-right{
  width:auto;
}

#accountRoot #fyAccountSaveBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-width:132px;
  gap:6px;
}

#accountRoot .account-field-error label{
  color:#9f2f2f !important;
}

#accountRoot .account-field-error input{
  border-color:rgba(190,55,55,.78) !important;
  box-shadow:0 0 0 4px rgba(190,55,55,.12) !important;
}

#accountRoot .account-plan-change{
  margin-top:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

#accountRoot .account-card-action-btn{
  width:100%;
  min-height:38px;
  padding:8px 12px;
  font-weight:900;
}

#accountRoot .account-card-action-btn:disabled{
  cursor:default;
  opacity:.68;
}

#accountRoot .account-tier-options,
.account-modal-panel .account-tier-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#accountRoot .account-tier-option,
.account-modal-panel .account-tier-option{
  min-width:92px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(17,19,24,.15);
  border-radius:8px;
  background:#fff;
  color:#111318;
  font-weight:850;
  cursor:pointer;
}

#accountRoot .account-tier-option:hover,
.account-modal-panel .account-tier-option:hover{
  border-color:rgba(17,19,24,.32);
  background:#f7f4ec;
}

#accountRoot .account-tier-option:disabled,
.account-modal-panel .account-tier-option:disabled{
  cursor:default;
  opacity:.72;
}

#accountRoot .account-tier-option-unavailable,
#accountRoot .account-tier-option-unavailable:hover,
.account-modal-panel .account-tier-option-unavailable,
.account-modal-panel .account-tier-option-unavailable:hover{
  border-color:rgba(17,19,24,.10);
  background:#f1f3f5;
  color:#7a828b;
}

#accountRoot .account-tier-option-current,
#accountRoot .account-tier-option-current:hover,
.account-modal-panel .account-tier-option-current,
.account-modal-panel .account-tier-option-current:hover{
  border-color:rgba(216,170,76,.65);
  background:rgba(216,170,76,.16);
  color:#111318;
}

#accountRoot .account-plan-change-note{
  line-height:1.4;
}

#accountRoot .account-addon-root{
  margin-top:0;
}

#accountRoot .account-flex-purchase-pane{
  height:auto;
  margin-top:14px;
  gap:12px;
}

#accountRoot .account-flex-credit-explainer{
  padding:13px 14px;
  border:1px solid rgba(24,103,219,.20);
  border-radius:8px;
  background:rgba(235,244,255,.72);
  color:#27364a;
  font-size:12px;
  line-height:1.45;
}

#accountRoot .account-flex-credit-explainer strong{
  display:block;
  margin-bottom:6px;
  color:#111318;
  font-size:13px;
}

#accountRoot .account-flex-credit-explainer p{
  margin:0;
}

#accountRoot .account-flex-credit-explainer p + p{
  margin-top:7px;
}

#accountRoot .account-flex-purchase-options{
  margin-top:2px;
}

#accountRoot .account-flex-purchase-option{
  display:flex;
  flex:1 1 210px;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-height:66px;
  text-align:left;
}

#accountRoot .account-flex-purchase-option .account-plan-card-name{
  font-size:13px;
  font-weight:900;
}

#accountRoot .account-flex-purchase-option .account-plan-card-copy{
  color:#6b7280;
  font-size:11px;
  font-weight:700;
}

#accountRoot .account-addon-pane{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

#accountRoot .account-addon-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 12px;
}

#accountRoot .account-addon-title{
  font-size:14px;
  font-weight:900;
  color:#111318;
}

#accountRoot .account-addon-balance{
  line-height:1.35;
}

#accountRoot .account-addon-options{
  width:100%;
  margin-top:4px;
  flex-direction:column;
  flex-wrap:nowrap;
}

#accountRoot .account-addon-option{
  width:100%;
  flex:0 0 auto;
  min-width:100%;
  white-space:normal;
  text-align:center;
}

#accountRoot .account-pricing-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  text-decoration:none;
}

#accountRoot .account-reactivate-btn{
  min-height:38px;
}

.account-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:10020;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(17,19,24,.48);
}

.account-modal-panel{
  width:min(720px, 100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  border:1px solid rgba(17,19,24,.16);
  border-radius:8px;
  background:#fff;
  color:#111318;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
  padding:16px;
}

.account-modal-panel.account-plan-comparison-panel{
  width:min(1120px, 100%);
}

.account-modal-panel.account-plan-comparison-panel .account-plan-cards{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.account-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.account-modal-title{
  font-size:18px;
  font-weight:900;
}

.account-modal-close{
  width:34px;
  height:34px;
  border:1px solid rgba(17,19,24,.15);
  border-radius:8px;
  background:#fff;
  color:#111318;
  font-size:18px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

.account-modal-close:hover{
  background:#f3f5f7;
}

.account-modal-copy{
  margin-top:8px;
  line-height:1.45;
}

.account-reactivate-options{
  margin-top:14px;
}

.account-modal-panel .account-plan-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.account-demo-conversion-panel{
  width:min(1080px, 100%);
  padding:24px;
  border-radius:18px;
  border-color:rgba(15,23,42,.12);
  box-shadow:0 28px 80px rgba(15,23,42,.30);
}

.account-demo-modal-heading{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.account-demo-modal-kicker{
  color:#0b5eea;
  font-size:11px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.account-demo-conversion-panel .account-modal-title{
  font-size:24px;
  line-height:1.15;
}

.account-demo-modal-copy{
  max-width:760px;
  margin-top:8px;
  color:#526071;
  font-size:14px;
}

.account-modal-panel .account-demo-plan-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
  gap:14px;
  margin-top:20px;
}

.account-modal-panel .account-demo-plan-card{
  position:relative;
  width:100%;
  min-width:0;
  min-height:470px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  overflow:hidden;
  border:1px solid #dce3ec;
  border-radius:14px;
  background:#fff;
  color:#111827;
  text-align:left;
  white-space:normal;
  cursor:pointer;
  box-shadow:0 12px 32px rgba(15,23,42,.07);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.account-modal-panel .account-demo-plan-card:hover{
  transform:translateY(-2px);
  border-color:rgba(11,94,234,.42);
  box-shadow:0 18px 42px rgba(15,23,42,.12);
}

.account-modal-panel .account-demo-plan-card.is-featured{
  border:2px solid #0b5eea;
  background:linear-gradient(180deg, #f5f9ff 0, #fff 44%);
  box-shadow:0 18px 46px rgba(11,94,234,.16);
}

.account-demo-plan-badge{
  position:absolute;
  top:14px;
  right:14px;
  padding:5px 8px;
  border-radius:999px;
  background:#0b5eea;
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.account-demo-plan-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-right:76px;
}

.account-demo-plan-name{
  font-size:22px;
  line-height:1.1;
  font-weight:950;
}

.account-demo-plan-eyebrow{
  min-height:18px;
  color:#607086;
  font-size:12px;
  font-weight:800;
}

.account-demo-plan-price{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  margin-top:18px;
}

.account-demo-plan-price strong{
  font-size:31px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.035em;
}

.account-demo-plan-price > span{
  color:#667085;
  font-size:12px;
  font-weight:750;
}

.account-demo-plan-price-note{
  min-height:18px;
  margin-top:5px;
  color:#0b5eea;
  font-size:12px;
  font-weight:900;
}

.account-demo-plan-summary{
  min-height:78px;
  margin-top:14px;
  color:#526071;
  font-size:12px;
  line-height:1.5;
  font-weight:700;
}

.account-demo-plan-includes{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #e8edf3;
  color:#1f2937;
  font-size:11px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.account-demo-plan-features{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:10px;
}

.account-demo-plan-feature{
  position:relative;
  padding-left:20px;
  color:#344054;
  font-size:12px;
  line-height:1.35;
  font-weight:750;
}

.account-demo-plan-feature::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  color:#0b5eea;
  font-weight:950;
}

.account-demo-plan-action{
  min-height:40px;
  margin-top:auto;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:#111827;
  color:#fff;
  font-size:12px;
  font-weight:950;
}

.account-demo-plan-card.is-featured .account-demo-plan-action{
  background:#0b5eea;
}

.account-demo-modal-footnote{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e8edf3;
  text-align:center;
}

.account-modal-panel .account-tier-card{
  width:100%;
  min-height:0;
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  text-align:left;
  white-space:normal;
}

.account-tier-card-head{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.account-tier-card-title{
  font-size:17px;
  font-weight:950;
  color:#111318;
}

.account-tier-card-eyebrow{
  font-size:12px;
  line-height:1.25;
  font-weight:850;
  color:#6b7280;
}

.account-tier-card-price{
  font-size:15px;
  line-height:1.25;
  font-weight:950;
  color:#111318;
}

.account-price-stack{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.account-price-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
}

.account-price-was{
  color:#7b8492;
  font-size:13px;
  text-decoration:line-through;
  text-decoration-thickness:2px;
}

.account-price-now{
  color:#166534;
  font-size:20px;
  font-weight:950;
}

.account-price-note{
  color:#166534;
  font-size:12px;
  font-weight:850;
}

.account-tier-card-terms{
  font-size:12px;
  line-height:1.4;
  font-weight:750;
  color:#6a5430;
  padding:8px 10px;
  border:1px solid rgba(216,170,76,.34);
  border-radius:8px;
  background:rgba(216,170,76,.12);
}

.account-tier-card-offer{
  font-size:12px;
  line-height:1.4;
  font-weight:800;
  color:#14532d;
  padding:8px 10px;
  border:1px solid rgba(22,101,52,.24);
  border-radius:8px;
  background:rgba(22,101,52,.08);
}

.account-tier-card-features{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  line-height:1.35;
  font-weight:750;
  color:#343a40;
}

.account-tier-card-feature::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin:0 7px 1px 0;
  border-radius:50%;
  background:#d8aa4c;
}

.account-tier-card-action{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 10px;
  border-radius:8px;
  background:#111318;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.account-plan-change-warning{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(216,170,76,.42);
  border-radius:8px;
  background:rgba(216,170,76,.12);
}

.account-plan-change-warning-title{
  color:#111318;
  font-size:12px;
  font-weight:950;
}

.account-plan-change-warning-copy{
  margin-top:3px;
  color:#6a5430;
  font-size:12px;
  line-height:1.4;
  font-weight:750;
}

.account-plan-change-discount{
  display:grid;
  gap:6px;
  margin-top:10px;
}

.account-plan-change-discount span{
  color:#2d332f;
  font-size:12px;
  font-weight:850;
}

.account-plan-change-discount input{
  min-height:40px;
  border:1px solid rgba(17,19,24,.18);
  border-radius:8px;
  padding:9px 11px;
}

.account-plan-change-ack{
  margin-top:10px;
}

.account-modal-panel .account-tier-card.account-tier-option-current{
  opacity:1;
}

.account-tier-card.account-tier-option-unavailable .account-tier-card-action,
.account-tier-card.account-tier-option-current .account-tier-card-action{
  background:rgba(17,19,24,.08);
  color:#5f6875;
}

.account-modal-footnote{
  margin-top:12px;
  line-height:1.4;
  color:#6b7280;
}

.account-checkout-agreement-panel{
  width:min(580px, 100%);
}

.checkout-terms-copy{
  margin:12px 0 14px;
  line-height:1.55;
  color:#343a40;
}

.checkout-terms-copy a{
  color:#111318;
  font-weight:850;
  text-decoration:underline;
  text-decoration-color:rgba(216,170,76,.75);
  text-underline-offset:2px;
}

.checkout-offer-copy{
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid rgba(216,170,76,.38);
  border-radius:8px;
  background:rgba(216,170,76,.14);
  color:#5f4b18;
  font-weight:800;
  line-height:1.45;
}

.checkout-resume-copy p{
  margin:0;
}

.checkout-resume-copy p + p{
  margin-top:8px;
}

.checkout-terms-check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 16px;
  color:#343a40;
  line-height:1.5;
  font-weight:750;
}

.checkout-terms-check input{
  flex:0 0 auto;
  margin-top:4px;
  accent-color:#d8aa4c;
}

.checkout-terms-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.checkout-terms-btn{
  min-height:38px;
  padding:8px 14px;
  border:1px solid rgba(17,19,24,.16);
  border-radius:8px;
  background:#fff;
  color:#111318;
  font-weight:900;
  cursor:pointer;
}

.checkout-terms-btn:hover{
  background:#f7f4ec;
}

.checkout-terms-btn.primary{
  border-color:#111318;
  background:#111318;
  color:#fff;
}

.checkout-terms-btn.primary:hover{
  background:#262b34;
}

.checkout-terms-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}

.checkout-terms-btn[disabled]:hover{
  background:#111318;
}

@media (max-width: 640px){
  .account-modal-panel.account-plan-comparison-panel .account-plan-cards{
    grid-template-columns:minmax(0, 1fr);
  }

  .account-demo-conversion-panel{
    padding:18px;
    border-radius:14px;
  }

  .account-demo-conversion-panel .account-modal-title{
    font-size:20px;
  }

  .account-modal-panel .account-demo-plan-grid{
    grid-template-columns:1fr;
  }

  .account-modal-panel .account-demo-plan-card{
    min-height:0;
  }

  .account-demo-plan-summary{
    min-height:0;
  }
}

@media (min-width:641px) and (max-width:900px){
  .account-modal-panel.account-plan-comparison-panel .account-plan-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .account-modal-panel .account-demo-plan-grid{
    grid-template-columns:1fr 1fr;
  }

  .account-modal-panel .account-demo-plan-card.is-featured{
    grid-column:span 2;
  }
}

#accountRoot .account-beta-notice{
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid rgba(216,170,76,.34);
  border-radius:8px;
  background:rgba(216,170,76,.12);
  color:#5f4b18;
  font-weight:700;
}

#accountRoot .account-beta-notice[hidden]{
  display:none !important;
}

.pfs-beta-access-banner{
  position:sticky;
  top:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:10px 16px;
  border-bottom:1px solid rgba(216,170,76,.38);
  background:#fff4cf;
  color:#3b3010;
  font-size:13px;
  font-weight:800;
  text-align:center;
}

.pfs-beta-access-banner a{
  color:#111318;
  text-decoration:underline;
  font-weight:900;
}

#settingsRoot .fy-panel-title,
#settingsRoot h1,
#settingsRoot h2,
#settingsRoot h3,
#accountRoot h1,
#accountRoot h2,
#accountRoot h3,
#jobManagerPage h1,
#jobManagerPage h2,
#jobManagerPage h3,
.jobmgr-page .jobmgr-title-text{
  color:#111318 !important;
}

.pill-soon{
  background:rgba(216,170,76,.18) !important;
  border-color:rgba(177,132,49,.32) !important;
  color:#8a6a21 !important;
  font-weight:900;
}

.pfs-pro-lock-icon{
  color:#8a6a21 !important;
  opacity:1 !important;
}

.opt-usage-note{
  color:#5f6872 !important;
}

#settingsRoot input,
#settingsRoot select,
#settingsRoot textarea,
#settingsRoot .fy-wysiwyg,
#accountRoot input,
#accountRoot select,
#accountRoot textarea{
  background:#fff !important;
  border-color:rgba(17,19,24,.14) !important;
  color:#111318 !important;
}

#settingsRoot .fy-btn,
#settingsRoot .fy-btn-primary,
#settingsRoot .fy-btn-secondary,
#settingsRoot .fy-tabbtn,
#settingsRoot .fy-icon-btn,
#settingsRoot .fy-wysiwyg-btn,
#accountRoot .fy-btn,
#accountRoot .fy-btn-primary,
#accountRoot .fy-btn-secondary{
  color:#111318 !important;
}

/* Left pane accordion cards: make collapsed cards read as one polished control. */
#appMainContent .input-section details.collapsible-card{
  position:relative;
  overflow:hidden;
  padding:0 !important;
  border-radius:14px !important;
  border:1px solid rgba(17,19,24,.10) !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.82), rgba(255,255,255,.26) 44%, rgba(216,170,76,.045)),
    linear-gradient(180deg, #ffffff, #f4f2ec) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.78) inset,
    0 18px 42px rgba(17,19,24,.08) !important;
}

#appMainContent .input-section details.collapsible-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(216,170,76,.20), transparent 38%);
  opacity:.18;
}

#appMainContent .input-section details.collapsible-card > summary.job-details-header{
  position:relative;
  z-index:1;
  min-height:58px;
  margin:0 !important;
  padding:0 20px !important;
  border:0 !important;
  border-bottom:0 !important;
  background:transparent !important;
}

#appMainContent .input-section details.collapsible-card[open] > summary.job-details-header{
  box-shadow:none !important;
}

#appMainContent .input-section details.collapsible-card:not([open]) > summary.job-details-header{
  box-shadow:none !important;
}

#appMainContent .input-section details.collapsible-card > summary.job-details-header h3{
  font-size:1rem;
  letter-spacing:-.015em;
}

#appMainContent .input-section details.collapsible-card > summary.job-details-header .header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

#appMainContent .input-section details.collapsible-card .meta-inline{
  color:#606873 !important;
  font-size:.86rem;
  font-weight:800;
}

#appMainContent .input-section details.collapsible-card .collapse-indicator{
  color:rgba(96,104,115,.46);
  font-size:.82rem;
}

#appMainContent .input-section details.collapsible-card:hover{
  border-color:rgba(177,132,49,.22) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 20px 48px rgba(17,19,24,.10) !important;
}

#appMainContent .input-section details.collapsible-card > .locked-content,
#appMainContent .input-section details.collapsible-card > .job-details-body,
#appMainContent .input-section details.collapsible-card > .groups-summary-container,
#appMainContent .input-section details.collapsible-card > .pfs-rot-toggle,
#appMainContent .input-section details.collapsible-card > .table-header,
#appMainContent .input-section details.collapsible-card > .windows-list,
#appMainContent .input-section details.collapsible-card > .windows-inline-notice,
#appMainContent .input-section details.collapsible-card > .window-controls-bottom{
  margin-left:14px;
  margin-right:14px;
}

#appMainContent .input-section details.collapsible-card > .locked-content,
#appMainContent .input-section details.collapsible-card > .job-details-body{
  padding-top:14px;
  padding-bottom:14px;
}

/* Small accordion cue: fast enough to feel instant, visible enough to orient. */
@supports selector(details::details-content){
  #appMainContent .input-section{
    interpolate-size:allow-keywords;
  }

  #appMainContent .input-section details.collapsible-card::details-content{
    block-size:0;
    opacity:0;
    overflow:hidden;
    transition:
      block-size .14s ease,
      opacity .11s ease;
    transition-behavior:allow-discrete;
  }

  #appMainContent .input-section details.collapsible-card[open]::details-content{
    block-size:auto;
    opacity:1;
  }
}

/* Windows card shared inner rail: rotation, table, list, and actions align. */
#windowsCard{
  --pfs-window-rail:14px;
}

#windowsCard > .pfs-rot-toggle,
#windowsCard > .table-header,
#windowsCard > .windows-list,
#windowsCard > .windows-inline-notice,
#windowsCard > .window-controls-bottom{
  width:auto !important;
  max-width:none !important;
  margin-left:var(--pfs-window-rail) !important;
  margin-right:var(--pfs-window-rail) !important;
  box-sizing:border-box;
}

#windowsCard > .pfs-rot-toggle{
  margin-top:14px !important;
  margin-bottom:10px !important;
}

#windowsCard > .table-header{
  grid-template-columns:var(--window-cols) !important;
  gap:var(--window-gap) !important;
  padding:10px 12px !important;
  border-radius:12px 12px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,245,239,.92)) !important;
  border:1px solid rgba(17,19,24,.10) !important;
  border-bottom:0 !important;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}

#windowsCard > .windows-list{
  border:1px solid rgba(17,19,24,.10) !important;
  border-top:0 !important;
  border-radius:0 0 12px 12px !important;
  background:#fff;
  overflow:hidden !important;
}

#windowsCard .window-row{
  grid-template-columns:var(--window-cols) !important;
  gap:var(--window-gap) !important;
  padding:9px 12px !important;
  border-bottom:1px solid rgba(17,19,24,.08) !important;
  background:#fff;
  transition:background-color .12s ease;
}

#windowsCard .window-row:last-child{
  border-bottom:0 !important;
}

#windowsCard .window-row:hover{
  background-color:rgba(216,170,76,.035);
}

#windowsCard .window-input,
#windowsCard .window-quantity-input{
  max-width:none;
  border-radius:9px !important;
  border-color:rgba(17,19,24,.13) !important;
  background:
    linear-gradient(180deg, #ffffff, #fbfaf7) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.74) inset;
}

#windowsCard .btn-remove-window{
  border-radius:999px !important;
  background:linear-gradient(180deg, #ffffff, #f7f5ef) !important;
  border-color:rgba(17,19,24,.13) !important;
  color:#8f332f !important;
  box-shadow:0 1px 0 rgba(255,255,255,.78) inset;
}

#windowsCard > .window-controls-bottom{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:12px !important;
  margin-bottom:14px !important;
  padding:0 !important;
  border-top:0 !important;
}

#windowsCard > .window-controls-bottom .btn-add-window,
#windowsCard > .window-controls-bottom .btn-group-selected,
#windowsCard > .window-controls-bottom .btn-delete-selected{
  width:100% !important;
  min-width:0;
  margin:0 !important;
  padding:11px 12px;
  border-radius:12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,245,239,.96)) !important;
  border-color:rgba(17,19,24,.13) !important;
  color:#111318 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 10px 22px rgba(17,19,24,.055);
  transform:none !important;
}

#windowsCard > .window-controls-bottom .btn-add-window:hover,
#windowsCard > .window-controls-bottom .btn-group-selected:hover,
#windowsCard > .window-controls-bottom .btn-delete-selected:hover{
  border-color:rgba(177,132,49,.24) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 12px 24px rgba(17,19,24,.07);
  transform:none !important;
}

#windowsCard > .window-controls-bottom .btn-add-window:disabled,
#windowsCard > .window-controls-bottom .btn-group-selected:disabled,
#windowsCard > .window-controls-bottom .btn-delete-selected:disabled{
  opacity:.52;
  box-shadow:0 1px 0 rgba(255,255,255,.70) inset;
}

@media (max-width:768px){
  #windowsCard > .table-header,
  #windowsCard .window-row{
    grid-template-columns:var(--window-cols) !important;
  }

  #windowsCard > .window-controls-bottom{
    grid-template-columns:1fr;
  }
}

.pfs-summary-group-wrap{
  --group-color:transparent;
}

.pfs-summary-group-wrap .summary-group{
  border-left-color:var(--group-color) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--group-color) 14%, transparent) 0%, rgba(255,255,255,.96) 44%),
    #fff !important;
}

.pfs-summary-group-wrap .summary-group-dot{
  background:var(--group-color) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--group-color) 16%, transparent);
}

/* Groups card: premium list rows with readable expanded breakdown. */
#summaryCard .summary-groups{
  padding:12px 14px 14px !important;
  display:grid;
  gap:10px;
}

#summaryCard .pfs-summary-group-wrap{
  position:relative;
  --group-color:transparent;
}

#summaryCard .summary-group{
  overflow:hidden;
  border:1px solid rgba(17,19,24,.10) !important;
  border-left:3px solid var(--group-color) !important;
  border-radius:12px !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--group-color) 12%, transparent) 0%, rgba(255,255,255,.96) 42%),
    linear-gradient(180deg, #ffffff, #f7f5ef) !important;
  box-shadow:0 10px 24px rgba(17,19,24,.055) !important;
}

#summaryCard .summary-group[open]{
  box-shadow:0 16px 34px rgba(17,19,24,.08) !important;
}

#summaryCard .summary-group-summary{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
  padding:10px 12px !important;
  overflow:visible;
  color:#111318 !important;
}

#summaryCard .summary-group-left{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  flex:1 1 auto;
}

#summaryCard .summary-group-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--group-color) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--group-color) 14%, transparent);
  flex:0 0 auto;
}

#summaryCard .summary-group-name{
  min-width:0;
  color:#111318 !important;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#summaryCard .summary-group-summary .group-rename-btn{
  position:static !important;
  transform:none !important;
  width:28px;
  height:28px;
  min-width:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(17,19,24,.12) !important;
  background:rgba(255,255,255,.72) !important;
  color:#5f6872 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.82) inset;
  opacity:1;
  font-size:13px;
  line-height:1;
}

#summaryCard .summary-group-summary .group-rename-btn:hover{
  border-color:color-mix(in srgb, var(--group-color) 36%, rgba(17,19,24,.12)) !important;
  background:#fff !important;
  color:#111318 !important;
}

#summaryCard .summary-group-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}

#summaryCard .summary-pill{
  border:1px solid rgba(17,19,24,.10) !important;
  background:rgba(255,255,255,.72) !important;
  color:#606873 !important;
  font-size:12px;
  font-weight:800;
  border-radius:999px;
}

#summaryCard .summary-chevron{
  color:#606873 !important;
  font-size:16px;
}

#summaryCard .summary-group-body{
  padding:0 12px 12px !important;
  border-top:0 !important;
  background:
    linear-gradient(180deg, rgba(247,245,239,.36), rgba(255,255,255,.72)) !important;
  color:#111318 !important;
}

#summaryCard .summary-table{
  display:grid;
  gap:6px;
  padding-top:4px;
}

#summaryCard .summary-row{
  display:grid;
  grid-template-columns:58px minmax(0, 1fr) 92px 92px;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(17,19,24,.09) !important;
  border-radius:10px;
  background:rgba(255,255,255,.86) !important;
  color:#111318 !important;
  font-size:13px;
}

#summaryCard .summary-row.summary-head{
  background:rgba(247,245,239,.92) !important;
  color:#606873 !important;
  font-size:11px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

#summaryCard .summary-empty{
  padding:10px 2px 2px;
  color:#606873 !important;
  font-weight:700;
}

@media (max-width:640px){
  #summaryCard .summary-group-summary{
    align-items:stretch;
    flex-direction:column;
    gap:8px;
    padding:10px !important;
  }

  #summaryCard .summary-group-right{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:6px;
  }

  #summaryCard .summary-pill{
    font-size:11px;
    line-height:1;
    padding:6px 8px;
  }

  #summaryCard .summary-group-body{
    padding:0 10px 10px !important;
    overflow:hidden;
  }

  #summaryCard .summary-table{
    display:grid;
    gap:6px;
    padding-top:2px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  #summaryCard .summary-row.summary-head{
    display:grid;
  }

  #summaryCard .summary-row{
    grid-template-columns:44px 96px 84px 84px;
    min-width:348px;
    gap:6px;
    padding:8px;
    font-size:11px;
  }

  #summaryCard .summary-row > div{
    min-width:0;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #summaryCard .summary-row > div::before{
    content:none !important;
  }

  #summaryCard .summary-row.summary-head > div{
    overflow:visible;
    text-overflow:clip;
  }
}

/* Quote card: same flat accordion interior as Job Details, with pricing controls grouped here. */
#quoteCard .fy-quote-panel{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
}

#quoteCard .fy-quote-sections{
  display:grid;
  gap:0;
}

#quoteCard .fy-job-section{
  display:grid;
  align-content:start;
  gap:8px;
  min-width:0;
  padding-top:14px;
  border-top:1px solid rgba(17,19,24,.09);
}

#quoteCard .fy-job-section:first-child{
  padding-top:0;
  border-top:0;
}

#quoteCard .fy-section-head h4{
  color:#5f6872;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#quoteCard .fy-quote-pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

#quoteCard .fy-field label,
#quoteCard .fy-group-label{
  color:#5f6872;
  font-size:.78rem;
  font-weight:700;
}

#quoteCard .fy-field input,
#quoteCard .fy-field select,
#quoteCard .fy-addon-row input{
  border-radius:8px;
  border-color:var(--input-border);
  background:var(--input-bg);
  color:var(--input-text);
  padding:8px 10px;
  font-size:.95rem;
  box-shadow:none;
}

#quoteCard .fy-field input:focus,
#quoteCard .fy-field select:focus,
#quoteCard .fy-addon-row input:focus{
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

#quoteCard .fy-calculated-charges{
  display:grid;
  gap:0;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:#fff;
}

#quoteCard .fy-charge-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(112px, .72fr) minmax(72px, auto);
  gap:6px 10px;
  align-items:end;
  padding:10px;
  border-bottom:1px solid rgba(17,19,24,.08);
}

#quoteCard .fy-charge-row:last-child{
  border-bottom:0;
}

#quoteCard .fy-charge-total{
  align-self:center;
  color:#111318;
  font-size:.92rem;
  font-weight:900;
  text-align:right;
  white-space:nowrap;
}

#quoteCard .fy-charge-hint{
  grid-column:1 / -1;
  margin:0;
  color:#606873;
  font-size:.76rem;
  font-weight:750;
  line-height:1.25;
}

#quoteCard .fy-job-addons-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:8px;
}

#quoteCard .fy-job-addon-check{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:center;
  min-height:42px;
  padding:9px 10px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:rgba(255,255,255,.82);
  color:#111318;
  box-shadow:0 1px 0 rgba(255,255,255,.76) inset;
}

#quoteCard .fy-job-addon-check.is-active{
  border-color:rgba(177,132,49,.30);
  background:
    linear-gradient(90deg, rgba(216,170,76,.12), rgba(255,255,255,.92)),
    #fff;
}

#quoteCard .fy-job-addon-main{
  min-width:0;
  font-size:.88rem;
  font-weight:800;
}

#quoteCard .fy-job-addon-amount{
  color:#606873;
  font-size:.78rem;
  font-weight:850;
}

#quoteCard .fy-addons{
  display:grid;
  gap:8px;
  margin-bottom:10px;
}

#quoteCard .fy-addon-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(82px, 104px) 24px auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:rgba(255,255,255,.82);
}

#quoteCard .fy-addon-row .fy-muted{
  color:#606873;
  font-size:.8rem;
  font-weight:900;
  text-align:center;
}

#quoteCard .fy-btn{
  border-radius:10px;
  min-height:38px;
  background:
    linear-gradient(180deg, rgba(79,144,255,.22), rgba(79,144,255,.10)),
    #15233a !important;
  border:1px solid #3a5686 !important;
  color:#eaf0f8 !important;
  box-shadow:0 10px 22px rgba(17,19,24,.09);
  font-weight:900;
}

#quoteCard .fy-btn:hover{
  background:
    linear-gradient(180deg, rgba(79,144,255,.28), rgba(79,144,255,.14)),
    #1a2a44 !important;
  border-color:#4a6ca5 !important;
  color:#fff !important;
  filter:none;
  box-shadow:0 12px 24px rgba(17,19,24,.12);
}

#quoteCard .fy-btn:disabled{
  opacity:.56;
  box-shadow:none;
}

@media (max-width:640px){
  #quoteCard .fy-quote-pricing-grid,
  #quoteCard .fy-charge-row,
  #quoteCard .fy-addon-row{
    grid-template-columns:1fr;
  }

  #quoteCard .fy-charge-total{
    text-align:left;
  }

  #quoteCard .fy-addon-row .fy-muted{
    text-align:left;
  }
}

/* Optimization results: light premium surfaces, readable contrast. */
.results-section{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,245,239,.92)) !important;
  color:#111318 !important;
}

.results-section .results-inner-header,
.results-section .fy-plan-rollcard,
.results-section .fy-quote-card,
.results-section .job-outputs,
.results-section .savings-notice,
.results-section .rotation-notice,
.results-section .cut-sheet-section,
.results-section .cut-sheet,
.results-section .cut-sheet-toggle{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,245,239,.96)) !important;
  border-color:rgba(17,19,24,.10) !important;
  color:#111318 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 18px 42px rgba(17,19,24,.075) !important;
}

.results-section .results-inner-header{
  padding:16px !important;
  border:1px solid rgba(17,19,24,.10) !important;
  border-radius:12px !important;
  margin-bottom:14px;
}

.results-section .results-inner-header h3,
.results-section .fy-plan-rolltitle,
.results-section .results-heading,
.results-section h2,
.results-section h3{
  color:#111318 !important;
}

.results-section .results-submeta,
.results-section .results-quick-totals,
.results-section .fy-plan-rollwindows,
.results-section .cut-details,
.results-section small{
  color:#5f6872 !important;
}

.results-section .results-submeta *,
.results-section .results-quick-totals *,
.results-section .fy-plan-rollwindows *,
.results-section .results-mode,
.results-section .results-mode *{
  color:inherit !important;
}

.results-section .results-submeta strong,
.results-section .results-quick-totals strong,
.results-section .fy-plan-rollwindows strong,
.results-section .results-mode strong{
  color:#111318 !important;
}

.results-section .results-submeta{
  gap:10px 14px;
  flex-wrap:wrap;
}

.results-section .results-quick-totals{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:10px;
  padding:0 !important;
}

.results-section .results-quick-totals span{
  background:rgba(255,255,255,.68);
  border:1px solid rgba(17,19,24,.09);
  border-radius:10px;
  padding:8px 10px;
  text-align:center;
  min-width:0;
  overflow:hidden;
}

.results-section .results-quick-totals em{
  color:#6f7782 !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.results-section .results-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px;
}

@media (max-width:640px){
  .results-section .results-quick-totals{
    gap:6px;
  }

  .results-section .results-quick-totals span{
    padding:7px 6px;
  }

  .results-section .results-quick-totals small{
    font-size:9px;
  }

  .results-section .results-quick-totals strong{
    font-size:12px;
  }

  .results-section .results-quick-totals em{
    font-size:9px;
  }

  .results-section .results-grid{
    grid-template-columns:1fr !important;
  }
}

.results-section .result-stat{
  background:
    linear-gradient(180deg, #ffffff, #fbfaf7) !important;
  border:1px solid rgba(17,19,24,.10) !important;
  border-radius:12px !important;
  color:#111318 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 12px 26px rgba(17,19,24,.06) !important;
}

.results-section .result-stat .stat-label{
  color:#68717d !important;
}

.results-section .result-stat .stat-value{
  color:#111318 !important;
}

.results-section .result-stat small{
  color:#5f6872 !important;
  opacity:1 !important;
}

.results-section .result-stat.stat-highlight{
  background:
    radial-gradient(circle at 18% 0%, rgba(255,251,232,.74), transparent 38%),
    linear-gradient(120deg, #fffbe8 0%, #f8e8ad 20%, #edcf78 48%, #d5a64d 76%, #f2d889 100%) !important;
  border-color:rgba(141,96,20,.24) !important;
  color:#2b2112 !important;
}

.results-section .result-stat.stat-highlight .stat-label,
.results-section .result-stat.stat-highlight small{
  color:rgba(43,33,18,.72) !important;
}

.results-section .result-stat.stat-highlight .stat-value{
  color:#2b2112 !important;
}

.results-section .result-stat-attachment{
  border-color:rgba(177,132,49,.22) !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.98), rgba(255,250,238,.92)) !important;
}

.results-section [data-opt-action].btn-output,
.results-section .fy-project-sheet-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,245,239,.96)) !important;
  border-color:rgba(17,19,24,.13) !important;
  color:#111318 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 10px 22px rgba(17,19,24,.055);
}

.results-section [data-opt-action].btn-output:hover,
.results-section .fy-project-sheet-btn:hover{
  border-color:rgba(177,132,49,.24) !important;
  background:#fff !important;
}

/* =========================
   Film Catalog premium layout
   Layout-only pass: keeps existing Settings data and event wiring intact.
   ========================= */
#settingsRoot .fy-films-panel-card{
  position:relative;
  overflow:hidden;
  padding:18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,249,245,.94)) !important;
  border:1px solid rgba(17,19,24,.10) !important;
  border-radius:14px !important;
  box-shadow:0 24px 70px rgba(17,19,24,.08) !important;
}

#settingsRoot .fy-films-panel-header{
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(17,19,24,.09);
}

#settingsRoot .fy-films-panel-header .fy-panel-title{
  color:#111318 !important;
  font-size:1.18rem;
  font-weight:900;
  line-height:1.15;
  letter-spacing:0;
}

#settingsRoot .fy-films-panel-header .fy-panel-subtitle{
  max-width:760px;
  color:#5f6872 !important;
  line-height:1.45;
}

#settingsRoot .fy-films-panel .fy-films-stack{
  display:grid;
  grid-template-columns:minmax(280px, .92fr) minmax(0, 1.55fr);
  grid-template-areas:
    "toolbar toolbar"
    "list editor";
  gap:14px 16px;
  min-width:0;
}

#settingsRoot .fy-films-panel .fy-films-toolbar{
  grid-area:toolbar;
  display:grid;
  grid-template-columns:minmax(240px, 1fr) auto auto;
  gap:10px;
  align-items:end;
  margin:0;
  padding:10px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,245,239,.86));
  box-shadow:0 1px 0 rgba(255,255,255,.86) inset;
}

#settingsRoot .fy-films-panel .fy-field-compact label,
#settingsRoot .fy-films-panel .fy-field label,
#settingsRoot .fy-films-panel .fy-warranty-label{
  color:#5f6872 !important;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

#settingsRoot .fy-films-panel .fy-films-toolbar .fy-btn{
  min-height:42px;
  padding:10px 14px;
  border-radius:12px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.78) inset;
}

#settingsRoot .fy-films-panel #fyAddFilmBtn{
  background:linear-gradient(135deg, #f5df98, #d8aa4c) !important;
  border-color:rgba(141,96,20,.22) !important;
  color:#111318 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.64) inset,
    0 14px 28px rgba(216,170,76,.22) !important;
}

#settingsRoot .fy-films-panel #fyAddMfrBtn,
#settingsRoot .fy-films-panel .fy-btn-ghost,
#settingsRoot .fy-films-panel .fy-btn-secondary{
  background:
    linear-gradient(180deg, #ffffff, #f8f6f0) !important;
  border-color:rgba(17,19,24,.13) !important;
  color:#111318 !important;
}

#settingsRoot .fy-films-panel #fyAddFilmBtn:hover,
#settingsRoot .fy-films-panel #fyAddMfrBtn:hover,
#settingsRoot .fy-films-panel .fy-btn-ghost:hover,
#settingsRoot .fy-films-panel .fy-btn-secondary:hover{
  transform:translateY(-1px);
  border-color:rgba(177,132,49,.30) !important;
}

#settingsRoot .fy-films-panel .fy-films-film-list{
  grid-area:list;
  min-height:440px;
  max-height:calc(100vh - 300px);
  margin:0;
  padding:12px;
  overflow:auto;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(247,245,239,.58));
  box-shadow:0 1px 0 rgba(255,255,255,.80) inset;
}

#settingsRoot .fy-films-panel .fy-films-film-list > .fy-muted{
  min-height:168px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  text-align:center;
  border:1px dashed rgba(17,19,24,.16);
  border-radius:12px;
  background:rgba(255,255,255,.70);
  color:#6a737d !important;
  font-weight:800;
}

#settingsRoot .fy-films-panel .fy-film-group{
  gap:8px;
}

#settingsRoot .fy-films-panel .fy-film-group + .fy-film-group{
  margin-top:6px;
  padding-top:12px;
  border-top:1px solid rgba(17,19,24,.08);
}

#settingsRoot .fy-films-panel .fy-film-group-title{
  padding:0 2px;
  color:#8a6a21 !important;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#settingsRoot .fy-films-panel .fy-film-group-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

#settingsRoot .fy-films-panel .fy-film-item{
  position:relative;
  width:100%;
  min-width:0;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 10px 11px 14px;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:
    linear-gradient(180deg, #ffffff, #fbfaf7);
  color:#111318;
  box-shadow:0 1px 0 rgba(255,255,255,.86) inset;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

#settingsRoot .fy-films-panel .fy-film-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:transparent;
  transition:background .16s ease;
}

#settingsRoot .fy-films-panel .fy-film-item:hover{
  border-color:rgba(177,132,49,.24);
  box-shadow:
    0 1px 0 rgba(255,255,255,.88) inset,
    0 12px 24px rgba(17,19,24,.06);
  transform:translateY(-1px);
}

#settingsRoot .fy-films-panel .fy-film-item.active{
  border-color:rgba(177,132,49,.34);
  background:
    linear-gradient(90deg, rgba(216,170,76,.12), rgba(255,255,255,.96) 32%),
    linear-gradient(180deg, #ffffff, #fbfaf7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.88) inset,
    0 14px 28px rgba(17,19,24,.075);
}

#settingsRoot .fy-films-panel .fy-film-item.active::before{
  background:#d8aa4c;
}

#settingsRoot .fy-films-panel .fy-film-item-main{
  min-width:0;
  flex:1 1 auto;
  gap:6px;
}

#settingsRoot .fy-films-panel .fy-film-item-name{
  color:#111318;
  font-size:.92rem;
  font-weight:900;
  line-height:1.2;
  letter-spacing:0;
}

#settingsRoot .fy-films-panel .fy-film-item-meta{
  display:flex;
  align-items:center;
  gap:6px;
  color:#5f6872 !important;
  font-size:.75rem;
  font-weight:800;
}

#settingsRoot .fy-films-panel .fy-film-item-mfr,
#settingsRoot .fy-films-panel .fy-film-item-warranty{
  display:inline-flex;
  align-items:center;
  min-width:0;
  max-width:100%;
  padding:4px 7px;
  border:1px solid rgba(17,19,24,.09);
  border-radius:999px;
  background:rgba(255,255,255,.68);
  color:#606873 !important;
  line-height:1;
}

#settingsRoot .fy-films-panel .fy-film-item-mfr{
  color:#111318 !important;
}

#settingsRoot .fy-films-panel .fy-film-item-actions{
  flex:0 0 auto;
}

#settingsRoot .fy-films-panel .fy-film-item-actions .fy-btn{
  min-height:30px;
  padding:6px 9px;
  border-radius:999px !important;
  color:#8f332f !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
}

#settingsRoot .fy-films-panel .fy-film-editor,
#settingsRoot .fy-films-panel .fy-film-editor-empty{
  grid-area:editor;
  min-width:0;
  min-height:440px;
  margin:0;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:
    linear-gradient(180deg, #ffffff, #fbfaf7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 14px 34px rgba(17,19,24,.055);
}

#settingsRoot .fy-films-panel .fy-film-editor{
  padding:16px;
}

#settingsRoot .fy-films-panel .fy-film-editor-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  border-style:dashed;
  color:#6a737d !important;
  font-weight:800;
}

#settingsRoot .fy-films-panel .fy-film-editor.hidden,
#settingsRoot .fy-films-panel .fy-film-editor-empty.hidden{
  display:none;
}

#settingsRoot .fy-films-panel .fy-film-editor-head{
  align-items:flex-start;
  padding-bottom:12px;
  border-bottom:1px solid rgba(17,19,24,.09);
}

#settingsRoot .fy-films-panel .fy-film-editor-title{
  color:#111318;
  font-size:1.06rem;
  line-height:1.2;
  font-weight:900;
  letter-spacing:0;
}

#settingsRoot .fy-films-panel .fy-film-editor-grid{
  display:grid;
  grid-template-columns:minmax(210px, .78fr) minmax(0, 1.22fr);
  gap:16px;
  align-items:start;
}

#settingsRoot .fy-films-panel .fy-film-meta-stack{
  gap:12px;
}

#settingsRoot .fy-films-panel .fy-section-title{
  margin-bottom:8px;
  color:#111318;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:0;
}

#settingsRoot .fy-films-panel .fy-help{
  color:#68717d !important;
  font-size:.78rem;
  line-height:1.4;
}

#settingsRoot .fy-films-panel .fy-roll-card{
  padding:0;
  overflow:visible;
}

#settingsRoot .fy-films-panel .fy-roll-grid-header,
#settingsRoot .fy-films-panel .fy-roll-row{
  display:grid;
  grid-template-columns:74px minmax(112px, 1fr) minmax(112px, 1fr) minmax(58px, auto);
  gap:8px;
  align-items:center;
}

#settingsRoot .fy-films-panel .fy-roll-grid-header{
  margin-top:12px;
  padding:0 4px;
  color:#6a737d !important;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#settingsRoot .fy-films-panel .fy-roll-grid{
  gap:8px;
}

#settingsRoot .fy-films-panel .fy-roll-row{
  padding:8px;
  border:1px solid rgba(17,19,24,.09);
  border-radius:10px;
  background:rgba(255,255,255,.72);
}

#settingsRoot .fy-films-panel .fy-roll-row.locked{
  background:linear-gradient(180deg, rgba(247,245,239,.86), rgba(255,255,255,.72));
}

#settingsRoot .fy-films-panel .fy-roll-cell input{
  min-height:40px;
  padding:9px 10px;
  border-radius:9px !important;
  text-align:right;
}

#settingsRoot .fy-films-panel .fy-roll-row.locked input[data-field="rollWidth"]{
  color:#6a737d !important;
  background:#f7f5ef !important;
  opacity:1;
}

#settingsRoot .fy-films-panel .fy-roll-actions .fy-btn{
  min-height:34px;
  padding:7px 10px;
  border-radius:999px !important;
  color:#8f332f !important;
}

#settingsRoot .fy-films-panel .fy-warranty-block{
  padding-top:14px;
  border-top:1px solid rgba(17,19,24,.09);
}

#settingsRoot .fy-films-panel .fy-warranty-inline{
  gap:10px;
  padding:10px;
  border:1px solid rgba(17,19,24,.09);
  border-radius:12px;
  background:rgba(255,255,255,.66);
}

#settingsRoot .fy-films-panel .fy-warranty-inline input[type="number"]{
  width:94px;
  min-height:40px;
  text-align:right;
}

#settingsRoot .fy-films-panel .fy-check{
  color:#111318;
  font-weight:800;
}

#settingsRoot .fy-films-panel .fy-check input{
  accent-color:#d8aa4c;
}

#settingsRoot .fy-films-panel .fy-film-editor-footer{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(17,19,24,.09);
}

/* Film Catalog manager refresh */
#settingsRoot .fy-films-panel .fy-films-stack{
  grid-template-columns:1fr;
  grid-template-areas:
    "dashboard"
    "workspace";
  gap:14px;
}

#settingsRoot .fy-films-panel .fy-films-dashboard{
  grid-area:dashboard;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

#settingsRoot .fy-films-panel .fy-film-metric{
  min-width:0;
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  padding:14px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,247,243,.90));
  box-shadow:0 1px 0 rgba(255,255,255,.86) inset;
}

#settingsRoot .fy-films-panel .fy-film-metric-label{
  color:#69717b;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#settingsRoot .fy-films-panel .fy-film-metric strong{
  min-width:0;
  color:#111318;
  font-size:1.34rem;
  line-height:1.05;
  font-weight:950;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#settingsRoot .fy-films-panel .fy-film-metric-note{
  color:#78808a;
  font-size:.78rem;
  font-weight:700;
  line-height:1.25;
}

#settingsRoot .fy-films-panel .fy-films-workspace{
  grid-area:workspace;
  display:grid;
  grid-template-columns:minmax(315px, .78fr) minmax(0, 1.42fr);
  gap:14px;
  align-items:stretch;
  min-width:0;
}

#settingsRoot .fy-films-panel .fy-films-rail,
#settingsRoot .fy-films-panel .fy-films-editor-shell{
  min-width:0;
}

#settingsRoot .fy-films-panel .fy-films-rail{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:10px;
}

#settingsRoot .fy-films-panel .fy-films-filter-card{
  padding:12px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,247,243,.88));
  box-shadow:0 1px 0 rgba(255,255,255,.86) inset;
}

#settingsRoot .fy-films-panel .fy-films-filter-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

#settingsRoot .fy-films-panel .fy-films-filter-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

#settingsRoot .fy-films-panel .fy-films-filter-actions .fy-btn{
  width:100%;
  justify-content:center;
}

#settingsRoot .fy-films-panel .fy-films-film-list{
  grid-area:auto;
  min-height:520px;
  max-height:calc(100vh - 360px);
}

#settingsRoot .fy-films-panel .fy-film-item{
  align-items:flex-start;
  min-height:92px;
}

#settingsRoot .fy-films-panel .fy-film-item-main{
  display:flex;
  flex-direction:column;
}

#settingsRoot .fy-films-panel .fy-film-item-meta{
  flex-wrap:wrap;
}

#settingsRoot .fy-films-panel .fy-film-item-chips,
#settingsRoot .fy-films-panel .fy-film-editor-summary{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}

#settingsRoot .fy-films-panel .fy-film-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:24px;
  padding:5px 8px;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.09);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:#626a75;
  font-size:.72rem;
  font-weight:850;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#settingsRoot .fy-films-panel .fy-film-chip-default{
  border-color:rgba(25,118,74,.20);
  background:rgba(25,118,74,.09);
  color:#176941;
}

#settingsRoot .fy-films-panel .fy-film-chip-warning{
  border-color:rgba(183,83,38,.22);
  background:rgba(183,83,38,.09);
  color:#9d4422;
}

#settingsRoot .fy-films-panel .fy-film-editor,
#settingsRoot .fy-films-panel .fy-film-editor-empty{
  grid-area:auto;
  min-height:100%;
}

#settingsRoot .fy-films-panel .fy-film-editor{
  padding:0;
  overflow:hidden;
}

#settingsRoot .fy-films-panel .fy-film-editor-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,247,243,.76));
}

#settingsRoot .fy-films-panel .fy-film-editor-heading{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

#settingsRoot .fy-films-panel .fy-film-editor-kicker{
  min-width:0;
  overflow:hidden;
  color:#8a6a21;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:0;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

#settingsRoot .fy-films-panel .fy-film-editor-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

#settingsRoot .fy-films-panel .fy-film-editor-actions .fy-btn{
  min-height:36px;
  padding:8px 11px;
  border-radius:10px !important;
}

#settingsRoot .fy-films-panel #fyDeleteFilmBtn{
  color:#8f332f !important;
}

#settingsRoot .fy-films-panel #fySetDefaultFilmBtn:disabled{
  color:#176941 !important;
  background:rgba(25,118,74,.09) !important;
  border-color:rgba(25,118,74,.20) !important;
  opacity:1;
  cursor:default;
}

#settingsRoot .fy-films-panel .fy-film-editor-body{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) minmax(260px, 1fr);
  gap:12px;
  padding:14px;
  align-items:start;
}

#settingsRoot .fy-films-panel .fy-film-cardlet{
  min-width:0;
  padding:14px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,249,246,.82));
  box-shadow:0 1px 0 rgba(255,255,255,.80) inset;
}

#settingsRoot .fy-films-panel .fy-film-cardlet-wide{
  grid-column:1 / -1;
}

#settingsRoot .fy-films-panel .fy-film-status-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

#settingsRoot .fy-films-panel .fy-film-status-item{
  min-width:0;
  padding:10px;
  border:1px solid rgba(17,19,24,.08);
  border-radius:9px;
  background:rgba(255,255,255,.70);
}

#settingsRoot .fy-films-panel .fy-film-status-item span{
  display:block;
  color:#6f7782;
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
}

#settingsRoot .fy-films-panel .fy-film-status-item strong{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:#111318;
  font-size:.98rem;
  line-height:1.1;
  font-weight:950;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#settingsRoot .fy-films-panel .fy-warranty-block{
  padding-top:14px;
  border-top:0;
}

#settingsRoot .fy-films-panel .fy-warranty-tiles{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

#settingsRoot .fy-films-panel .fy-warranty-tile{
  min-width:0;
}

#settingsRoot .fy-films-panel .fy-warranty-inline{
  display:flex;
  align-items:center;
  min-height:48px;
  margin-top:6px;
  padding:8px;
}

#settingsRoot .fy-films-panel .fy-warranty-inline input[type="number"]{
  width:100%;
}

#settingsRoot .fy-films-panel .fy-warranty-lifetime{
  flex:0 0 auto;
  margin:0;
}

#settingsRoot .fy-films-panel .fy-roll-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

#settingsRoot .fy-films-panel .fy-roll-grid-header,
#settingsRoot .fy-films-panel .fy-roll-row{
  grid-template-columns:76px minmax(96px, 1fr) minmax(96px, 1fr) minmax(70px, .72fr) minmax(54px, auto);
}

#settingsRoot .fy-films-panel .fy-roll-margin{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:9px 10px;
  border:1px solid rgba(17,19,24,.08);
  border-radius:9px;
  background:rgba(255,255,255,.64);
  color:#176941;
  font-size:.86rem;
  font-weight:950;
}

#settingsRoot .fy-settings-actions-right-catalog .fy-settings-action-btn{
  min-width:0;
  min-height:40px;
  background:linear-gradient(180deg, #ffffff, #f8f6f0) !important;
  border-color:rgba(17,19,24,.13) !important;
  color:#111318 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.78) inset !important;
}

#settingsRoot .fy-settings-actions-right-catalog #fySettingsSaveBtn{
  background:linear-gradient(135deg, #f5df98, #d8aa4c) !important;
  border-color:rgba(141,96,20,.22) !important;
  color:#111318 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.64) inset,
    0 14px 28px rgba(216,170,76,.22) !important;
}

#settingsRoot .fy-settings-actions-right-catalog .fy-settings-action-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(177,132,49,.30) !important;
}

#settingsRoot .fy-settings-actions-right-pricing .fy-settings-action-btn{
  min-width:0;
  min-height:40px;
  background:linear-gradient(180deg, #ffffff, #f8f6f0) !important;
  border-color:rgba(17,19,24,.13) !important;
  color:#111318 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.78) inset !important;
}

#settingsRoot .fy-settings-actions-right-pricing .fy-settings-action-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(177,132,49,.30) !important;
}

/* Pricing Defaults manager refresh */
#settingsRoot .fy-pricing-panel-card{
  position:relative;
  overflow:hidden;
  padding:18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,249,245,.94)) !important;
  border:1px solid rgba(17,19,24,.10) !important;
  border-radius:14px !important;
  box-shadow:0 24px 70px rgba(17,19,24,.08) !important;
}

#settingsRoot .fy-pricing-stack{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "dashboard"
    "workspace";
  gap:14px;
  min-width:0;
}

#settingsRoot .fy-pricing-dashboard{
  grid-area:dashboard;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

#settingsRoot .fy-pricing-metric{
  min-width:0;
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  padding:14px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,247,243,.90));
  box-shadow:0 1px 0 rgba(255,255,255,.86) inset;
}

#settingsRoot .fy-pricing-metric-label{
  color:#69717b;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#settingsRoot .fy-pricing-metric strong{
  min-width:0;
  color:#111318;
  font-size:1.34rem;
  line-height:1.05;
  font-weight:950;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#settingsRoot .fy-pricing-metric-note{
  color:#78808a;
  font-size:.78rem;
  font-weight:700;
  line-height:1.25;
}

#settingsRoot .fy-pricing-workspace{
  grid-area:workspace;
  display:grid;
  grid-template-columns:minmax(315px, .78fr) minmax(0, 1.42fr);
  gap:14px;
  align-items:stretch;
  min-width:0;
}

#settingsRoot .fy-pricing-rail,
#settingsRoot .fy-pricing-editor{
  min-width:0;
}

#settingsRoot .fy-pricing-rail{
  display:grid;
  grid-template-rows:minmax(0, 1fr);
  gap:10px;
}

#settingsRoot .fy-pricing-quick-card,
#settingsRoot .fy-pricing-nav-list{
  padding:12px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,247,243,.88));
  box-shadow:0 1px 0 rgba(255,255,255,.86) inset;
}

#settingsRoot .fy-pricing-quick-section + .fy-pricing-quick-section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(17,19,24,.09);
}

#settingsRoot .fy-pricing-quick-card .fy-form-grid{
  grid-template-columns:1fr;
}

#settingsRoot .fy-pricing-quick-card .fy-btn{
  width:100%;
  justify-content:center;
}

#settingsRoot .fy-pricing-nav-list{
  min-height:420px;
  max-height:calc(100vh - 430px);
  overflow:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(247,245,239,.58));
}

#settingsRoot .fy-pricing-nav-group + .fy-pricing-nav-group{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(17,19,24,.08);
}

#settingsRoot .fy-pricing-nav-title{
  padding:0 2px 8px;
  color:#8a6a21;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#settingsRoot .fy-pricing-nav-item{
  position:relative;
  min-width:0;
  min-height:82px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:11px 10px 11px 14px;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff, #fbfaf7);
  box-shadow:0 1px 0 rgba(255,255,255,.86) inset;
}

#settingsRoot .fy-pricing-nav-item + .fy-pricing-nav-item{
  margin-top:8px;
}

#settingsRoot .fy-pricing-nav-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:transparent;
  transition:background .16s ease;
}

#settingsRoot .fy-pricing-nav-item.active{
  border-color:rgba(177,132,49,.34);
  background:
    linear-gradient(90deg, rgba(216,170,76,.12), rgba(255,255,255,.96) 32%),
    linear-gradient(180deg, #ffffff, #fbfaf7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.88) inset,
    0 14px 28px rgba(17,19,24,.075);
}

#settingsRoot .fy-pricing-nav-item.active::before{
  background:#d8aa4c;
}

#settingsRoot .fy-pricing-nav-copy{
  min-width:0;
}

#settingsRoot .fy-pricing-nav-name{
  color:#111318;
  font-size:.92rem;
  font-weight:900;
  line-height:1.2;
  letter-spacing:0;
}

#settingsRoot .fy-pricing-nav-note{
  margin-top:6px;
  color:#5f6872;
  font-size:.75rem;
  font-weight:750;
  line-height:1.35;
}

#settingsRoot .fy-pricing-status-chip,
#settingsRoot .fy-pricing-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:24px;
  padding:5px 8px;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.09);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:#626a75;
  font-size:.72rem;
  font-weight:850;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#settingsRoot .fy-pricing-status-chip{
  flex:0 0 auto;
  justify-content:center;
}

#settingsRoot .fy-pricing-status-chip.good,
#settingsRoot .fy-pricing-chip-green{
  border-color:rgba(25,118,74,.20);
  background:rgba(25,118,74,.09);
  color:#176941;
}

#settingsRoot .fy-pricing-status-chip.info{
  border-color:rgba(49,95,143,.18);
  background:rgba(49,95,143,.08);
  color:#315f8f;
}

#settingsRoot .fy-pricing-chip-gold{
  border-color:rgba(177,132,49,.24);
  background:rgba(216,170,76,.12);
  color:#8a6a21;
}

#settingsRoot .fy-pricing-editor{
  min-height:100%;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.10);
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff, #fbfaf7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 14px 34px rgba(17,19,24,.055);
}

#settingsRoot .fy-pricing-editor-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,247,243,.76));
  border-bottom:1px solid rgba(17,19,24,.09);
}

#settingsRoot .fy-pricing-editor-heading{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

#settingsRoot .fy-pricing-editor-kicker{
  min-width:0;
  overflow:hidden;
  color:#8a6a21;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:0;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

#settingsRoot .fy-pricing-editor-title{
  color:#111318;
  font-size:1.06rem;
  line-height:1.2;
  font-weight:900;
  letter-spacing:0;
}

#settingsRoot .fy-pricing-editor-summary{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}

#settingsRoot .fy-pricing-editor-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

#settingsRoot .fy-pricing-editor-actions .fy-btn{
  min-height:36px;
  padding:8px 11px;
  border-radius:10px !important;
}

#settingsRoot .fy-pricing-editor-body{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) minmax(260px, 1fr);
  gap:12px;
  padding:14px;
  align-items:start;
}

#settingsRoot .fy-pricing-cardlet{
  min-width:0;
  padding:14px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,249,246,.82));
  box-shadow:0 1px 0 rgba(255,255,255,.80) inset;
}

#settingsRoot .fy-pricing-cardlet-wide{
  grid-column:1 / -1;
}

#settingsRoot .fy-quote-next-band{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px 12px 18px;
  border:1px solid rgba(17,19,24,.09);
  border-radius:10px;
  background:
    linear-gradient(90deg, rgba(216,170,76,.16), rgba(255,255,255,.94) 42%, rgba(247,245,239,.90));
}

#settingsRoot .fy-quote-next-band::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#d8aa4c;
}

#settingsRoot .fy-quote-next-label{
  color:#69717b;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#settingsRoot .fy-quote-next-value{
  color:#111318;
  font-size:1.28rem;
  font-weight:950;
  line-height:1.05;
  white-space:nowrap;
}

#settingsRoot .fy-pricing-rate-tiles{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

#settingsRoot .fy-pricing-rate-tile{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(130px, 145px);
  gap:12px;
  align-items:end;
  padding:12px;
  border:1px solid rgba(17,19,24,.09);
  border-radius:10px;
  background:rgba(255,255,255,.70);
}

#settingsRoot .fy-pricing-rate-title{
  color:#111318;
  font-size:.9rem;
  font-weight:950;
  line-height:1.2;
}

#settingsRoot .fy-pricing-rate-tile .fy-field{
  min-width:0;
}

#settingsRoot .fy-pricing-rate-tile input{
  text-align:right;
}

#settingsRoot .fy-deposit-preset{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(165px, 210px);
  gap:14px 18px;
  align-items:center;
}

#settingsRoot .fy-deposit-preset-copy{
  grid-column:1 / -1;
  min-width:0;
}

#settingsRoot .fy-deposit-switch{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  color:#111318;
  font-size:.84rem;
  font-weight:900;
  cursor:pointer;
  user-select:none;
}

#settingsRoot .fy-deposit-switch input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

#settingsRoot .fy-deposit-switch-track{
  position:relative;
  flex:0 0 auto;
  width:44px;
  height:24px;
  border:1px solid #aeb6c2;
  border-radius:999px;
  background:#dce1e7;
  transition:background .16s ease, border-color .16s ease;
}

#settingsRoot .fy-deposit-switch-track::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(15,23,42,.28);
  transition:transform .16s ease;
}

#settingsRoot .fy-deposit-switch input:checked + .fy-deposit-switch-track{
  border-color:#14783e;
  background:#14783e;
}

#settingsRoot .fy-deposit-switch input:checked + .fy-deposit-switch-track::after{
  transform:translateX(20px);
}

#settingsRoot .fy-deposit-switch input:focus-visible + .fy-deposit-switch-track{
  outline:3px solid rgba(36,76,130,.22);
  outline-offset:2px;
}

#settingsRoot .fy-deposit-percent-field{
  display:grid;
  gap:6px;
  margin:0;
  color:#69717b;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
}

#settingsRoot .fy-deposit-percent-field > div{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 34px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.14);
  border-radius:8px;
  background:#fff;
}

#settingsRoot .fy-deposit-percent-field input{
  width:100%;
  min-width:0;
  height:40px;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  text-align:right;
  box-shadow:none !important;
}

#settingsRoot .fy-deposit-percent-field strong{
  display:grid;
  place-items:center;
  align-self:stretch;
  border-left:1px solid rgba(17,19,24,.10);
  color:#69717b;
  font-size:.85rem;
}

#settingsRoot .fy-deposit-percent-field input:disabled{
  color:#8b929c;
  background:#f0f2f4 !important;
  cursor:not-allowed;
}

#settingsRoot .fy-deposit-preset-summary{
  margin:12px 0 0;
  padding-top:10px;
  border-top:1px solid rgba(17,19,24,.08);
  color:#69717b;
  font-size:.78rem;
  font-weight:750;
}

#settingsRoot .fy-pricing-tax-scope,
#settingsRoot .fy-pricing-inline-add{
  min-width:0;
  padding:12px;
  border:1px solid rgba(17,19,24,.09);
  border-radius:10px;
  background:rgba(255,255,255,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.80) inset;
}

#settingsRoot .fy-pricing-tax-scope-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

#settingsRoot .fy-pricing-check-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

#settingsRoot .fy-pricing-tax-check{
  min-width:0;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:9px 10px;
  border:1px solid rgba(17,19,24,.10);
  border-radius:10px;
  background:linear-gradient(180deg, #ffffff, #f8f6f0);
  color:#111318;
  font-size:.82rem;
  font-weight:850;
  line-height:1.2;
}

#settingsRoot .fy-pricing-tax-check input{
  flex:0 0 auto;
  width:16px;
  height:16px;
  accent-color:#d8aa4c;
}

#settingsRoot .fy-pricing-inline-add .fy-form-grid{
  align-items:end;
}

#settingsRoot .fy-pricing-inline-add .fy-btn{
  width:auto;
}

#settingsRoot .fy-pricing-table-card .fy-settings-row-head{
  margin-top:12px;
  color:#6a737d;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#settingsRoot .fy-pricing-panel .fy-tax-row-head,
#settingsRoot .fy-pricing-panel .fy-tax-rate-row{
  grid-template-columns:minmax(140px, 1fr) 76px 84px;
}

#settingsRoot .fy-pricing-panel .fy-addon-preset-head,
#settingsRoot .fy-pricing-panel .fy-addon-preset-row{
  grid-template-columns:minmax(140px, 1fr) 84px 104px 84px;
}

#settingsRoot .fy-pricing-panel .fy-tax-row-head > div,
#settingsRoot .fy-pricing-panel .fy-addon-preset-head > div{
  left:0;
}

#settingsRoot .fy-pricing-panel .fy-saved-row{
  min-height:44px;
  padding:8px;
  border:1px solid rgba(17,19,24,.09);
  border-radius:10px;
  background:rgba(255,255,255,.70);
  box-shadow:0 1px 0 rgba(255,255,255,.80) inset;
}

#settingsRoot .fy-pricing-panel .fy-saved-cell{
  color:#111318;
  font-size:.82rem;
  font-weight:850;
}

#settingsRoot .fy-pricing-panel .fy-saved-value{
  color:#176941;
  font-weight:950;
  text-align:right;
}

#settingsRoot .fy-pricing-panel #fyResetEstimateBtn,
#settingsRoot .fy-pricing-panel #fyAddTaxRateBtn,
#settingsRoot .fy-pricing-panel #fyAddPresetBtn{
  min-width:0;
  min-height:40px;
  background:linear-gradient(180deg, #ffffff, #f8f6f0) !important;
  border-color:rgba(17,19,24,.13) !important;
  color:#111318 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.78) inset !important;
}

#settingsRoot .fy-pricing-panel #fyResetEstimateBtn:hover,
#settingsRoot .fy-pricing-panel #fyAddTaxRateBtn:hover,
#settingsRoot .fy-pricing-panel #fyAddPresetBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(177,132,49,.30) !important;
}

#settingsRoot .fy-pricing-panel .fy-btn-remove-text{
  min-width:0;
  min-height:30px;
  padding:6px 9px;
  border-radius:999px !important;
  color:#8f332f !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
}

#settingsRoot .fy-pricing-rich-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

#settingsRoot .fy-pricing-rich-grid .fy-field{
  min-width:0;
}

#settingsRoot .fy-pricing-rich-grid .fy-wysiwyg{
  min-height:132px;
}

#settingsRoot .fy-pricing-locked-card{
  background:
    linear-gradient(180deg, rgba(247,245,239,.72), rgba(255,255,255,.88)) !important;
}

#settingsRoot .fy-pricing-locked-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

#settingsRoot .fy-pricing-panel .fy-section-title{
  margin-bottom:8px;
  color:#111318;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:0;
}

#settingsRoot .fy-pricing-panel .fy-help{
  color:#68717d !important;
  font-size:.78rem;
  line-height:1.4;
}

#settingsRoot .fy-pricing-panel .fy-field label{
  color:#5f6872 !important;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

@media (max-width: 860px){
  #settingsRoot .fy-deposit-preset{
    grid-template-columns:1fr;
    gap:12px;
  }

  #settingsRoot .fy-deposit-switch{
    justify-content:space-between;
  }

  #settingsRoot .fy-deposit-percent-field{
    max-width:none;
  }
}

/* Modern gold action buttons: polished metal without the old glossy bevel. */
:root{
  --pfs-gold-button-text:#241f15;
  --pfs-gold-button-border:#b8892d;
  --pfs-gold-button-border-hover:#a97a25;
  --pfs-gold-button-bg:
    linear-gradient(145deg, transparent 0%, transparent 35%, rgba(255,255,255,.52) 44%, rgba(255,255,255,.24) 51%, transparent 64%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10) 45%, rgba(112,77,18,.10)),
    linear-gradient(90deg, #c99a39 0%, #e6c263 22%, #fff0aa 43%, #d9a948 58%, #f2d17a 74%, #bf8f34 100%);
  --pfs-gold-button-bg-hover:
    linear-gradient(145deg, transparent 0%, transparent 31%, rgba(255,255,255,.60) 43%, rgba(255,255,255,.30) 52%, transparent 66%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.12) 45%, rgba(112,77,18,.08)),
    linear-gradient(90deg, #d2a648 0%, #edcb70 22%, #fff4b8 43%, #e0b356 58%, #f6dc8b 74%, #c99c42 100%);
  --pfs-gold-button-bg-active:
    linear-gradient(145deg, transparent 0%, transparent 38%, rgba(255,255,255,.34) 48%, transparent 63%, transparent 100%),
    linear-gradient(180deg, rgba(112,77,18,.08), rgba(255,255,255,.08) 39%, rgba(255,255,255,.20)),
    linear-gradient(90deg, #b98a31 0%, #dcae4c 24%, #f7df8d 44%, #c99738 62%, #e7bf61 78%, #a97d2d 100%);
  --pfs-gold-button-shadow:
    0 1px 0 rgba(255,255,255,.74) inset,
    0 12px 24px rgba(120,80,14,.13),
    0 2px 5px rgba(17,19,24,.10);
  --pfs-gold-button-shadow-hover:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 16px 32px rgba(120,80,14,.18),
    0 3px 7px rgba(17,19,24,.12);
}

.btn-primary,
.fy-btn-primary,
.btn-output-primary,
.btn-optimize-roll,
.btn-mobile-optimize,
.pfs-auth-btn-primary,
#fySettingsSaveBtn,
#fyAccountSaveBtn,
#accountRoot .fy-btn-primary,
#accountPage .fy-btn-primary,
#settingsRoot .fy-films-panel #fyAddFilmBtn,
#settingsRoot .fy-settings-actions-right-catalog #fySettingsSaveBtn,
#settingsRoot .fy-settings-actions-right-pricing #fySettingsSaveBtn,
.pfs-sunmap-cta #pfsCustomerSunMapBtn,
#fySunPreviewOpen{
  background:var(--pfs-gold-button-bg) !important;
  border-color:var(--pfs-gold-button-border) !important;
  color:var(--pfs-gold-button-text) !important;
  box-shadow:var(--pfs-gold-button-shadow) !important;
  text-shadow:none !important;
}

.btn-primary:hover,
.fy-btn-primary:hover,
.btn-output-primary:hover,
.btn-optimize-roll:hover,
.btn-mobile-optimize:hover,
.pfs-auth-btn-primary:hover,
#fySettingsSaveBtn:hover,
#fyAccountSaveBtn:hover,
#accountRoot .fy-btn-primary:hover,
#accountPage .fy-btn-primary:hover,
#settingsRoot .fy-films-panel #fyAddFilmBtn:hover,
#settingsRoot .fy-settings-actions-right-catalog #fySettingsSaveBtn:hover,
#settingsRoot .fy-settings-actions-right-pricing #fySettingsSaveBtn:hover,
.pfs-sunmap-cta #pfsCustomerSunMapBtn:hover,
#fySunPreviewOpen:hover{
  background:var(--pfs-gold-button-bg-hover) !important;
  border-color:var(--pfs-gold-button-border-hover) !important;
  box-shadow:var(--pfs-gold-button-shadow-hover) !important;
  color:var(--pfs-gold-button-text) !important;
}

.btn-primary:active,
.fy-btn-primary:active,
.btn-output-primary:active,
.btn-optimize-roll:active,
.btn-mobile-optimize:active,
.pfs-auth-btn-primary:active,
#fySettingsSaveBtn:active,
#fyAccountSaveBtn:active,
#accountRoot .fy-btn-primary:active,
#accountPage .fy-btn-primary:active,
#settingsRoot .fy-films-panel #fyAddFilmBtn:active,
#settingsRoot .fy-settings-actions-right-catalog #fySettingsSaveBtn:active,
#settingsRoot .fy-settings-actions-right-pricing #fySettingsSaveBtn:active,
.pfs-sunmap-cta #pfsCustomerSunMapBtn:active,
#fySunPreviewOpen:active{
  background:var(--pfs-gold-button-bg-active) !important;
  box-shadow:
    0 1px 2px rgba(17,19,24,.18) inset,
    0 6px 14px rgba(120,80,14,.14) !important;
  transform:translateY(1px);
}

.btn-primary:disabled,
.fy-btn-primary:disabled,
.btn-output-primary:disabled,
.btn-optimize-roll:disabled,
.btn-mobile-optimize:disabled,
.pfs-auth-btn-primary:disabled,
#accountRoot .fy-btn-primary:disabled,
#accountPage .fy-btn-primary:disabled{
  background:linear-gradient(180deg, #eee8d9, #d8cfb8) !important;
  border-color:rgba(116,91,39,.22) !important;
  color:rgba(36,31,21,.52) !important;
  box-shadow:none !important;
}

.fy-production-equipment-card{margin-top:18px}
.fy-production-equipment-card.is-locked{opacity:.72}
.fy-handler-enable-toggle,.fy-handler-default-radio,.fy-handler-save-default{display:flex;align-items:center;gap:8px}
.fy-handler-settings-grid{display:grid;gap:14px;margin:18px 0}
.fy-handler-input-suffix{display:flex;align-items:center;gap:0;overflow:hidden;border:1px solid #d8dee8;border-radius:10px;background:#fff}
.fy-handler-input-suffix input{min-width:0;flex:1;border:0!important;padding-left:14px!important;padding-right:14px!important}
.fy-handler-input-suffix>span{align-self:stretch;display:grid;place-items:center;min-width:48px;border-left:1px solid #e0e5ec;background:#f5f7fa;color:#5b6675;font-size:12px;font-weight:900;text-transform:uppercase}
.fy-handler-machine-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.fy-handler-machine-list{display:grid;gap:12px;margin-top:18px}
.fy-handler-machine-row{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(125px,.8fr) minmax(120px,.7fr);align-items:start;gap:14px;padding:18px;border:1px solid #dce3ec;border-radius:14px;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 8px 22px rgba(15,23,42,.05)}
.fy-handler-machine-field{display:grid;gap:6px;color:#526173;font-size:11px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.fy-film-handler-panel input[type="text"],.fy-film-handler-panel input[type="number"]{min-height:42px;padding-left:14px!important;padding-right:14px!important}
.fy-handler-machine-profile-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:2px}
.fy-handler-machine-profile-actions{display:flex;align-items:center;gap:8px}
.fy-handler-changeover-calibration{grid-column:1/-1;display:grid;gap:14px;margin-top:2px;padding:16px;border:1px solid #cbd9ec;border-radius:13px;background:linear-gradient(135deg,#f7faff 0%,#eef5ff 100%)}
.fy-handler-changeover-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.fy-handler-changeover-heading>div{display:grid;gap:4px}
.fy-handler-changeover-heading strong{color:#172033;font-size:14px}
.fy-handler-changeover-heading>div>span{max-width:720px;margin:0;color:#5f6d80;font-size:12px;line-height:1.5}
.fy-handler-changeover-status{flex:0 0 auto;padding:5px 9px;border:1px solid #b9d1f5;border-radius:999px;background:#fff;color:#1759b5;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.fy-handler-changeover-status.is-required{border-color:#f1c58a;background:#fff8ec;color:#9b5700}
.fy-handler-changeover-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:stretch}
.fy-handler-calibration-field{display:grid;align-content:start;gap:8px;padding:15px 16px;border:1px solid #d5e0ef;border-radius:11px;background:rgba(255,255,255,.88)}
.fy-handler-calibration-field>span{display:flex;align-items:flex-start;min-height:30px;color:#26364c;font-size:11px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.fy-handler-calibration-field small{color:#64748b;font-size:10px;line-height:1.45;text-transform:none;letter-spacing:0;font-weight:600}
.fy-handler-calibration-field .fy-handler-input-suffix{margin-top:2px}
.fy-handler-changeover-total{display:grid;align-content:start;gap:8px;padding:15px 16px;border:1px solid #9fc1ef;border-radius:11px;background:#fff;box-shadow:0 5px 16px rgba(11,94,234,.08)}
.fy-handler-changeover-total>span{display:flex;align-items:flex-start;min-height:30px;color:#26364c;font-size:11px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.fy-handler-changeover-total>strong{color:#0b5eea;font-size:22px;line-height:1.1}
.fy-handler-changeover-total>small{color:#64748b;font-size:10px;font-weight:600;line-height:1.45;letter-spacing:0;text-transform:none}
.fy-handler-changeover-total.is-required{border-color:#efc07f;background:#fffaf1}
.fy-handler-changeover-total.is-required strong{color:#a45b00;font-size:16px}
.fy-handler-empty{display:grid;justify-items:center;gap:8px;padding:34px 20px;border:1px dashed #c8d3e2;border-radius:14px;background:linear-gradient(180deg,#f8fbff,#f4f7fb);color:#607086;text-align:center}
.fy-handler-empty strong{color:#172033;font-size:15px}
.fy-handler-empty span{max-width:420px;font-size:12px;line-height:1.5}
.fy-handler-empty-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(11,94,234,.18);border-radius:14px;background:linear-gradient(145deg,#eaf2ff,#d9e8ff);color:#0b5eea;font-size:13px;font-weight:950;letter-spacing:.08em;box-shadow:0 8px 20px rgba(11,94,234,.12)}
.fy-handler-machine-number{display:flex;align-items:center;gap:8px;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.fy-handler-machine-number span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#172033;color:#fff;font-weight:900}
.fy-handler-machine-number strong{font-size:11px}
.fy-handler-machine-name-field{display:grid;gap:6px;min-width:0;color:#526173;font-size:11px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.fy-handler-default-radio{align-self:center;padding:8px 10px;border:1px solid #cfd9e6;border-radius:7px;background:#f8fafc;color:#526173;font-size:11px;font-weight:850;white-space:nowrap}
.fy-handler-default-radio input{width:15px;height:15px;accent-color:#0b5eea}
.fy-handler-machine-input>span{min-width:38px}
.fy-handler-layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:16px;padding:16px}
.fy-handler-defaults-card,.fy-handler-machines-card{min-width:0;border:1px solid #dce3ec;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.055)}
.fy-handler-defaults-card,.fy-handler-machines-card{padding:20px}
.fy-handler-section-kicker,.fy-handler-eyebrow{color:#0b5eea;font-size:10px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}
.fy-handler-section-title{margin-top:5px;color:#172033;font-size:18px;font-weight:950;letter-spacing:-.025em}
.fy-handler-section-copy{margin:8px 0 0;color:#667085;font-size:12px;line-height:1.55}
.fy-handler-rule-note{display:grid;gap:4px;margin-top:18px;padding:13px 14px;border:1px solid #d8e6fb;border-radius:12px;background:#f4f8ff;color:#40536d}
.fy-handler-rule-note strong{color:#164d99;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.fy-handler-rule-note span{font-size:12px;line-height:1.45}
.fy-handler-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;background:radial-gradient(circle at 82% 12%,rgba(89,151,255,.30),transparent 34%),linear-gradient(135deg,#101a2d,#173c72 62%,#0b5eea);color:#fff}
.fy-handler-hero-copy{min-width:0}
#settingsRoot .fy-film-handler-panel .fy-handler-hero .fy-panel-title{margin-top:5px;color:#fff!important;font-size:24px;font-weight:950;letter-spacing:-.035em}
#settingsRoot .fy-film-handler-panel .fy-handler-hero .fy-panel-subtitle{max-width:690px;margin-top:5px;color:rgba(255,255,255,.76)!important;font-size:13px;line-height:1.45}
.fy-handler-eyebrow{color:#8fc0ff}
.fy-handler-capability-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.fy-handler-capability-list span{padding:6px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.09);color:#eef5ff;font-size:10px;font-weight:850;letter-spacing:.02em}
.fy-handler-enable-toggle{position:relative;flex:0 0 min(330px,36%);padding:13px 15px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.10);color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.fy-handler-enable-toggle>input{position:absolute!important;width:1px!important;height:1px!important;min-height:1px!important;margin:0!important;opacity:0;pointer-events:none}
.fy-handler-toggle-track{position:relative;flex:0 0 42px;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:.2s ease}
.fy-handler-toggle-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.24);transition:.2s ease}
.fy-handler-enable-toggle>input:checked+.fy-handler-toggle-track{background:#65d397}
.fy-handler-enable-toggle>input:checked+.fy-handler-toggle-track::after{transform:translateX(18px)}
.fy-handler-toggle-copy{display:grid;gap:2px}
.fy-handler-toggle-copy strong{color:#fff;font-size:12px}
.fy-handler-toggle-copy small{color:rgba(255,255,255,.68);font-size:10px;line-height:1.35}
#settingsRoot .fy-film-handler-panel .fy-production-equipment-card{margin:0!important;padding:0!important;overflow:hidden;border:1px solid #d7dfeb!important;border-radius:16px!important;background:#f3f6fa!important;box-shadow:0 18px 44px rgba(15,23,42,.10)!important;color:#172033!important}
#settingsRoot .fy-film-handler-panel .fy-production-equipment-card.is-locked{opacity:1}
.fy-handler-production-control{margin-bottom:14px;padding:12px;border:1px solid var(--border-color,#dbe4ee);border-radius:14px;background:var(--card-bg,#fff)}
.fy-production-method-toggle{display:inline-flex;padding:3px;border:1px solid var(--border-color,#dbe4ee);border-radius:10px;background:rgba(15,23,42,.04)}
.fy-production-method-toggle button{border:0;background:transparent;padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer}
.fy-production-method-toggle button.active{background:#0f5ea8;color:#fff}
.fy-handler-control-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;margin-top:12px}
.fy-handler-control-grid>label{display:grid;gap:5px;font-size:12px;font-weight:700}
.fy-handler-control-grid select,.fy-handler-control-grid input{width:100%}
.fy-handler-field-help{font-size:11px;font-weight:600;line-height:1.35;color:var(--text-muted,#667085)}
.fy-handler-policy-source{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border-radius:10px;background:#eef6ff;color:#163b62}
.fy-handler-policy-source.is-manual-trim{background:#fff4d6;color:#6e4700;border:1px solid #edc361}
.fy-handler-save-default{margin-top:10px;font-size:12px}
.results-section .fy-handler-result-summary{margin:14px 0 16px;overflow:hidden;border:1px solid #d8dee8;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.067);color:#111827}
.fy-handler-result-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px 14px;border-bottom:1px solid #e2e6ec;background:linear-gradient(135deg,#fffaf0 0,#fff 48%,#fbfcfe 100%)}
.fy-handler-result-heading{display:grid;gap:3px;min-width:0}
.fy-handler-result-eyebrow{color:#9a6b10;font-size:10px;font-weight:900;letter-spacing:.09em;line-height:1.2;text-transform:uppercase}
.fy-handler-result-heading strong{overflow:hidden;color:#111827;font-size:18px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.fy-handler-result-method{flex:0 0 auto;padding:6px 9px;border:1px solid #dfbd72;border-radius:7px;background:#fff7e2;color:#8a6010;font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.fy-handler-result-config{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #e2e6ec;background:#fbfcfe}
.fy-handler-result-config>span{display:grid;min-width:0;gap:3px;padding:11px 18px;border-right:1px solid #e2e6ec}
.fy-handler-result-config>span:last-child{border-right:0}
.fy-handler-result-config small,.fy-handler-result-metric small{color:#667085;font-size:9px;font-weight:900;letter-spacing:.06em;line-height:1.25;text-transform:uppercase}
.fy-handler-result-config strong{overflow:hidden;color:#111827;font-size:12px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.fy-handler-result-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}
.fy-handler-result-metric{display:grid;min-width:0;gap:4px;padding:12px;border:1px solid #dfe4eb;border-radius:9px;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.045)}
.fy-handler-result-metric strong{color:#111827;font-size:17px;line-height:1.15}
.fy-handler-result-metric em{overflow:hidden;color:#667085;font-size:9px;font-style:normal;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.fy-handler-result-metric.is-warning{border-color:#dfb550;background:#fff8e5}
.fy-handler-result-metric.is-warning strong{color:#765000}
.stat-warning{outline:2px solid #edc361}
@media(max-width:900px){
  .fy-handler-layout{grid-template-columns:1fr}
  .fy-handler-hero{align-items:flex-start;flex-direction:column}
  .fy-handler-enable-toggle{width:100%;max-width:none;flex-basis:auto}
  .fy-handler-machine-row{grid-template-columns:1fr 1fr}
  .fy-handler-machine-profile-head,.fy-handler-machine-name-field{grid-column:1/-1}
  .fy-handler-changeover-fields{grid-template-columns:1fr 1fr}
  .fy-handler-changeover-total{grid-column:1/-1}
  .fy-handler-control-grid{grid-template-columns:1fr 1fr}
  .fy-handler-policy-source{display:grid}
}
@media(max-width:600px){
  .fy-handler-hero{padding:20px}
  .fy-handler-layout{padding:10px}
  .fy-handler-defaults-card,.fy-handler-machines-card{padding:16px}
  .fy-handler-machine-head{align-items:flex-start;flex-direction:column}
  .fy-handler-machine-head .fy-btn{width:100%}
  .fy-handler-machine-row{grid-template-columns:1fr}
  .fy-handler-machine-profile-head,.fy-handler-machine-name-field{grid-column:auto}
  .fy-handler-machine-profile-head{align-items:flex-start;flex-direction:column}
  .fy-handler-machine-profile-actions{width:100%;justify-content:space-between}
  .fy-handler-changeover-heading{display:grid}
  .fy-handler-changeover-status{justify-self:start}
  .fy-handler-changeover-fields{grid-template-columns:1fr}
  .fy-handler-changeover-total{grid-column:auto}
  .fy-handler-result-head{align-items:flex-start}
  .fy-handler-result-config{grid-template-columns:1fr}
  .fy-handler-result-config>span{border-right:0;border-bottom:1px solid #e2e6ec}
  .fy-handler-result-config>span:last-child{border-bottom:0}
  .fy-handler-result-metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .fy-handler-result-head{display:grid}
  .fy-handler-result-method{justify-self:start}
  .fy-handler-result-metrics{grid-template-columns:1fr}
}