/* Google Fonts removed — using system fonts to avoid network dependency */

/* ─── Tokens ─── */
:root {
  --c-bg:       #F4F5F7;
  --c-sidebar:  #0F1729;
  --c-topbar:   #FFFFFF;
  --c-card:     #FFFFFF;
  --c-ink:      #0F1729;
  --c-muted:    #6B7A90;
  --c-border:   rgba(15,23,41,.08);
  --c-cyan:     #2BBCE0;
  --c-violet:   #7A6CF0;
  --c-pink:     #F4A6C2;
  --c-amber:    #FFAE42;
  --c-green:    #22C55E;
  --c-red:      #EF4444;
  --sidebar-w:  240px;
  --topbar-h:   64px;
  --radius:     12px;
  --shadow:     0 1px 8px rgba(15,23,41,.07),0 2px 20px rgba(15,23,41,.05);
  --shadow-lg:  0 4px 32px rgba(15,23,41,.12);
  font-size: 15px;
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans TC',sans-serif;color:var(--c-ink);background:var(--c-bg);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:14px}
button{cursor:pointer}
img{max-width:100%}

/* ─── Layout ─── */
.app-shell{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);position:fixed;left:0;top:0;bottom:0;
  background:var(--c-sidebar);display:flex;flex-direction:column;
  z-index:200;overflow-y:auto;overflow-x:hidden;
  transition:transform .25s ease;
}
.sidebar-brand{
  padding:20px 16px 16px;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:10px;min-height:var(--topbar-h);
}
.s-sphere{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 180deg,#2BBCE0,#7A6CF0,#F4A6C2,#2BBCE0);
  box-shadow:0 0 12px rgba(122,108,240,.4);
}
.s-brand-text{font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;color:#fff;line-height:1.2}
.s-brand-sub{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.05em;margin-top:1px}
.sidebar-nav{flex:1;padding:12px 0}
.nav-section{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.28);padding:14px 18px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;margin:2px 8px;border-radius:9px;
  color:rgba(255,255,255,.65);font-size:13.5px;font-weight:500;
  transition:background .15s,color .15s;white-space:nowrap;cursor:pointer;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff}
.nav-item .ni{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.nav-badge{
  margin-left:auto;background:var(--c-cyan);color:var(--c-ink);
  font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;
}
.sidebar-footer{
  padding:14px 16px;border-top:1px solid rgba(255,255,255,.07);
}
.sidebar-build-info{
  padding:12px 18px 10px;
  border-top:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.48);
  display:flex;flex-direction:column;gap:4px;
  font-size:11px;line-height:1.35;font-weight:600;
}
.sidebar-build-info a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
}
.sidebar-build-info a:hover{
  color:#fff;
  text-decoration:underline;
}
.s-user{display:flex;align-items:center;gap:9px}
.s-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-cyan),var(--c-violet));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#fff;flex-shrink:0;
}
.s-user-name{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.8)}
.s-user-role{font-size:11px;color:rgba(255,255,255,.32)}
.btn-logout{
  margin-left:auto;background:none;border:none;
  color:rgba(255,255,255,.52);font-size:12px;font-weight:700;padding:4px 0 4px 8px;
  transition:color .15s;
}
.btn-logout:hover{color:rgba(255,255,255,.7)}

/* Main */
.main-wrap{
  margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;
  min-width:0;
}

/* Topbar */
.topbar{
  height:var(--topbar-h);background:var(--c-topbar);
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;padding:0 28px;gap:16px;
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 0 var(--c-border);
}
.topbar-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-muted)}
.topbar-breadcrumb .sep{opacity:.4}
.topbar-title{font-size:17px;font-weight:900;color:var(--c-ink);margin-left:4px}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Page body */
.page-body{padding:24px 28px;width:100%}

