.home-kicker{
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

.home{
  --home-surface: rgba(255,255,255,.02);
  --home-surface-2: rgba(255,255,255,.035);
  --home-border: rgba(255,255,255,.10);
  --home-border-soft: rgba(255,255,255,.07);
  --home-accent: var(--ds-primary);
  --home-accent-2: var(--ds-primary-2);
  --home-glow: var(--ds-glow);
}

.home-title{
  margin:6px 0 0;
  font-weight:900;
  letter-spacing:.01em;
  color:#ffffff;
}

.home-subtitle{
  margin-top:8px;
  font-size:13px;
  color:rgba(161,161,170,.92);
  line-height:1.7;
}

.home-status{
  font-size:12px;
  color:rgba(161,161,170,.92);
}

.home-textarea{
  height:260px;
  max-height:260px;
  resize:none;
  overflow-y:auto;
  scrollbar-gutter:stable;
}

.home-textarea::-webkit-scrollbar{ width:10px; }
.home-textarea::-webkit-scrollbar-track{ background:rgba(255,255,255,.02); border-radius:999px; }
.home-textarea::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:999px; border:2px solid rgba(10,10,12,.72); }
.home-textarea::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.20); }
.home-textarea{ scrollbar-color: rgba(255,255,255,.18) rgba(255,255,255,.02); }

#charCounter{
  margin-top:8px;
  font-size:12px;
  color:rgba(161,161,170,.92);
}

.home-actions .btn{
  width:100%;
  min-height:44px;
  padding:11px 16px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.01em;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

@media (min-width: 576px){
  .home-actions .btn{ width:auto; }
}

.home-actions .btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}

.home-actions .btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.home-actions .btn-outline-light{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.14);
  color:#e5e7eb;
}

.home-actions .btn-outline-light:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
  color:#ffffff;
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(99,102,241,.10);
}

.home-actions .btn-primary{
  border-color:rgba(139,92,246,.55);
  background:linear-gradient(135deg, rgba(139,92,246,.92) 0%, rgba(99,102,241,.86) 55%, rgba(6,182,212,.76) 120%);
  box-shadow:0 18px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(139,92,246,.22) inset;
}

.home-actions .btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 22px 50px rgba(0,0,0,.34), var(--home-glow);
}

.home-form .form-control{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:#ffffff;
  color-scheme:dark;
}

.home-form .form-control:focus{
  border-color:rgba(99,102,241,.65);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
  background:rgba(255,255,255,.045);
}

.home-panel{
  margin-top:0;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--home-border-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.018) 100%);
  box-shadow:0 16px 40px rgba(0,0,0,.24);
}

.home-workspace > [class*="col-"]{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.book-panel,
.project-role-panel,
.chapter-panel{
  position:relative;
  overflow:hidden;
}

.book-panel::before,
.project-role-panel::before,
.chapter-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg, rgba(129,140,248,.0), rgba(129,140,248,.48), rgba(6,182,212,.22), rgba(129,140,248,.0));
  pointer-events:none;
}

.book-panel-head,
.chapter-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.book-panel-title{
  font-size:15px;
  font-weight:900;
  color:#ffffff;
  letter-spacing:.01em;
}

.book-panel-subtitle{
  margin-top:6px;
  font-size:12px;
  line-height:1.7;
  color:rgba(161,161,170,.92);
}

.book-select-shell{
  position:relative;
  width:100%;
}

.book-select-native,
.project-dialog-form .form-control{
  color-scheme:dark;
}

.book-select-native{
  display:none;
}

.book-select-trigger{
  min-height:44px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 44px 11px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(24,24,27,.98) 0%, rgba(16,16,18,.98) 100%);
  color:#f4f4f5;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
  cursor:pointer;
  text-align:left;
}

.book-select-trigger:hover{
  border-color:rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(28,28,31,.98) 0%, rgba(18,18,21,.98) 100%);
}

