/* ============ SETARA - Pantau Page Styles ============ */

.hidden{ display:none !important; }

/* ---------- Hero ---------- */
.pantau-hero{ background:linear-gradient(180deg, #F0F7FD 0%, #F6FAFD 50%, #FAFCFF 100%); padding:40px 0 64px; border-bottom:1px solid #F1F5F9; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:#64748B; margin-bottom:24px; }
.breadcrumb a{ color:#64748B; }
.breadcrumb a:hover{ color:#001B3A; }
.breadcrumb svg{ width:14px; height:14px; color:#94A3B8; }
.breadcrumb .current{ color:#001B3A; font-weight:600; }

.pantau-hero .hero-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; width:100%; }
@media (min-width:1024px){
  .pantau-hero .hero-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
}

.badge-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(219,234,254,.7); border:1px solid #BFDBFE; color:#1E40AF; font-size:12px; font-weight:500; margin-bottom:16px; }
.badge-pill .dot{ width:8px; height:8px; border-radius:999px; background:#2563EB; }

.pantau-hero h1{ font-size:26px; font-weight:700; color:#001B3A; letter-spacing:-.02em; line-height:1.25; margin-bottom:16px; }
@media (min-width:640px){ .pantau-hero h1{ font-size:32px; } }
.pantau-hero .hero-grid p{ color:#475569; font-size:16px; line-height:1.6; margin-bottom:24px; max-width:520px; }

.trust-badges{ display:flex; flex-wrap:wrap; gap:16px; font-size:12px; font-weight:500; color:#475569; }
.trust-badges span{ display:inline-flex; align-items:center; gap:6px; background:#fff; padding:6px 12px; border-radius:8px; border:1px solid #E2E8F0; }
.trust-badges .ic{ width:16px; height:16px; color:#059669; }

/* Kartu mock: rapat ke kanan, sejajar dengan tombol profil di navbar */
.hero-mock{ display:none; }
@media (min-width:1024px){
  .pantau-hero .hero-mock{ display:flex; justify-content:flex-end; }
}
.mock-card{
  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:448px;
  margin:0 0 0 auto;
  background:linear-gradient(to top right,#fff,#EFF6FF80);
  padding:24px;
  border-radius:24px;
  border:1px solid #DBEAFE;
  box-shadow:0 20px 25px -5px rgba(30,64,175,.05);
}
.mock-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid #F1F5F9; margin-bottom:16px; }
.mock-head .dots{ display:flex; align-items:center; gap:8px; }
.mock-head .dots span{ width:12px; height:12px; border-radius:999px; display:block; }
.mock-head .dots .r{ background:#F87171; } .mock-head .dots .a{ background:#FBBF24; } .mock-head .dots .g{ background:#34D399; }
.mock-head .mono{ font-size:11px; font-family:monospace; color:#94A3B8; }
.mock-body{ display:flex; flex-direction:column; gap:12px; }
.mock-row{ background:#fff; padding:14px; border-radius:12px; border:1px solid #F1F5F9; display:flex; align-items:center; justify-content:space-between; }
.mock-row .left{ display:flex; align-items:center; gap:12px; min-width:0; }
.mock-row .ic-box{ padding:8px; background:#EFF6FF; color:#1D4ED8; border-radius:8px; }
.mock-row .ticket{ font-size:12px; font-weight:600; color:#1E293B; }
.mock-row .sub{ font-size:11px; color:#64748B; }
.pill-blue{ display:inline-flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap; flex-shrink:0; margin-left:8px; font-size:10px; font-weight:600; line-height:1.2; background:#DBEAFE; color:#1E40AF; padding:4px 10px; border-radius:999px; }
.mock-note{ background:#F8FAFC; padding:12px; border-radius:12px; border:1px solid #F1F5F9; display:flex; align-items:center; gap:10px; }
.mock-note svg{ width:16px; height:16px; color:#059669; flex-shrink:0; }
.mock-note span{ font-size:12px; color:#475569; }
.mock-eta{ background:rgba(30,58,138,.05); padding:12px; border-radius:12px; border:1px solid rgba(30,58,138,.1); display:flex; align-items:center; justify-content:space-between; }
.mock-eta span{ font-size:12px; font-weight:500; color:#172554; }
.mock-eta .val{ font-weight:700; color:#001B3A; }
.mock-foot{ margin-top:16px; padding-top:12px; border-top:1px solid #F1F5F9; text-align:center; font-size:11px; color:#64748B; }

/* ---------- Search Card ---------- */
.pantau-search-wrap{ position:relative; margin-top:-48px; z-index:20; padding-bottom:48px; }
.pantau-search-card{ background:#fff; border-radius:16px; box-shadow:0 20px 25px -5px rgba(15,23,42,.05); border:1px solid #E2E8F0CC; padding:24px; }
@media (min-width:640px){ .pantau-search-card{ padding:32px; } }
.pantau-search-card .head h2{ font-size:22px; font-weight:600; color:#001B3A; letter-spacing:-.02em; }
.pantau-search-card .head p{ font-size:13px; color:#475569; margin-top:4px; margin-bottom:24px; }

.form-grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:end; }
@media (min-width:768px){ .form-grid{ grid-template-columns:repeat(12,1fr); } .field-ticket{ grid-column:span 7; } .field-verify{ grid-column:span 5; } }

.field label{ display:block; font-size:11px; font-weight:600; color:#334155; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.field .req{ color:#EF4444; }
.field .optional{ color:#94A3B8; font-size:11px; text-transform:lowercase; font-weight:400; margin-left:4px; }

.input-icon{ position:relative; }
.input-icon svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#94A3B8; pointer-events:none; }
.input-icon input{ width:100%; padding:14px 16px 14px 44px; background:#F8FAFC; border:1px solid #CBD5E1; border-radius:12px; font-size:14px; font-weight:500; color:#0F172A; }
.input-icon input:focus{ outline:none; border-color:#001B3A; box-shadow:0 0 0 2px #001B3A33; background:#fff; }

.field-verify input{ width:100%; padding:14px 16px; background:#F8FAFC; border:1px solid #CBD5E1; border-radius:12px; font-size:14px; color:#0F172A; }
.field-verify input:focus{ outline:none; border-color:#001B3A; box-shadow:0 0 0 2px #001B3A33; background:#fff; }

.form-actions{ display:flex; flex-direction:column; gap:16px; justify-content:space-between; padding-top:8px; }
@media (min-width:640px){ .form-actions{ flex-direction:row; align-items:center; } }

.help-trigger{ position:relative; }
.help-trigger > button{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#0284C7; font-weight:500; }
.help-trigger > button:hover{ color:#1E40AF; }
.help-trigger svg{ width:16px; height:16px; }
.tooltip-box{ position:absolute; left:0; bottom:100%; margin-bottom:8px; width:320px; padding:14px; background:#0F172A; color:#fff; font-size:12px; border-radius:12px; box-shadow:0 20px 25px -5px rgba(0,0,0,.25); z-index:30; }
.tooltip-box .tt-title{ font-weight:600; margin-bottom:4px; color:#F1F5F9; display:flex; align-items:center; gap:6px; }
.tooltip-box .tt-title svg{ width:16px; height:16px; color:#38BDF8; }
.tooltip-box p{ color:#CBD5E1; line-height:1.6; }
.tooltip-box code{ color:#FCD34D; background:#1E293B; padding:2px 4px; border-radius:4px; }

.btn-submit{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#001B3A; color:#fff; font-weight:500; padding:14px 32px; border-radius:12px; box-shadow:0 4px 6px -1px rgba(2,8,23,.2); font-size:14px; }
.btn-submit:hover{ background:#0D294D; }
.btn-submit svg{ width:20px; height:20px; }

/* ---------- Demo tabs ---------- */
.demo-tabs-wrap{ margin-bottom:24px; }
.demo-tabs{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:6px; background:#E2E8F0B3; border-radius:12px; font-size:12px; font-weight:500; }
.demo-tabs .label{ padding:0 12px; color:#64748B; display:none; }
@media (min-width:640px){ .demo-tabs .label{ display:inline; } }
.demo-tabs .btns{ display:flex; flex-wrap:wrap; gap:6px; }
.state-tab-btn{ padding:6px 14px; border-radius:8px; color:#475569; }
.state-tab-btn:hover{ color:#0F172A; }
.state-tab-btn.active{ background:#fff; color:#001B3A; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.05); }

/* ---------- Result section ---------- */
.result-section{ padding-bottom:64px; }
.result-card{ background:#fff; border-radius:16px; border:1px solid #E2E8F0; box-shadow:0 4px 6px -1px rgba(15,23,42,.05); overflow:hidden; }

/* Banner penanda kartu contoh (tamu sebelum mengisi form) */
.sample-banner{ display:flex; align-items:center; gap:10px; padding:12px 24px; background:#EFF6FF; border-bottom:1px solid #BFDBFE; color:#1E40AF; font-size:12px; line-height:1.5; }
@media (min-width:640px){ .sample-banner{ padding:12px 32px; } }
.sample-banner svg{ width:16px; height:16px; flex-shrink:0; }

.result-header{ padding:24px; background:linear-gradient(to right,#F8FAFC,#fff); border-bottom:1px solid #F1F5F9; }
@media (min-width:640px){ .result-header{ padding:32px; } }
.rh-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.ticket-row{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.ticket-code{ font-size:12px; font-family:monospace; font-weight:700; background:#001B3A; color:#fff; padding:4px 10px; border-radius:6px; letter-spacing:.05em; }
.copy-btn{ font-size:12px; color:#0284C7; display:inline-flex; align-items:center; gap:4px; font-weight:500; }
.copy-btn:hover{ text-decoration:underline; }
.copy-btn svg{ width:14px; height:14px; }
.rh-top h3{ font-size:20px; font-weight:600; color:#0F172A; }

.status-pill{ display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; font-size:12px; font-weight:600; padding:8px 14px; border-radius:999px; }
.status-blue{ background:#EFF6FF; border:1px solid #BFDBFE; color:#1E40AF; }
.status-pill .pulse{ height:10px; width:10px; border-radius:999px; background:#2563EB; animation:pulse-dot 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.15);} }

.rh-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px; padding-top:24px; border-top:1px solid #E2E8F0B3; font-size:12px; }
@media (min-width:640px){ .rh-meta{ grid-template-columns:repeat(4,1fr); } }
.rh-meta .lbl{ color:#64748B; display:block; }
.rh-meta strong{ color:#1E293B; font-weight:600; font-size:14px; }
.rh-meta .c-blue{ color:#1E3A8A; }
.rh-meta .c-green{ color:#047857; }

.stepper-wrap{ padding:32px 24px; border-bottom:1px solid #F1F5F9; }
@media (min-width:640px){ .stepper-wrap{ padding:32px; } }
.stepper-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94A3B8; margin-bottom:24px; }
.stepper{ position:relative; }
.stepper-line{ display:none; position:absolute; top:20px; left:32px; right:32px; height:4px; background:#E2E8F0; z-index:0; }
@media (min-width:640px){ .stepper-line{ display:block; } }
.stepper-line .fill{ height:4px; background:#2563EB; width:66%; }
.stepper-grid{ display:grid; grid-template-columns:1fr; gap:24px; position:relative; z-index:10; }
@media (min-width:640px){ .stepper-grid{ grid-template-columns:repeat(4,1fr); } }
.step{ display:flex; align-items:center; gap:14px; text-align:left; }
@media (min-width:640px){ .step{ flex-direction:column; text-align:center; gap:8px; } }
.step.pending{ opacity:.6; }
.circle{ width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.circle.done{ background:#10B981; color:#fff; box-shadow:0 0 0 4px #ECFDF5; }
.circle.done svg{ width:20px; height:20px; }
.circle.active{ background:#001B3A; color:#fff; box-shadow:0 0 0 4px #DBEAFE; }
.circle.pending{ background:#F1F5F9; border:1px solid #CBD5E1; color:#94A3B8; }
.step .t{ font-size:12px; font-weight:600; color:#0F172A; }
.step .t.active{ color:#001B3A; font-weight:700; }
.step .t.pending{ color:#475569; font-weight:500; }
.step .d{ font-size:11px; color:#64748B; }
.step .tag{ display:inline-block; margin-top:4px; padding:2px 8px; background:#DBEAFE; color:#1E40AF; font-size:10px; font-weight:600; border-radius:999px; }

.timeline-wrap{ padding:24px; background:#F8FAFC80; }
@media (min-width:640px){ .timeline-wrap{ padding:32px; } }
.timeline-wrap h4{ font-size:16px; font-weight:600; color:#0F172A; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.timeline-wrap h4 svg{ width:16px; height:16px; color:#001B3A; }
.timeline{ position:relative; border-left:1px solid #CBD5E1; margin-left:12px; display:flex; flex-direction:column; gap:24px; }
.timeline li{ position:relative; margin-left:24px; list-style:none; }
.timeline .dot{ position:absolute; left:-36px; top:0; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; box-shadow:0 0 0 4px #fff; color:#fff; }
.timeline .dot.blue{ background:#2563EB; }
.timeline .dot.blue span{ width:8px; height:8px; border-radius:999px; background:#fff; }
.timeline .dot.green{ background:#10B981; }
.timeline .dot.green svg{ width:14px; height:14px; }
.timeline .meta{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.timeline .meta span:first-child{ font-size:12px; font-weight:600; color:#1E3A8A; }
.timeline .meta-single{ font-size:12px; font-weight:600; color:#334155; display:block; margin-bottom:4px; }
.badge{ font-size:10px; padding:2px 8px; border-radius:4px; font-weight:500; }
.badge.blue{ background:#DBEAFE; color:#1E40AF; }
.badge.green{ background:#D1FAE5; color:#065F46; }
.timeline h5{ font-size:12px; font-weight:700; color:#0F172A; }
.timeline p{ font-size:12px; color:#475569; margin-top:4px; line-height:1.6; }

.privacy-banner{ padding:16px 24px; background:#F1F5F9; border-top:1px solid #E2E8F0CC; display:flex; flex-direction:column; gap:12px; font-size:12px; color:#475569; }
@media (min-width:640px){ .privacy-banner{ flex-direction:row; align-items:center; justify-content:space-between; padding:16px 32px; } }
.privacy-banner .left{ display:flex; align-items:center; gap:8px; }
.privacy-banner svg{ width:16px; height:16px; color:#64748B; flex-shrink:0; }
.privacy-banner .masked{ font-family:monospace; background:#fff; padding:2px 6px; border-radius:4px; border:1px solid #E2E8F0; }
.privacy-banner .right{ color:#64748B; font-size:11px; }

/* ---------- Alt state cards ---------- */
.state-amber{ border-color:#FCD34D; }
.state-emerald{ border-color:#A7F3D0; }
.result-header-alt{ padding:24px; display:flex; align-items:center; justify-content:space-between; color:#fff; }
.result-header-alt.amber{ background:#F59E0B; }
.result-header-alt.emerald{ background:#059669; }
.result-header-alt .left{ display:flex; align-items:center; gap:12px; }
.result-header-alt .icon-box{ padding:8px; background:rgba(255,255,255,.2); border-radius:8px; }
.result-header-alt .icon-box svg{ width:24px; height:24px; }
.result-header-alt .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; opacity:.9; display:block; }
.result-header-alt h3{ font-size:16px; font-weight:600; }
.mono-pill{ font-size:11px; background:rgba(0,0,0,.2); padding:4px 12px; border-radius:999px; font-family:monospace; }

.result-body-alt{ padding:24px; }
@media (min-width:640px){ .result-body-alt{ padding:32px; } }
.note-box{ padding:16px; border-radius:12px; font-size:14px; }
.note-box.amber{ background:#FFFBEB; border:1px solid #FDE68A; color:#78350F; }
.note-box p{ margin-top:4px; font-size:12px; line-height:1.6; }
.btn-row{ display:flex; flex-direction:column; gap:12px; padding-top:8px; }
@media (min-width:640px){ .btn-row{ flex-direction:row; } }
.btn-row.center{ flex-wrap:wrap; justify-content:center; }
.btn-dark{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#001B3A; color:#fff; padding:10px 24px; border-radius:12px; font-size:12px; font-weight:600; }
.btn-dark:hover{ background:#1E3A8A; }
.btn-dark svg{ width:16px; height:16px; }
.btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #CBD5E1; color:#334155; padding:10px 24px; border-radius:12px; font-size:12px; font-weight:600; }
.btn-outline:hover{ background:#F8FAFC; }

.desc{ font-size:13px; color:#475569; line-height:1.6; }
.file-row{ margin-top:24px; padding:16px; background:#F8FAFC; border-radius:12px; border:1px solid #E2E8F0; display:flex; flex-direction:column; gap:16px; }
@media (min-width:640px){ .file-row{ flex-direction:row; align-items:center; justify-content:space-between; } }
.file-row .left{ display:flex; align-items:center; gap:12px; }
.file-ic{ padding:12px; background:#FEE2E2; color:#B91C1C; border-radius:8px; }
.file-ic svg{ width:24px; height:24px; }
.fname{ font-size:12px; font-weight:700; color:#1E293B; }
.fsize{ font-size:11px; color:#64748B; }
.btn-green{ display:inline-flex; align-items:center; gap:8px; background:#059669; color:#fff; font-size:12px; font-weight:600; padding:10px 16px; border-radius:12px; }
.btn-green:hover{ background:#047857; }
.btn-green svg{ width:16px; height:16px; }

.state-empty{ padding:32px; text-align:center; }
@media (min-width:640px){ .state-empty{ padding:48px; } }
.empty-icon{ width:64px; height:64px; background:#F1F5F9; color:#94A3B8; border-radius:999px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.empty-icon svg{ width:32px; height:32px; }
.state-empty h3{ font-size:16px; font-weight:600; color:#1E293B; }
.state-empty p{ font-size:12px; color:#64748B; max-width:420px; margin:8px auto 0; line-height:1.6; }

/* ---------- CTA account ---------- */
.cta-account{ margin-bottom:64px; }
.cta-card{ background:linear-gradient(to bottom right,#001B3A,#08264D,#001226); border-radius:16px; color:#fff; padding:24px; box-shadow:0 10px 15px -3px rgba(0,0,0,.15); position:relative; overflow:hidden; }
@media (min-width:640px){ .cta-card{ padding:40px; } }
.cta-badge{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:999px; background:rgba(59,130,246,.2); color:#BFDBFE; font-size:12px; font-weight:500; margin-bottom:12px; border:1px solid rgba(96,165,250,.2); }
.cta-card h3{ font-size:20px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; color:#fff; }
.cta-card > p{ font-size:12px; color:#CBD5E1; max-width:640px; line-height:1.6; margin-bottom:32px; }
.cta-benefits{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:32px; }
@media (min-width:768px){ .cta-benefits{ grid-template-columns:repeat(3,1fr); } }
.benefit{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:16px; border-radius:12px; }
.benefit .ic{ margin-bottom:8px; }
.benefit .ic svg{ width:20px; height:20px; }
.benefit .ic.amber{ color:#FBBF24; } .benefit .ic.emerald{ color:#34D399; } .benefit .ic.sky{ color:#38BDF8; }
.benefit h4{ font-size:12px; font-weight:700; color:#fff; margin-bottom:4px; }
.benefit p{ font-size:11px; color:#CBD5E1; line-height:1.6; }
.cta-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.btn-blue{ display:inline-flex; align-items:center; gap:8px; background:#3B82F6; color:#fff; font-weight:600; font-size:12px; padding:12px 20px; border-radius:12px; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); }
.btn-blue:hover{ background:#2563EB; }
.btn-blue svg{ width:16px; height:16px; }
.btn-ghost-white{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-weight:500; font-size:12px; padding:12px 20px; border-radius:12px; }
.btn-ghost-white:hover{ background:rgba(255,255,255,.2); }

/* ---------- How-to guide ---------- */
.how-to-guide{ padding:48px 0; border-top:1px solid #E2E8F099; }
.how-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
.how-head h3{ font-size:24px; font-weight:600; color:#001B3A; }
.how-head p{ font-size:14px; color:#475569; margin-top:4px; }
.how-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .how-grid{ grid-template-columns:repeat(3,1fr); } }
.how-card{ background:#fff; padding:24px; border-radius:16px; border:1px solid #E2E8F0; position:relative; }
.how-card .num{ font-size:24px; font-weight:900; color:#1E3A8A33; display:block; margin-bottom:12px; }
.how-card h4{ font-size:16px; font-weight:600; color:#0F172A; margin-bottom:8px; }
.how-card p{ font-size:12px; color:#475569; line-height:1.6; }

/* ---------- FAQ ---------- */
.faq-section{ background:#F8FAFC; padding:48px 0; border-top:1px solid #E2E8F0; }
.faq-card{ background:#fff; padding:24px; border-radius:16px; border:1px solid #E2E8F0; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:24px; }
@media (min-width:768px){ .faq-card{ padding:32px; flex-direction:row; align-items:center; } }
.faq-card .eyebrow{ font-size:11px; font-weight:600; color:#0284C7; text-transform:uppercase; letter-spacing:.05em; }
.faq-card h4{ font-size:16px; font-weight:600; color:#0F172A; margin-top:4px; }
.faq-card > div > p{ font-size:12px; color:#475569; margin-top:4px; max-width:420px; }
.faq-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; flex-shrink:0; }
.faq-actions .btn-dark, .faq-actions .btn-green{ box-shadow:0 1px 2px rgba(0,0,0,.05); }
.faq-actions svg{ width:16px; height:16px; }

/* ---------- Pengajuan Saya (user login) ---------- */
.mine-wrap{ padding:40px 0 24px; }
.mine-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.mine-head h2{ font-size:22px; font-weight:600; color:#001B3A; letter-spacing:-.02em; }
.mine-head p{ font-size:13px; color:#475569; margin-top:2px; }
.mine-toggle{ font-size:12px; font-weight:500; color:#0284C7; }
.mine-toggle:hover{ color:#1E40AF; text-decoration:underline; }
.mine-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.mine-chips[hidden]{ display:none; }
.mine-chip{ padding:8px 14px; border-radius:999px; border:1px solid #CBD5E1; background:#fff; font-family:monospace; font-size:12px; font-weight:600; color:#334155; }
.mine-chip:hover{ background:#F8FAFC; }
.mine-chip.active{ background:#001B3A; border-color:#001B3A; color:#fff; }

.pantau-search-wrap.is-standalone{ margin-top:0; }