.container{
  margin:0 auto;max-width:1100px;background:#f9f9f9;
  border-radius:20px;padding:24px;box-shadow:0 5px 10px 3px rgba(0,0,0,.2);
}
.content{background:#fcfcf7;border-radius:12px;padding:20px;margin-top:10px}

/* mode toggle */
.mode-toggle{display:flex;gap:0;border:1px solid #ddd;border-radius:6px;overflow:hidden;margin-bottom:16px;width:fit-content}
.mode-btn{padding:7px 20px;font-size:.82rem;border:none;cursor:pointer;background:#fff;color:#555;font-weight:500;transition:.15s}
.mode-btn.active{background:#6666CC;color:#fff}

/* inputs */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
label{font-size:.75rem;color:#555;display:block;margin-bottom:4px;font-weight:600}
input[type=text]{background:#fff;border:1px solid #ccc;color:#333;border-radius:6px;padding:8px 12px;font-size:.88rem;width:100%}
input:focus{outline:none;border-color:#6666CC}
.url-wrap{flex:1;min-width:200px}
button{padding:8px 18px;border:none;border-radius:6px;font-size:.88rem;cursor:pointer;font-weight:600;transition:.15s}
.btn-primary{background:#6666CC;color:#fff}
.btn-primary:hover{background:#5555aa}
.btn-primary:disabled{background:#ccc;color:#999;cursor:not-allowed}
.btn-sm{background:#fff;border:1px solid #ccc;color:#555;padding:5px 12px;font-size:.78rem;border-radius:6px;cursor:pointer}
.btn-sm:hover{border-color:#6666CC;color:#6666CC}

/* drop zone */
.drop-zone{border:2px dashed #ccc;border-radius:8px;padding:28px;text-align:center;cursor:pointer;transition:.15s;background:#fff}
.drop-zone:hover{border-color:#6666CC}
.drop-zone .icon{font-size:1.8rem;margin-bottom:8px}
.drop-zone p{font-size:.85rem;color:#666}
.drop-zone .hint{font-size:.72rem;color:#999;margin-top:4px}
.file-ok{font-size:.78rem;color:#2e7d32;margin-top:8px;display:none;font-weight:600}

/* progress */
.progress-wrap{margin-top:14px;display:none}
.prog-bg{background:#e0e0e0;border-radius:99px;height:6px;overflow:hidden}
.prog-bar{height:100%;background:linear-gradient(90deg,#6666CC,#6699FF);border-radius:99px;transition:width .3s}
.prog-lbl{font-size:.75rem;color:#666;margin-top:6px}
.log-wrap{margin-top:8px;max-height:70px;overflow-y:auto;display:none;background:#f0f0f0;border-radius:4px;padding:6px}
.log-line{font-size:.7rem;color:#555;font-family:monospace;line-height:1.6}
.log-line.err{color:#c62828}
.log-line.ok{color:#2e7d32}

/* tabs */
.tabs{display:flex;gap:0;border-bottom:2px solid #6666CC;margin:20px 0 16px}
.tab{padding:9px 20px;font-size:.85rem;cursor:pointer;color:#888;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.15s;font-weight:600}
.tab.active{color:#6666CC;border-bottom-color:#6666CC}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* stats */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:10px 18px;text-align:center;min-width:90px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.stat-val{font-size:1.4rem;font-weight:700;color:#6666CC}
.stat-lbl{font-size:.7rem;color:#888;margin-top:2px}

/* error panel */
.err-panel{background:#fff3f3;border:1px solid #ffcdd2;border-radius:8px;padding:14px;margin-bottom:16px;display:none}
.err-panel.show{display:block}
.err-panel-title{font-size:.78rem;color:#c62828;margin-bottom:8px;font-weight:600}
.err-list{list-style:none;max-height:140px;overflow-y:auto}
.err-list li{font-size:.72rem;color:#b71c1c;font-family:monospace;padding:3px 0;border-bottom:1px solid #ffcdd2;word-break:break-all}
.err-note{font-size:.7rem;color:#888;margin-top:8px}

/* table */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.8rem}
th{background:#6666CC;color:#fff;font-weight:600;padding:9px 10px;text-align:left;white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid #eee;vertical-align:top;word-break:break-word;color:#333}
tr:hover td{background:#f5f5ff}
.badge{display:inline-block;padding:2px 6px;border-radius:4px;font-size:.7rem;font-weight:600}
.badge-miss{background:#ffebee;color:#c62828}
.badge-err{background:#ffebee;color:#c62828;font-size:.68rem}
.len-ok{color:#2e7d32}.len-warn{color:#e65100}.len-bad{color:#c62828}
.len-tag{font-size:.68rem;margin-left:3px}
.err-row td{color:#c62828}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.filter-input{background:#fff;border:1px solid #ccc;color:#333;border-radius:6px;padding:5px 10px;font-size:.8rem;width:200px}
.filter-input:focus{outline:none;border-color:#6666CC}
.err-filter{cursor:pointer;font-size:.78rem;color:#666;padding:5px 10px;border:1px solid #ccc;border-radius:6px;background:#fff}
.err-filter.on{border-color:#c62828;color:#c62828;background:#fff3f3}

/* heatmap */
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.hm-card{background:#fff;border-radius:10px;padding:14px 16px;border:1px solid #e0e0e0;cursor:pointer;transition:.15s;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.hm-card:hover{border-color:#6666CC;box-shadow:0 3px 10px rgba(102,102,204,.15)}
.hm-score-bar{height:5px;border-radius:99px;margin:8px 0;background:#eee}
.hm-score-fill{height:100%;border-radius:99px}
.hm-topic{font-size:.88rem;font-weight:700;color:#333;margin-bottom:2px}
.hm-meta{font-size:.72rem;color:#888;margin-bottom:4px}
.hm-pages{font-size:.72rem;color:#555}
.gap-tag{font-size:.7rem;padding:3px 9px;border-radius:99px;margin-top:8px;display:inline-block;font-weight:600}
.gap-high{background:#e8f5e9;color:#2e7d32}
.gap-med{background:#fff8e1;color:#e65100}
.gap-low{background:#ffebee;color:#c62828}
.hm-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.pill{font-size:.68rem;padding:2px 8px;border-radius:99px;background:#ede7f6;color:#5e35b1}
.legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:16px;font-size:.78rem;color:#666}
.leg-dot{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}

/* drawer */
.drawer{display:none;background:#f5f5ff;border:1px solid #c5cae9;border-radius:8px;padding:16px;margin-bottom:16px}
.drawer.open{display:block}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.drawer-title{font-size:.9rem;font-weight:700;color:#333}
.drawer-urls{list-style:none}
.drawer-urls li{font-size:.75rem;padding:4px 0;border-bottom:1px solid #ddd;word-break:break-all}
.close-btn{background:none;border:none;color:#888;cursor:pointer;font-size:1.2rem;line-height:1}
.close-btn:hover{color:#333}

/* AI panel */
.ai-panel{background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:18px;margin-top:16px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.ai-loading{color:#888;font-size:.82rem;display:flex;align-items:center;gap:8px}
.spinner{width:14px;height:14px;border:2px solid #ddd;border-top-color:#6666CC;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-content{font-size:.83rem;color:#333;line-height:1.75;white-space:pre-wrap}
.sug-title{font-size:.82rem;color:#6666CC;font-weight:700;margin-bottom:10px}

.link-opp { background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:14px 16px; margin-bottom:10px; }
.link-opp:hover { border-color:#6666CC; }
.link-opp-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.link-score { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap; }
.link-score-high { background:#e8f5e9; color:#2e7d32; }
.link-score-med  { background:#fff8e1; color:#e65100; }
.link-score-low  { background:#ffebee; color:#c62828; }
.link-urls { font-size:.73rem; color:#888; margin:6px 0 4px; word-break:break-all; }
.link-urls strong { color:#6666CC; }
.link-anchor { display:inline-block; background:#ede7f6; color:#5e35b1; font-size:.75rem; padding:2px 9px; border-radius:4px; font-family:monospace; margin:4px 0; }
.link-reason { font-size:.78rem; color:#555; margin-top:6px; line-height:1.5; }
.link-filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.score-filter-btn { font-size:.75rem; padding:4px 12px; border:1px solid #ccc; border-radius:99px; background:#fff; cursor:pointer; color:#555; }
.score-filter-btn.active { border-color:#6666CC; background:#6666CC; color:#fff; }
/* Lock wrapper */
.lock-wrap {
  position: relative;
  margin-top: 16px;
  min-height: 260px;
}
/* Grey overlay */
.lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(240,240,245,0.93);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  backdrop-filter: blur(3px);
  min-height: 180px;
}
.lock-overlay .lock-icon { font-size: 2.2rem; margin-bottom: 8px; }
.lock-overlay h4 { margin: 0 0 6px; color: #333; font-size: 1rem; }
.lock-overlay p { font-size: .8rem; color: #666; margin: 0 0 14px; text-align: center; max-width: 280px; }
.lock-overlay input[type=password] {
  padding: 8px 12px; border: 1.5px solid #ccc; border-radius: 6px;
  font-size: .88rem; width: 200px; margin-bottom: 8px; font-family: Arial, sans-serif;
}
.lock-overlay input[type=password]:focus { outline: none; border-color: #6666CC; }
.lock-overlay button {
  padding: 8px 22px; background: linear-gradient(135deg,#6699FF,#6666CC);
  color: #fff; border: none; border-radius: 6px; font-size: .85rem;
  font-weight: 700; cursor: pointer; font-family: Arial, sans-serif;
}
.lock-overlay button:hover { opacity: .9; }
.lock-overlay .lock-err { font-size: .78rem; color: #c62828; margin-top: 6px; min-height: 18px; }
.lock-overlay .lock-checking { font-size: .78rem; color: #888; margin-top: 6px; min-height: 18px; }

/* Teaser label */
.teaser-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #6666CC; margin: 0 0 8px 4px;
}
/* -- Teaser cards styled to match real .hm-card -- */
.teaser-hm-grid {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.teaser-hm-card {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
  padding: 14px 16px; width: 180px; cursor: default;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.teaser-hm-topic { font-size: .88rem; font-weight: 700; color: #222; margin-bottom: 4px; }
.teaser-hm-meta  { font-size: .72rem; color: #888; margin-bottom: 8px; }
.teaser-score-bar { background: #eee; border-radius: 99px; height: 5px; margin-bottom: 8px; }
.teaser-score-fill { height: 100%; border-radius: 99px; }
.teaser-gap-tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: 2px 10px; border-radius: 99px;
}
.teaser-gap-low  { background: #ffebee; color: #c62828; border: 1px solid #f44336; }
.teaser-gap-med  { background: #fff8e1; color: #e65100; border: 1px solid #ff9800; }
.teaser-gap-high { background: #e8f5e9; color: #2e7d32; border: 1px solid #4caf50; }

/* -- Teaser linking cards styled to match real .link-opp -- */
.teaser-link-opp {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; max-width: 560px;
}
.teaser-link-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.teaser-link-title { font-size: .82rem; font-weight: 700; color: #333; }
.teaser-link-score {
  font-size: .72rem; font-weight: 700; padding: 2px 9px;
  border-radius: 99px; white-space: nowrap;
}
.teaser-score-high { background: #e8f5e9; color: #2e7d32; }
.teaser-link-urls  { font-size: .75rem; color: #555; margin-bottom: 3px; }
.teaser-link-urls a { color: #6666CC; }
.teaser-anchor {
  display: inline-block; background: #ede7f6; color: #5e35b1;
  font-size: .72rem; padding: 2px 9px; border-radius: 99px; margin: 4px 0;
}
.teaser-reason { font-size: .75rem; color: #666; margin-top: 4px; }