.book-select-trigger:focus{
  border-color:rgba(161,161,170,.34);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.05),
    0 10px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.book-select-shell.is-open .book-select-trigger{
  border-color:rgba(161,161,170,.34);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.05),
    0 10px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.book-select-trigger:disabled{
  color:rgba(228,228,231,.48);
  background:
    linear-gradient(180deg, rgba(24,24,27,.7) 0%, rgba(16,16,18,.7) 100%);
  cursor:not-allowed;
}

.book-select-trigger-text{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.book-select-trigger.is-placeholder .book-select-trigger-text{
  color:rgba(212,212,216,.72);
  font-weight:500;
}

.book-select-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:rgba(244,244,245,.72);
  pointer-events:none;
  flex:0 0 auto;
  transition:transform .18s ease, color .18s ease;
}

.book-select-shell.is-open .book-select-icon{
  transform:rotate(180deg);
  color:rgba(244,244,245,.96);
}

.book-select-icon svg{
  width:16px;
  height:16px;
}

.book-select-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:40;
  display:none;
  width:100%;
  padding:6px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(10,10,11,.98);
  box-shadow:
    0 18px 48px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}

.book-select-shell.is-open .book-select-menu{
  display:block;
}

.book-select-item{
  width:100%;
  display:flex;
  align-items:center;
  min-height:36px;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#f4f4f5;
  font-size:13px;
  font-weight:500;
  line-height:1.45;
  text-align:left;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease;
}

.book-select-item:hover,
.book-select-item:focus{
  background:rgba(255,255,255,.07);
  color:#ffffff;
}

.book-select-item.is-selected{
  background:rgba(255,255,255,.08);
  color:#ffffff;
}

.book-select-item.is-placeholder{
  color:rgba(212,212,216,.72);
}

.book-summary{
  display:grid;
  gap:8px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(129,140,248,.24);
  background:linear-gradient(180deg, rgba(99,102,241,.12) 0%, rgba(99,102,241,.05) 100%);
}

.book-summary-empty{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.book-summary-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(196,181,253,.88);
}

.book-summary-title{
  font-size:16px;
  font-weight:900;
  color:#ffffff;
}

.book-summary-text,
.book-summary-note,
.book-summary-meta{
  font-size:12px;
  line-height:1.7;
  color:rgba(229,231,235,.88);
}

.book-summary-note{
  padding-top:2px;
  color:rgba(209,213,219,.84);
}

.book-summary-meta{
  color:rgba(196,181,253,.82);
}

.book-summary-actions{
  margin-top:4px;
  display:flex;
  justify-content:flex-end;
}

.project-role-panel{
  flex:none;
}

.project-role-library{
  display:grid;
  gap:10px;
  min-height:0;
  max-height:320px;
  overflow:auto;
  scrollbar-gutter:stable;
}

.project-role-library::-webkit-scrollbar{ width:10px; }
.project-role-library::-webkit-scrollbar-track{ background:rgba(255,255,255,.02); border-radius:999px; }
.project-role-library::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:999px; border:2px solid rgba(10,10,12,.72); }
.project-role-library::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.20); }
.project-role-library{ scrollbar-color: rgba(255,255,255,.18) rgba(255,255,255,.02); }

.project-role-empty-wrap{
  padding:18px 14px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.12);
  background:rgba(255,255,255,.015);
}

.project-role-empty{
  font-size:13px;
  font-weight:800;
  color:#f3f4f6;
}

.project-role-empty-sub{
  margin-top:8px;
  font-size:12px;
  line-height:1.7;
  color:rgba(161,161,170,.92);
}

.project-role-item{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  box-shadow:0 10px 24px rgba(3,7,18,.12);
}

.project-role-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.project-role-name{
  min-width:0;
  font-size:14px;
  font-weight:900;
  color:#ffffff;
}

.project-role-status{
  flex:none;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb;
  background:rgba(255,255,255,.04);
}

.project-role-status.ok{
  color:#86efac;
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.24);
}

