:root { --gold: #d4a843; --navy: #0b1a2e; --navy-light: #132744; }
body { background: var(--navy); color: #e8e8e8; font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.navbar { background: var(--navy-light) !important; border-bottom: 2px solid var(--gold); }
.navbar-brand, .nav-link { color: var(--gold) !important; }
.nav-link:hover { color: #fff !important; }
a { color: var(--gold); }
a:hover { color: #f0c960; }
.card { background: var(--navy-light); border: 1px solid rgba(212,168,67,0.2); }
.card:hover { border-color: var(--gold); }
.hero { background: linear-gradient(135deg, #0d2137 0%, #162d50 100%); border-bottom: 3px solid var(--gold); padding: 3rem 0; text-align: center; }
.hero h1 { color: var(--gold); font-weight: 700; }
.hero p { color: #bbb; font-size: 1.1rem; }
.search-box { max-width: 600px; margin: 1.5rem auto 0; position: relative; }
.search-box input { background: #1a3355; border: 2px solid var(--gold); color: #fff; border-radius: 2rem; padding: .75rem 1.5rem; font-size: 1.1rem; }
.search-box input::placeholder { color: #889; }
.search-box input:focus { background: #1e3a60; box-shadow: 0 0 0 .25rem rgba(212,168,67,.25); border-color: var(--gold); color: #fff; }
mark { background: rgba(212,168,67,0.35); color: #fff; padding: 0 2px; border-radius: 2px; }
.badge-gold { background: var(--gold); color: #000; }
.table { --bs-table-bg: transparent; --bs-table-color: #e8e8e8; }
.table thead th { color: var(--gold); border-bottom-color: var(--gold); }
.table td, .table th { border-color: rgba(212,168,67,0.15); }
footer { margin-top: auto; background: var(--navy-light); border-top: 1px solid rgba(212,168,67,0.2); padding: 1.5rem 0; color: #888; font-size: .85rem; }
.suggest-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 999; background: #1a3355; border: 1px solid var(--gold); border-radius: .5rem; max-height: 300px; overflow-y: auto; display: none; }
.suggest-dropdown a { display: block; padding: .5rem 1rem; color: #e8e8e8; text-decoration: none; border-bottom: 1px solid rgba(212,168,67,0.1); }
.suggest-dropdown a:hover { background: rgba(212,168,67,0.15); }
.suggest-dropdown .sg-code { color: var(--gold); font-weight: 600; margin-right: .5rem; }
.claim-progress { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:1rem; }
.claim-progress-step { position:relative; display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; color:#d7d7d7; }
.claim-progress-circle { width:2.75rem; height:2.75rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(212,168,67,0.12); border:2px solid rgba(212,168,67,0.35); color:var(--gold); font-weight:700; }
.claim-progress-label { font-size:.85rem; line-height:1.35; }
.claim-progress-detailed .claim-progress-step { padding:0 .25rem; }
.claim-progress-detailed .claim-progress-step.active .claim-progress-circle { background:var(--gold); color:#111; border-color:var(--gold); box-shadow:0 0 0 .25rem rgba(212,168,67,.18); }
.claim-progress-detailed .claim-progress-step.complete .claim-progress-circle { background:rgba(25,135,84,0.18); border-color:rgba(25,135,84,0.4); color:#9fe0b3; }
.claim-step-card:hover { transform:translateY(-3px); transition:transform .18s ease, border-color .18s ease; }
.claim-step-icon { font-size:2rem; line-height:1; }
.claim-guide-content h2, .claim-guide-content h3 { color:var(--gold); margin-top:1.75rem; }
.claim-guide-content h2:first-child { margin-top:0; }
.claim-guide-content ul, .claim-guide-content ol { padding-left:1.25rem; }
.claim-guide-content li { margin-bottom:.55rem; }
.template-shell { background:#091524; border:1px solid rgba(212,168,67,0.18); border-radius:1rem; padding:1.25rem; }
.template-code { background:#06101d; border:1px solid rgba(212,168,67,0.14); border-radius:.75rem; color:#dfe7ef; padding:1rem; white-space:pre-wrap; word-break:break-word; font-size:.92rem; }
.grade-badge { display:inline-flex; align-items:center; justify-content:center; min-width:3rem; padding:.35rem .7rem; border-radius:999px; font-weight:700; letter-spacing:.02em; }
.grade-aplus { background:rgba(212,168,67,.18); color:#f2d27b; border:1px solid rgba(212,168,67,.55); }
.grade-a { background:rgba(91,209,138,.16); color:#9ce5b7; border:1px solid rgba(91,209,138,.45); }
.grade-bplus, .grade-b { background:rgba(110,168,254,.15); color:#9cc4ff; border:1px solid rgba(110,168,254,.4); }
.grade-cplus, .grade-c { background:rgba(160,170,184,.16); color:#d6dbe3; border:1px solid rgba(160,170,184,.35); }
.state-card { transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.state-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.18); }
@media (max-width: 767.98px) { .claim-progress { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Print styles */
@media print {
    .navbar, footer, .hero, .breadcrumb, .btn, .search-box, .suggest-dropdown,
    .no-print, .share-btn { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .card { background: #fff !important; border: 1px solid #ccc !important; color: #000 !important; }
    .table { color: #000 !important; }
    .table thead th { color: #333 !important; border-bottom-color: #333 !important; }
    a { color: #000 !important; text-decoration: underline !important; }
    h1, h2, h3, h4, h5, h6 { color: #000 !important; }
    main { padding: 0 !important; }
    .container { max-width: 100% !important; }
}