/* ============================================================
   Jaystool Line Sheet — Premium Minimal UI Refresh
   Scope: visual/UI polish only. Keeps existing saved work, share URLs,
   autosave, video seek, export, and Line Sheet Pro vNext functions intact.
   Inspired by the Privy Trend Intelligence reference: white canvas,
   editorial spacing, thin rules, minimal boxes, premium fashion tooling.
   ============================================================ */
:root{
  --jay-ink:#06172f;
  --jay-ink-2:#0b1f3a;
  --jay-muted:#667085;
  --jay-muted-2:#98a2b3;
  --jay-line:#d9e2ec;
  --jay-line-soft:#eef2f6;
  --jay-paper:#ffffff;
  --jay-bg:#ffffff;
  --jay-soft:#f7f9fb;
  --jay-blue:#0d3b66;
  --jay-sky:#8fb4d6;
  --jay-green:#8fb4a1;
  --jay-gold:#c4a16f;
  --jay-shadow:0 18px 42px rgba(6,23,47,.055);
}
html,body{
  background:#fff !important;
  color:var(--jay-ink) !important;
  font-family:Inter,Arial,"Noto Sans KR",sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body::before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:1px;
  background:var(--jay-line-soft);
  z-index:1;
  pointer-events:none;
}
.app{
  display:grid !important;
  grid-template-columns:clamp(360px,28vw,470px) minmax(0,1fr) !important;
  gap:0 !important;
  padding:0 !important;
  min-height:100vh !important;
  background:#fff !important;
}
.panel{
  width:auto !important;
  max-height:100vh !important;
  height:100vh !important;
  padding:28px 30px 46px !important;
  background:#fff !important;
  border:0 !important;
  border-right:1px solid var(--jay-line-soft) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:auto !important;
}
.panel::-webkit-scrollbar,.stage::-webkit-scrollbar,.thumbs::-webkit-scrollbar{width:8px;height:8px}
.panel::-webkit-scrollbar-thumb,.stage::-webkit-scrollbar-thumb,.thumbs::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.panel h1{
  margin:0 0 4px !important;
  font-size:24px !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
  color:var(--jay-ink) !important;
  font-weight:850 !important;
}
.panel > .muted:first-of-type{
  margin-bottom:24px !important;
  color:#5d6b7d !important;
  font-size:12px !important;
  line-height:1.55 !important;
}
.panel h2,
.panel .fold-toggle,
.panel label,
.lspro-command-sub,
.lspro-field label{
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.panel h2{
  color:#7d8da3 !important;
  font-size:10px !important;
  margin:28px 0 12px !important;
  font-weight:850 !important;
}
.panel h3{color:var(--jay-ink) !important;font-weight:800 !important}
.panel label{color:#526174 !important;font-size:10px !important;font-weight:800 !important;margin-bottom:6px !important}
.panel .muted,.panel .status{color:#667085 !important;font-size:12px !important;line-height:1.55 !important}
.panel input[type=text],
.panel input[type=number],
.panel input[type=password],
.panel input[type=file],
.panel select,
.panel textarea,
.text-format-popover input,
.text-format-popover select,
.text-format-popover textarea,
.lspro-field input,
.lspro-field select,
.lspro-field textarea{
  border:0 !important;
  border-bottom:1px solid var(--jay-line) !important;
  border-radius:0 !important;
  background:#fff !important;
  color:var(--jay-ink) !important;
  padding:10px 2px !important;
  box-shadow:none !important;
  outline:none !important;
}
.panel input:focus,.panel select:focus,.panel textarea:focus,
.text-format-popover input:focus,.text-format-popover select:focus,.text-format-popover textarea:focus{
  border-bottom-color:var(--jay-ink) !important;
  box-shadow:0 1px 0 var(--jay-ink) !important;
}
.panel input[type=range]{accent-color:var(--jay-ink) !important}
button,
.panel button,
.tabbtn,
.lspro-actions button,
.lspro-step,
.lspro-close,
.top-home-button,
#modernAutoSaveToggle,
#lineSheetPreviewZoomControls button{
  border-radius:10px !important;
  box-shadow:none !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
}
button,.panel button,.tabbtn{background:#071122 !important;color:#fff !important;border:1px solid #071122 !important}
button:hover,.panel button:hover,.tabbtn:hover{transform:translateY(-1px);filter:none !important}
.panel button.secondary,.panel button.ghost,.ghost,.secondary,.lspro-qa-fix,.lspro-close{
  background:#fff !important;
  color:#071122 !important;
  border:1px solid var(--jay-line) !important;
}
.preview-shell{
  height:100vh !important;
  grid-template-columns:var(--thumbs-w,152px) 8px auto minmax(0,1fr) !important;
  gap:14px !important;
  padding:24px 28px 28px !important;
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.thumbs{
  border:0 !important;
  border-right:1px solid var(--jay-line-soft) !important;
  border-radius:0 !important;
  background:#fff !important;
  padding:0 14px 0 0 !important;
}
.thumb-resizer{
  width:1px !important;
  background:var(--jay-line-soft) !important;
  border:0 !important;
  border-radius:0 !important;
}
.thumb-resizer::after{display:none !important}
.thumb-item{
  border:1px solid transparent !important;
  border-bottom:1px solid var(--jay-line-soft) !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
  padding:10px 0 !important;
}
.thumb-item.active{outline:0 !important;border-color:transparent !important;border-bottom-color:#071122 !important;background:#fff !important}
.stage{
  background:linear-gradient(180deg,#fbfcfd,#f6f8fb) !important;
  border:0 !important;
  border-radius:0 !important;
  padding:28px 32px !important;
}
.page{
  box-shadow:0 22px 70px rgba(6,23,47,.12) !important;
  border:1px solid rgba(6,23,47,.08) !important;
}
.fold-section,
.tab,
.standalone-tab,
.section-box,
.status,
.choice,
.share-history-panel,
.bottom-download,
.quick-save-inline,
.gallery,
.mini-preview,
.field-card{
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.fold-section{
  border-top:1px solid var(--jay-line-soft) !important;
  margin:0 !important;
  padding:0 !important;
}
.fold-section:last-of-type{border-bottom:1px solid var(--jay-line-soft) !important}
.fold-toggle,
.panel .fold-toggle{
  min-height:52px !important;
  padding:15px 0 !important;
  background:#fff !important;
  color:var(--jay-ink) !important;
  border:0 !important;
  width:100% !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  font-size:11px !important;
}
.fold-toggle::before{opacity:.58 !important;color:#91a3b8 !important;margin-right:8px !important}
.fold-section.open > .fold-toggle{background:#fff !important;color:var(--jay-ink) !important}
.fold-content{padding:0 0 22px !important}
.tabs{gap:6px !important;border-bottom:1px solid var(--jay-line-soft) !important;margin-bottom:12px !important}
.tabbtn{
  background:#fff !important;
  color:#667085 !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  padding:10px 0 !important;
  margin-right:18px !important;
}
.tabbtn.active{color:var(--jay-ink) !important;border-bottom-color:var(--jay-ink) !important;outline:0 !important;background:#fff !important}
.row{gap:16px !important;margin-bottom:18px !important}
.row.two,.row.three{gap:18px !important}
.gallery{max-height:360px !important;gap:14px !important;padding-right:0 !important}
.choice{padding:0 !important;border-bottom:1px solid var(--jay-line-soft) !important}
.choice .thumb{border-radius:0 !important;background:#fff !important;border:0 !important}
.choice.active{outline:0 !important;border-bottom:2px solid var(--jay-ink) !important}
.mini-preview{border:1px solid var(--jay-line-soft) !important;border-radius:0 !important}
/* Premium Line Sheet Pro panel — not a card, a command strip. */
.lspro-command-center{
  margin:24px 0 6px !important;
  border:0 !important;
  border-top:1px solid var(--jay-line) !important;
  border-bottom:1px solid var(--jay-line) !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}
.lspro-command-head{
  padding:18px 0 14px !important;
  border-bottom:1px solid var(--jay-line-soft) !important;
}
.lspro-command-title{
  color:var(--jay-ink) !important;
  font-size:18px !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
}
.lspro-command-sub{color:#7d8da3 !important;font-size:9px !important;font-weight:850 !important;margin-top:5px !important}
.lspro-mode-toggle{background:#f2f5f8 !important;border:1px solid var(--jay-line-soft) !important;border-radius:999px !important}
.lspro-mode-toggle button{padding:7px 12px !important;border:0 !important;background:transparent !important;color:#667085 !important;font-size:11px !important}
.lspro-mode-toggle button.active{background:#071122 !important;color:#fff !important}
.lspro-readiness{padding:16px 0 !important;grid-template-columns:56px minmax(0,1fr) !important;border-bottom:1px solid var(--jay-line-soft) !important}
.lspro-score-ring{width:48px !important;height:48px !important;background:conic-gradient(#0d3b66 var(--score,0%),#edf2f7 0) !important}
.lspro-score-ring:after{background:#fff !important;inset:5px !important}
.lspro-score-ring strong{font-size:12px !important;color:var(--jay-ink) !important}
.lspro-ready-label{font-size:13px !important;color:var(--jay-ink) !important}
.lspro-ready-note{color:#667085 !important;font-size:11px !important}
.lspro-workflow{padding:14px 0 !important;gap:8px !important}
.lspro-step{
  border:1px solid var(--jay-line-soft) !important;
  background:#fff !important;
  color:#26374d !important;
  border-radius:0 !important;
  padding:12px 6px !important;
}
.lspro-step:hover{border-color:#071122 !important;background:#fbfcfd !important}
.lspro-actions{padding:0 0 16px !important;gap:10px !important}
.lspro-actions button{border-radius:8px !important;padding:11px 12px !important}
.lspro-actions .primary{background:#071122 !important;color:#fff !important}
.lspro-drawer-backdrop{background:rgba(7,17,34,.18) !important;backdrop-filter:blur(4px) !important}
.lspro-drawer{
  background:#fff !important;
  border-left:1px solid var(--jay-line) !important;
  box-shadow:-28px 0 80px rgba(6,23,47,.16) !important;
}
.lspro-drawer-head,.lspro-drawer-foot{border-color:var(--jay-line-soft) !important}
.lspro-drawer-head h2{font-size:28px !important;letter-spacing:-.04em !important;color:var(--jay-ink) !important}
.lspro-preset,.lspro-qa-item,.lspro-table-wrap{
  border:1px solid var(--jay-line-soft) !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}
.lspro-preset:hover{border-color:#071122 !important;box-shadow:none !important}
.lspro-table th{background:#f7f9fb !important;color:#667085 !important;text-transform:uppercase !important;letter-spacing:.1em !important;font-size:10px !important}
/* Fixed controls: premium floating pills, still in the same final confirmed positions. */
.top-home-button,#modernAutoSaveToggle,#lineSheetPreviewZoomControls,.text-format-popover.docked{
  border-radius:14px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--jay-line-soft) !important;
  box-shadow:0 16px 42px rgba(6,23,47,.10) !important;
  backdrop-filter:blur(10px) !important;
}
.top-home-button,#modernAutoSaveToggle{color:#071122 !important}
#lineSheetPreviewZoomControls button{background:#071122 !important;color:#fff !important;border-color:#071122 !important}
.text-format-popover.docked{color:var(--jay-ink) !important}
/* Export/download remains visible but less separated from the workflow. */
.bottom-download{
  border-top:1px solid var(--jay-line) !important;
  margin-top:30px !important;
  padding-top:20px !important;
}
/* Buyer-facing page content remains unchanged; only controls are refreshed. */
.header-box,.subtitle-box,.footer-box,.caption{color:inherit}
@media(max-width:1180px){
  .app{grid-template-columns:1fr !important}
  .panel{height:auto !important;max-height:none !important;border-right:0 !important;border-bottom:1px solid var(--jay-line-soft) !important;padding:22px 20px !important}
  .preview-shell{height:auto !important;min-height:80vh !important;grid-template-columns:1fr !important;padding:20px !important}
  .thumbs{flex-direction:row !important;border-right:0 !important;border-bottom:1px solid var(--jay-line-soft) !important;padding:0 0 12px !important}
  .thumb-resizer{display:none !important}
}
@media(max-width:680px){
  .panel{padding:18px 16px !important}
  .stage{padding:18px 10px !important}
  .row.two,.row.three{grid-template-columns:1fr !important}
  .lspro-workflow{grid-template-columns:1fr 1fr !important}
}

/* ===== 2026-08-17 Line Sheet white-control refinement ===== */
.panel button,
.tabbtn,
.lspro-actions button,
.lspro-step,
.lspro-close,
.top-home-button,
#modernAutoSaveToggle,
#lineSheetPreviewZoomControls button{
  background:#fff !important;
  color:#2d4665 !important;
  border:1px solid #ccd7e5 !important;
  box-shadow:none !important;
}
.panel button:hover,
.tabbtn:hover,
.lspro-actions button:hover,
.lspro-step:hover,
.top-home-button:hover,
#lineSheetPreviewZoomControls button:hover{
  background:#f7f9fc !important;
  border-color:#aebdd0 !important;
  color:#153252 !important;
  transform:none !important;
}
/* Keep selected modes obvious without a heavy filled button. */
.lspro-mode-toggle button.active,
.lspro-actions .primary,
.tabbtn.active,
.panel button.active{
  background:#edf3fa !important;
  color:#214f83 !important;
  border-color:#afc2da !important;
}
/* Button groups in the narrow left rail: consistent height, spacing, and wrapping. */
.panel .actions,
.panel .button-row,
.panel .btn-row,
.panel .toolbar-row,
.lspro-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:stretch !important;
}
.panel .actions > button,
.panel .button-row > button,
.panel .btn-row > button,
.panel .toolbar-row > button,
.lspro-actions > button{
  min-height:38px !important;
  width:auto !important;
  max-width:100% !important;
  flex:1 1 auto !important;
  white-space:normal !important;
  line-height:1.2 !important;
  padding:9px 11px !important;
}
/* Workflow step tiles: pale surface rather than blue blocks. */
.lspro-workflow .lspro-step{
  background:#fff !important;
  color:#263b57 !important;
  border:1px solid #d8e1ec !important;
}
.lspro-workflow .lspro-step.active,
.lspro-workflow .lspro-step[aria-current="step"]{
  background:#f0f5fb !important;
  color:#204f82 !important;
  border-color:#b7c9df !important;
}
/* Floating controls must not visually collide. */
.top-home-button{right:18px !important;top:14px !important;min-width:112px !important;height:38px !important;}
#modernAutoSaveToggle{right:18px !important;top:64px !important;min-height:38px !important;}
#lineSheetPreviewZoomControls{right:18px !important;top:116px !important;display:flex !important;gap:6px !important;align-items:center !important;}
#lineSheetPreviewZoomControls button{min-width:36px !important;height:36px !important;padding:0 10px !important;}
@media(max-width:900px){
  .top-home-button{right:10px !important;top:10px !important;}
  #modernAutoSaveToggle{right:10px !important;top:58px !important;}
  #lineSheetPreviewZoomControls{right:10px !important;top:108px !important;}
}