.project-role-status.new{
  color:#c4b5fd;
  background:rgba(129,140,248,.12);
  border-color:rgba(129,140,248,.28);
}

.project-role-status.failed{
  color:#fda4af;
  background:rgba(244,63,94,.10);
  border-color:rgba(244,63,94,.24);
}

.project-role-status.pending{
  color:#fcd34d;
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.24);
}

.project-role-meta{
  margin-top:8px;
  font-size:12px;
  line-height:1.7;
  color:rgba(161,161,170,.92);
}

.project-role-flag{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#dbeafe;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(59,130,246,.22);
}

.project-role-flag-muted{
  color:rgba(209,213,219,.82);
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.10);
}

.chapter-project-hint,
.chapter-action-hint{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-size:12px;
  line-height:1.7;
  color:rgba(229,231,235,.88);
}

.chapter-project-hint{
  max-width:320px;
}

.chapter-action-hint{
  margin-bottom:12px;
}

.project-dialog{
  display:none;
  position:fixed;
  inset:0;
  z-index:10001;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.project-dialog-form{
  display:grid;
  gap:14px;
  margin-top:14px;
}

#roleAnalysisList{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  align-items:start;
}

.role-card{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.025) 100%);
  box-shadow:0 12px 32px rgba(3,7,18,.18);
  overflow:hidden;
}

.role-card-head{
  padding:16px 16px 10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}

.role-card-title-wrap{
  min-width:0;
  flex:1;
}

.role-name-field{
  min-height:42px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  line-height:20px;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
}

.role-action-btn{
  min-height:42px;
  padding:0 14px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  color:#e5e7eb;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.role-action-btn:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.18);
}

.role-action-ghost{
  background:rgba(99,102,241,.14);
  border-color:rgba(129,140,248,.34);
  color:#dbe2ff;
}

.role-card-body{
  padding:0 16px 14px;
  display:grid;
  gap:12px;
}

.role-field-block{
  display:grid;
  gap:8px;
}

.role-field-divider{
  height:1px;
  background:rgba(255,255,255,.08);
}

.role-volume-pending .role-field-volume{
  display:none;
}

.role-field-label{
  font-size:12px;
  font-weight:800;
  color:rgba(229,231,235,.86);
}

.role-field-control{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:#fff;
  color-scheme:dark;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.role-field-control:focus{
  outline:none;
  border-color:rgba(99,102,241,.65);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
  background:rgba(255,255,255,.05);
}

.role-desc-textarea{
  min-height:84px;
  resize:none;
}

.role-desc-actions{
  display:flex;
  justify-content:flex-end;
}

.role-voice-control{
  display:grid;
  grid-template-columns:1fr 42px;
  gap:10px;
  align-items:center;
}

.role-play-btn{
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(129,140,248,.34);
  background:rgba(99,102,241,.18);
  color:#eef2ff;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.role-play-btn svg{
  width:18px;
  height:18px;
}

.role-play-btn:hover{
  background:rgba(99,102,241,.26);
  border-color:rgba(129,140,248,.46);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(79,70,229,.22);
}

.role-volume-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.role-volume-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.role-volume-wrap input[type="range"]{
  width:100%;
  min-width:140px;
  accent-color:#4f46e5;
}

.ra-volume-value{
  min-width:54px;
  text-align:right;
  font-size:12px;
  font-weight:800;
  color:rgba(229,231,235,.92);
}

.role-audio-hint{
  padding:10px 16px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:12px;
  color:rgba(161,161,170,.92);
}

@media (max-width: 767px){
  #roleAnalysisList{
    grid-template-columns:1fr;
  }

  .book-panel-head,
  .chapter-panel-head{
    flex-direction:column;
    align-items:stretch;
  }

  .chapter-project-hint{
    max-width:none;
    width:100%;
  }
}

.voice-config{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.voice-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin:10px 0;
}

.voice-row label{
  width:110px;
  color:rgba(229,231,235,.85);
  font-size:13px;
  font-weight:700;
}