/* ─── Cards ─── */
.card{background:var(--c-card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--c-border)}
.card-header{
  padding:16px 20px;border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.card-title{font-size:15px;font-weight:700}
.card-body{padding:20px}
.card-footer{padding:14px 20px;border-top:1px solid var(--c-border);background:#fafafa;border-radius:0 0 var(--radius) var(--radius)}

/* ─── Stats Grid ─── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--c-card);border-radius:var(--radius);border:1px solid var(--c-border);
  padding:20px;box-shadow:var(--shadow);
}
.stat-label{font-size:12px;color:var(--c-muted);font-weight:600;margin-bottom:10px;letter-spacing:.02em}
.stat-value{font-family:'Outfit',sans-serif;font-size:30px;font-weight:700;line-height:1}
.stat-value.cyan{color:var(--c-cyan)}
.stat-value.violet{color:var(--c-violet)}
.stat-value.amber{color:var(--c-amber)}
.stat-value.green{color:var(--c-green)}
.stat-value.pink{color:var(--c-pink)}
.stat-sub{font-size:12px;color:var(--c-muted);margin-top:6px}
.stat-icon{font-size:20px;margin-bottom:8px;opacity:.7}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:100px;font-size:13.5px;font-weight:600;
  border:none;white-space:nowrap;transition:all .15s;cursor:pointer;
}
.btn-xs{padding:5px 12px;font-size:12px}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-lg{padding:12px 26px;font-size:15px}
.btn-primary{background:var(--c-ink);color:#fff}
.btn-primary:hover{opacity:.85;transform:translateY(-1px)}
.btn-gradient{background:linear-gradient(135deg,var(--c-cyan),var(--c-violet));color:#fff;font-weight:700}
.btn-gradient:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 16px rgba(122,108,240,.35)}
.btn-outline{background:transparent;color:var(--c-ink);border:1.5px solid rgba(15,23,41,.18)}
.btn-outline:hover{border-color:var(--c-violet);color:var(--c-violet)}
.btn-ghost{background:transparent;color:var(--c-muted);border:none}
.btn-ghost:hover{background:rgba(15,23,41,.05);color:var(--c-ink)}
.btn-success{background:rgba(34,197,94,.1);color:#16a34a}
.btn-success:hover{background:rgba(34,197,94,.2)}
.btn-danger{background:rgba(239,68,68,.1);color:#dc2626}
.btn-danger:hover{background:rgba(239,68,68,.18)}
.btn-amber{background:rgba(255,174,66,.15);color:#b45309}
.btn-amber:hover{background:rgba(255,174,66,.25)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}

/* ─── Forms ─── */
.form-grid{display:grid;gap:16px}
.form-2{grid-template-columns:1fr 1fr}
.form-3{grid-template-columns:1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--c-ink)}
.field .hint{font-size:11px;color:var(--c-muted)}
.field input,.field textarea,.field select{
  padding:10px 13px;border-radius:9px;border:1.5px solid rgba(15,23,41,.12);
  background:var(--c-bg);font-size:14px;outline:none;width:100%;
  transition:border-color .18s,box-shadow .18s;color:var(--c-ink);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--c-violet);box-shadow:0 0 0 3px rgba(122,108,240,.12);background:#fff;
}
.field textarea{resize:vertical;min-height:80px;line-height:1.6}
.required{color:var(--c-pink)}

