/* ==========================================================================
   YOUTUBE SEO STUDIO — STYLES
   Extends global design tokens from assets/css/style.css
   ========================================================================== */

.breadcrumb{padding:14px 0; font-size:13px; color:var(--muted);}
.breadcrumb ol{display:flex; gap:6px; flex-wrap:wrap;}
.breadcrumb li:not(:last-child)::after{content:"›"; margin-left:6px; color:var(--muted);}
.breadcrumb a{color:var(--teal); font-weight:600;}
.breadcrumb li[aria-current]{color:var(--text); font-weight:600;}

/* ---------------- Hero ---------------- */
.ys-hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; padding:56px 0 44px; text-align:center; margin-bottom:40px;
}
.ys-hero h1{color:#fff; font-size:clamp(28px,4vw,40px);}
.ys-hero p{color:#CFE0F5; max-width:600px; margin:0 auto 24px; font-size:16.5px;}
.ys-hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:22px;}
.ys-disclaimer{
  max-width:720px; margin:0 auto; font-size:12.5px; color:#FFE1A8;
  background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.3);
  padding:10px 16px; border-radius:10px;
}

/* ---------------- Shared Panel ---------------- */
.ys-panel{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); margin-bottom:24px;
}
.ys-panel h3{font-size:17px; margin-bottom:10px;}
.ys-panel-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:6px;}
.ys-panel-head h3{margin-bottom:0;}
.ys-demo-badge{
  background:rgba(255,176,32,.12); color:#B8860B; border:1px solid rgba(255,176,32,.35);
  font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.ys-hint{font-size:13px; color:var(--muted); margin-bottom:16px;}
.ys-error-msg{color:#E4572E; font-weight:600; font-size:13.5px; margin-top:10px;}

.ys-panel label{display:block; font-size:13.5px; font-weight:600; margin:14px 0 6px; color:var(--text);}
.ys-panel input, .ys-panel select, .ys-panel textarea{
  width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14.5px; font-family:inherit;
}
.ys-panel textarea{resize:vertical;}

/* ---------------- Topic Panel ---------------- */
.ys-topic-panel{background:linear-gradient(180deg, var(--card), rgba(18,165,148,.03));}
.ys-topic-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.ys-topic-grid label{margin-top:0;}

/* ---------------- Dashboard Grid ---------------- */
.ys-dash-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.ys-dash-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:22px; box-shadow:var(--shadow); transition:.2s;
}
.ys-dash-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:var(--teal);}
.ys-dash-icon{font-size:28px; margin-bottom:10px;}
.ys-dash-card h3{font-size:15px; margin-bottom:4px;}
.ys-dash-card p{font-size:13px; margin:0;}

/* ---------------- Chips / result groups ---------------- */
.ys-result-groups{margin-top:20px; display:grid; gap:18px;}
.ys-result-group h4{font-size:14px; margin-bottom:10px; color:var(--navy);}
[data-theme="dark"] .ys-result-group h4{color:var(--amber);}
.ys-chip-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px;}
.ys-chip-list li{
  background:var(--bg); border:1px solid var(--border); border-radius:999px;
  padding:7px 14px; font-size:13px; font-weight:500; cursor:pointer; transition:.15s;
  display:flex; align-items:center; gap:6px;
}
.ys-chip-list li:hover{border-color:var(--teal); color:var(--teal);}
.ys-chip-list li::after{content:"⧉"; font-size:11px; opacity:.5;}
.ys-hashtag-list li{background:rgba(18,165,148,.08);}

.ys-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}

/* ---------------- Titles ---------------- */
.ys-title-list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px;}
.ys-title-list li{
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14.5px;
}
.ys-title-list .ys-title-len{font-size:11.5px; color:var(--muted); white-space:nowrap;}
.ys-title-list button{
  background:none; border:1px solid var(--border); border-radius:7px; padding:5px 10px;
  font-size:12px; font-weight:600; color:var(--teal); white-space:nowrap;
}

/* ---------------- Description Tabs ---------------- */
.ys-desc-tabs{display:flex; gap:8px; margin-bottom:14px;}
.ys-tab-btn{
  background:var(--bg); border:1.5px solid var(--border); color:var(--muted);
  padding:8px 16px; border-radius:9px; font-weight:600; font-size:13.5px; transition:.15s;
}
.ys-tab-btn.active{background:var(--teal); border-color:var(--teal); color:#fff;}

/* ---------------- Filter Row (hashtags) ---------------- */
.ys-filter-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.ys-filter-btn{
  background:var(--bg); border:1.5px solid var(--border); color:var(--muted);
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; transition:.15s;
}
.ys-filter-btn.active{background:var(--navy); border-color:var(--navy); color:#fff;}

/* ---------------- Char Count ---------------- */
.ys-char-count{font-size:13px; color:var(--muted); margin-top:8px;}
.ys-char-count.warn{color:#E4572E; font-weight:700;}

/* ---------------- SEO Score Card ---------------- */
.ys-score-card{
  display:flex; gap:26px; align-items:center; margin-top:24px; padding-top:22px;
  border-top:1px solid var(--border); flex-wrap:wrap;
}
.ys-score-circle{
  width:110px; height:110px; border-radius:50%; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:conic-gradient(var(--teal) 0deg, var(--border) 0deg);
  position:relative;
}
.ys-score-circle::before{
  content:""; position:absolute; inset:8px; background:var(--card); border-radius:50%;
}
.ys-score-circle span, .ys-score-circle small{position:relative; z-index:1;}
.ys-score-circle span{font-size:28px; font-weight:800; color:var(--text);}
.ys-score-circle small{font-size:12px; color:var(--muted);}
.ys-score-label{font-weight:700; font-size:15px; margin-bottom:10px;}
.ys-recommend-list{list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:13.5px; color:var(--muted);}
.ys-recommend-list li::before{content:"→ "; color:var(--teal); font-weight:700;}

/* ---------------- Character Counter Bars ---------------- */
.ys-counter-grid{display:grid; gap:18px;}
.ys-counter-item{display:grid; grid-template-columns:110px 1fr 90px; align-items:center; gap:14px; font-size:13.5px;}
.ys-counter-bar{height:8px; background:var(--border); border-radius:6px; overflow:hidden;}
.ys-counter-fill{height:100%; width:0%; background:var(--teal); transition:width .2s, background .2s;}
.ys-counter-fill.warn{background:#E4572E;}
.ys-counter-item strong{text-align:right; color:var(--text);}

/* ---------------- Checklists ---------------- */
.ys-checklist{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.ys-checklist label{
  display:flex !important; align-items:center; gap:10px; font-weight:500 !important; font-size:14px !important;
  margin:0 !important; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--bg);
  cursor:pointer;
}
.ys-checklist input{width:auto !important;}
.ys-progress-row{display:flex; align-items:center; gap:14px;}
.ys-progress-row .ys-counter-bar{flex:1;}
.ys-progress-row span{font-size:13px; color:var(--muted); white-space:nowrap;}

.ys-status-msg{margin-top:14px; font-size:13.5px; font-weight:600; min-height:18px;}
.ys-status-msg.ok{color:var(--teal);}
.ys-status-msg.err{color:#E4572E;}

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .ys-topic-grid, .ys-dash-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .ys-topic-grid, .ys-dash-grid, .ys-checklist{grid-template-columns:1fr;}
  .ys-counter-item{grid-template-columns:80px 1fr 70px;}
  .ys-score-card{flex-direction:column; text-align:center;}
}