.voice-row select,
.voice-row input{
  flex:1;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:#fff;
  color-scheme:dark;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.voice-row select:focus,
.voice-row input:focus{
  outline:none;
  border-color:rgba(99,102,241,.65);
  box-shadow:0 0 0 3px rgba(99,102,241,.20);
  background:rgba(255,255,255,.04);
}

.voice-row select option,
.voice-row select optgroup{
  background:#0f0f11;
  color:#e5e7eb;
}

.home .btn-secondary{
  min-height:44px;
  padding:0 14px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  color:#e5e7eb;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.home .btn-secondary:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.20);
  transform:translateY(-1px);
  box-shadow:var(--home-glow);
}

.bgm-bar{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  display:none;
}

.bgm-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.bgm-row .label{
  font-size:13px;
  color:#e5e7eb;
  min-width:110px;
  font-weight:800;
}

.bgm-row input[type="range"]{ width:180px; }

#result{ margin-top:16px; }

.line-item{
  margin:12px 0;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.line-item.bgm-item{
  border-left:4px solid rgba(34,211,238,.55);
}

.role{
  font-weight:900;
  color:#c4b5fd;
  letter-spacing:.02em;
}

.text{
  margin:10px 0;
  color:#e5e7eb;
  line-height:1.75;
  font-size:14px;
  white-space:pre-wrap;
}

.meta{
  font-size:12px;
  color:rgba(161,161,170,.92);
}

.loading{
  color:#a78bfa;
  font-style:italic;
  font-size:13px;
}

.job-sidebar{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

@media (min-width: 992px){
  .job-sidebar{
    position:static;
    top:auto;
    min-height:auto;
    max-height:calc(100vh - 24px);
    overflow:hidden;
  }
}

.job-sidebar-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  font-size:13px;
  color:#e5e7eb;
  font-weight:900;
}

.job-sidebar-title-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.job-sidebar-shell{
  position:relative;
}

.job-sidebar-collapse-btn{
  position:absolute;
  left:-20px;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.12);
  border-right:0;
  background:rgba(17,24,39,.62);
  backdrop-filter:blur(10px);
  color:#e5e7eb;
  width:20px;
  height:90px;
  border-radius:999px 0 0 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow:0 16px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
  z-index:5;
}

.job-sidebar-collapse-btn:hover{
  transform:translateY(-50%) translateX(2px);
  background:rgba(17,24,39,.74);
  border-color:rgba(255,255,255,.18);
}

.job-sidebar-collapse-btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px rgba(99,102,241,.18);
}

.job-sidebar-expand-btn{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.12);
  border-right:0;
  background:rgba(17,24,39,.62);
  backdrop-filter:blur(10px);
  color:#e5e7eb;
  width:20px;
  height:90px;
  border-radius:999px 0 0 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow:0 16px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
  z-index:40;
}

.job-sidebar-expand-btn:hover{
  background:rgba(17,24,39,.74);
  border-color:rgba(255,255,255,.18);
}

.job-sidebar-expand-btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px rgba(99,102,241,.18);
}

.job-sidebar-col{
  overflow:visible;
  transition:max-width .28s ease, flex-basis .28s ease, opacity .22s ease, padding .28s ease, max-height .28s ease;
  max-height:2000px;
}

.home-main-col{
  transition:max-width .28s ease, flex-basis .28s ease;
}

.home.is-job-sidebar-collapsed .job-sidebar-expand-btn{
  opacity:1;
  pointer-events:auto;
}

@media (max-width: 991.98px){
  .job-sidebar-collapse-btn,
  .job-sidebar-expand-btn{
    display:none !important;
  }

  .home.is-job-sidebar-collapsed .job-sidebar-col{
    max-height:none;
    opacity:1;
    margin-top:var(--bs-gutter-y, 1.5rem);
    pointer-events:auto;
  }

  .home.is-job-sidebar-collapsed .job-sidebar{
    visibility:visible;
  }
}