/* Platform chips */
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border-radius:20px;border:1.5px solid rgba(15,23,41,.12);
  cursor:pointer;font-size:13px;font-weight:600;
  transition:all .15s;user-select:none;color:var(--c-muted);
}
.chip input{display:none}
.chip.active-ig{background:rgba(240,100,171,.12);border-color:#f064ab;color:#c03d88}
.chip.active-fb{background:rgba(24,119,242,.12);border-color:#1877f2;color:#1877f2}
.chip.active-line{background:rgba(0,185,0,.1);border-color:#00b900;color:#00a000}
.chip.active-seo{background:rgba(255,174,66,.15);border-color:var(--c-amber);color:#b45309}
.chip.active-ad{background:rgba(122,108,240,.12);border-color:var(--c-violet);color:var(--c-violet)}
.chip.active{background:rgba(15,23,41,.08);border-color:var(--c-ink);color:var(--c-ink)}

/* ─── Status Badges ─── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.badge-draft{background:rgba(107,122,144,.1);color:var(--c-muted)}
.badge-approved{background:rgba(34,197,94,.1);color:#16a34a}
.badge-generating{background:rgba(255,174,66,.15);color:#b45309}
.badge-error{background:rgba(239,68,68,.1);color:#dc2626}
.badge-completed{background:rgba(43,188,224,.1);color:#0e85a6}

/* ─── Tables ─── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;padding:11px 14px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);
  border-bottom:1px solid var(--c-border);white-space:nowrap;
}
tbody td{padding:13px 14px;font-size:13.5px;border-bottom:1px solid var(--c-border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--c-bg)}

/* ─── Output Cards ─── */
.output-card{border-radius:12px;border:1.5px solid var(--c-border);overflow:hidden;background:var(--c-card);margin-bottom:16px}
.output-header{
  padding:11px 16px;background:var(--c-bg);border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;gap:10px;
}
.output-body{padding:16px}
.output-text{font-size:14px;line-height:1.8;white-space:pre-wrap;color:var(--c-ink)}
.hashtag-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.htag{font-size:12px;padding:3px 9px;border-radius:20px;background:rgba(122,108,240,.1);color:var(--c-violet);font-weight:600}
.output-actions{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--c-border)}

/* ─── Storyboard ─── */
.scene-list{display:flex;flex-direction:column;gap:10px}
.scene{border-radius:10px;border:1px solid var(--c-border);overflow:hidden}
.scene-head{
  padding:9px 14px;background:var(--c-bg);
  display:flex;align-items:center;gap:10px;font-size:13px;
  border-bottom:1px solid var(--c-border);
}
.scene-num{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-cyan),var(--c-violet));
  color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.scene-time{font-family:'Outfit',sans-serif;font-size:12px;color:var(--c-muted);font-weight:600}
.scene-body{padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scene-field label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);display:block;margin-bottom:4px}
.scene-field p{font-size:13px;line-height:1.6}
.prompt-block{
  background:#0F1729;border-radius:10px;padding:14px 16px;
  font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.85);
  font-family:'Outfit',monospace;white-space:pre-wrap;
}

/* ─── Calendar ─── */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-header{grid-column:span 7;display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.cal-day-header{text-align:center;font-size:11px;font-weight:700;color:var(--c-muted);padding:6px 0}
.cal-cell{
  min-height:80px;border-radius:8px;padding:6px 8px;
  background:rgba(255,255,255,.6);border:1px solid var(--c-border);
  font-size:12px;cursor:pointer;transition:background .15s;
  position:relative;
}
.cal-cell:hover{background:#fff;box-shadow:var(--shadow)}
.cal-cell.today{border-color:var(--c-violet);background:rgba(122,108,240,.04)}
.cal-cell.has-event{border-color:var(--c-cyan)}
.cal-date{font-weight:700;font-size:13px;margin-bottom:4px}
.cal-event-dot{
  display:inline-block;padding:2px 6px;border-radius:4px;font-size:10px;
  background:linear-gradient(135deg,var(--c-cyan),var(--c-violet));color:#fff;
  font-weight:700;margin-top:2px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ─── Tabs ─── */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--c-border);margin-bottom:20px}
.tab{
  padding:10px 18px;font-size:13.5px;font-weight:600;color:var(--c-muted);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:color .15s,border-color .15s;
}
.tab.active{color:var(--c-violet);border-bottom-color:var(--c-violet)}
.tab:hover:not(.active){color:var(--c-ink)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ─── Alerts ─── */
.alert{padding:12px 16px;border-radius:10px;font-size:13.5px;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px}
.alert-info{background:rgba(43,188,224,.1);border:1px solid rgba(43,188,224,.3);color:#0e85a6}
.alert-warn{background:rgba(255,174,66,.12);border:1px solid rgba(255,174,66,.3);color:#b45309}
.alert-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#dc2626}
.alert-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);color:#16a34a}

/* ─── Empty state ─── */
.empty{text-align:center;padding:56px 24px;color:var(--c-muted)}
.empty-icon{font-size:44px;opacity:.3;margin-bottom:14px}
.empty p{font-size:14px;margin-bottom:18px}

/* ─── Toast ─── */
.toast-container{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:7px}
.toast{
  padding:11px 16px;border-radius:10px;font-size:13.5px;font-weight:600;
  box-shadow:0 4px 20px rgba(0,0,0,.12);min-width:240px;max-width:320px;
  animation:slideUp .22s ease;
}
.toast-success{background:#fff;border-left:4px solid var(--c-green)}
.toast-error{background:#fff;border-left:4px solid var(--c-red)}
.toast-info{background:#fff;border-left:4px solid var(--c-violet)}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ─── Loading overlay ─── */
.loading-overlay{
  position:fixed;inset:0;background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px);z-index:9000;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.loading-overlay.show{display:flex}
.spinner{
  width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(122,108,240,.15);border-top-color:var(--c-violet);
  animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:14px;font-weight:600;color:var(--c-muted)}

/* ─── Modal ─── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,41,.5);z-index:8000;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-backdrop.show{display:flex}
.modal{
  background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);
  width:100%;max-width:600px;max-height:90vh;overflow-y:auto;
}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:16px;font-weight:700}
.modal-close{background:none;border:none;font-size:18px;color:var(--c-muted);cursor:pointer}
.modal-body{padding:22px}
.modal-footer{padding:14px 22px;border-top:1px solid var(--c-border);display:flex;justify-content:flex-end;gap:8px}

/* ─── Image preview ─── */
.img-preview{border-radius:10px;overflow:hidden;background:var(--c-bg);border:1px solid var(--c-border);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.img-preview img{width:100%;height:100%;object-fit:cover}
.img-placeholder{font-size:40px;opacity:.2}

/* ─── Text gradient ─── */
.text-gradient{background:linear-gradient(135deg,var(--c-cyan),var(--c-violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ─── Utility ─── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.flex{display:flex}.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-gap{display:flex;align-items:center;gap:10px}
.flex-wrap{flex-wrap:wrap}
.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}
.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.text-muted{color:var(--c-muted)}.text-sm{font-size:13px}
.w-full{width:100%}
.divider{height:1px;background:var(--c-border);margin:16px 0}

/* App maker links */
.line-float-btn{
  position:fixed;right:18px;bottom:16px;z-index:150;
  display:flex;align-items:center;justify-content:center;
  padding:8px 10px;border:1px solid rgba(15,23,41,.08);
  border-radius:10px;background:rgba(255,255,255,.94);
  box-shadow:0 4px 18px rgba(15,23,41,.10);
  backdrop-filter:blur(8px);
  transition:transform .18s ease,box-shadow .18s ease;
}
.line-float-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(15,23,41,.16);
}
.line-float-btn img{
  height:30px;width:auto;display:block;object-fit:contain;
}

/* ─── Sidebar toggle (mobile) ─── */
.sidebar-toggle{
  display:none;background:none;border:none;font-size:20px;
  color:var(--c-ink);cursor:pointer;padding:4px;
}

/* ─── RWD ─── */
@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.form-2,.form-3{grid-template-columns:1fr}.grid-2,.grid-3{grid-template-columns:1fr}}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-wrap{margin-left:0}
  .sidebar-toggle{display:block}
  .topbar{padding:0 16px}
  .page-body{padding:16px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .calendar-grid{grid-template-columns:1fr 1fr 1fr 1fr}
  .scene-body{grid-template-columns:1fr}
  .line-float-btn{right:10px;bottom:10px;padding:6px 8px}
  .line-float-btn img{height:22px}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .calendar-grid{grid-template-columns:1fr 1fr}
}