@media (min-width: 992px){
  .home.is-job-sidebar-collapsed .job-sidebar-col{
    flex:0 0 0 !important;
    max-width:0 !important;
    opacity:0;
    padding-left:0 !important;
    padding-right:0 !important;
    max-height:0;
  }

  .home.is-job-sidebar-collapsed .job-sidebar{
    visibility:hidden;
  }

  .home.is-job-sidebar-collapsed .home-main-col{
    flex:0 0 100% !important;
    max-width:100% !important;
  }
}

#jobBadge{
  display:none;
  min-width:18px;
  height:18px;
  line-height:18px;
  text-align:center;
  font-size:12px;
  color:#fff;
  background:rgba(244,63,94,.92);
  border-radius:999px;
  padding:0 6px;
}

.job-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.job-filter{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  color:#e5e7eb;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.job-filter:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 0 18px rgba(99,102,241,.10);
}

.job-filter.active{
  border-color:rgba(99,102,241,.45);
  background:rgba(99,102,241,.12);
  color:#ffffff;
}

.job-filter-secondary{
  background:rgba(255,255,255,.04);
  border-style:dashed;
  color:rgba(229,231,235,.92);
}

.job-filter-secondary:hover{
  background:rgba(255,255,255,.07);
}

.job-filter-block{
  width:100%;
  justify-content:center;
  display:inline-flex;
  align-items:center;
}

.job-sidebar-body{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  min-width:0;
}

.job-queue-list{
  min-height:160px;
  width:100%;
  overflow:auto;
  padding-right:4px;
}

.job-queue-list::-webkit-scrollbar{
  width:8px;
}

.job-queue-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);
  border-radius:999px;
}

.job-sidebar-footer{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
}

.job-queue-more-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.job-queue-secondary-wrap{
  min-height:18px;
}

.job-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
  cursor:pointer;
  background:rgba(255,255,255,.015);
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.job-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 0 18px rgba(99,102,241,.10);
}

.job-item.active{
  border-color:rgba(99,102,241,.45);
  box-shadow:0 0 0 3px rgba(99,102,241,.16), 0 18px 40px rgba(0,0,0,.28);
}

.job-queue-list .job-item:last-child{
  margin-bottom:0;
}

.job-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.job-title{
  font-size:13px;
  color:#ffffff;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.job-submeta{
  margin-top:8px;
  display:grid;
  gap:4px;
}

.job-submeta-line{
  font-size:12px;
  line-height:1.55;
  color:rgba(229,231,235,.88);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width: 991.98px){
  .job-sidebar{
    max-height:none;
  }

  .job-queue-list{
    max-height:420px;
  }
}

.job-badge{
  font-size:12px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb;
  background:rgba(255,255,255,.03);
  flex:none;
  font-weight:800;
}

.job-badge.running{ background:rgba(251,146,60,.10); border-color:rgba(251,146,60,.35); color:#fdba74; }
.job-badge.pending{ background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.30); color:#93c5fd; }
.job-badge.success{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.30); color:#6ee7b7; }
.job-badge.failed{ background:rgba(244,63,94,.10); border-color:rgba(244,63,94,.30); color:#fda4af; }

.job-meta{
  margin-top:8px;
  font-size:12px;
  color:rgba(161,161,170,.92);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

#toastBox{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#submitDialog{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.68);
  align-items:center;
  justify-content:center;
  padding:18px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.submit-dialog-inner{
  background:rgba(10,10,12,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  width:min(560px, 92vw);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.55);
  padding:16px;
}

.submit-dialog-title{
  font-weight:900;
  color:#ffffff;
  font-size:14px;
}

#submitDialogText{
  margin-top:10px;
  color:rgba(229,231,235,.9);
  font-size:13px;
  line-height:1.7;
}

.submit-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

@media (max-width: 576px){
  .voice-row label{ width:90px; }
  .bgm-row .label{ min-width:90px; }
  .project-role-row{
    align-items:flex-start;
    flex-direction:column;
  }
}