/* ════════════════════════════════════════════ */
/* SOSOEMS Design System v1.0 — app.css        */
/* ════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Noto Sans SC','Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:#FAFBFC;color:#1A1B2E;font-size:16px;line-height:1.6
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul,ol{padding-left:20px}

:root{
  --primary:#4F46E5;--primary-dark:#3730A3;--primary-light:#818CF8;--primary-subtle:#EEF2FF;
  --accent:#06B6D4;
  --success:#059669;--success-bg:#D1FAE5;
  --warning:#D97706;
  --n0:#FFFFFF;--n50:#F8FAFC;--n100:#F1F5F9;--n200:#E2E8F0;--n300:#CBD5E1;
  --n400:#94A3B8;--n500:#64748B;--n600:#475569;--n700:#334155;--n800:#1E293B;--n900:#0F172A;
  --dark-bg:#0F172A;--dark-text:rgba(255,255,255,.7);--dark-muted:rgba(255,255,255,.35);
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04);--shadow-md:0 4px 12px rgba(0,0,0,.05);--shadow-lg:0 8px 30px rgba(0,0,0,.07);
  --max-w:1200px
}

/* ── Typography ── */
.text-hero{font-size:clamp(34px,5.5vw,56px);font-weight:800;line-height:1.08;letter-spacing:-1.5px}
.text-h1{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.8px}
.text-h2{font-size:clamp(21px,3vw,28px);font-weight:700;line-height:1.25}
.text-h3{font-size:clamp(16px,1.8vw,19px);font-weight:700;line-height:1.3}
.text-h4{font-size:15px;font-weight:600;line-height:1.4}
.text-body{font-size:15px;line-height:1.65}
.text-body-sm{font-size:14px;line-height:1.6}
.text-small{font-size:13px;line-height:1.5}
.text-xs{font-size:12px;line-height:1.4}

/* ── Header ── */
.hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.04)}
.hd-in{max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px}
.hd-lf{display:flex;align-items:center;gap:10px}
.hd-lf img{height:30px;width:auto;display:block}
.hd-lf .ai-b{font-size:10px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:2px 7px;border-radius:4px;font-weight:700}
.hd-nav{display:flex;gap:4px}
.hd-nav a{font-size:14px;font-weight:500;color:var(--n500);padding:8px 14px;border-radius:var(--radius-md);transition:all .15s}
.hd-nav a:hover{color:var(--primary);background:var(--primary-subtle)}
.hd-nav a.act{color:var(--primary);font-weight:600;background:var(--primary-subtle)}

/* ── Hero ── */
.hero{background:linear-gradient(135deg,#EEF2FF 0%,#FAFBFC 50%,#ECFDF5 100%);min-height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:40px 0}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-c{position:relative;z-index:2;text-align:center;max-width:680px;padding:0 24px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;background:rgba(79,70,229,.08);border-radius:100px;font-size:13px;font-weight:600;color:var(--primary);margin-bottom:16px}
.hero-bd{width:6px;height:6px;border-radius:50%;background:var(--success);display:inline-block;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(5,150,105,.5)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(5,150,105,0)}}
.hero-title{font-size:clamp(34px,5.5vw,56px);font-weight:800;line-height:1.08;letter-spacing:-1.5px;color:var(--n900);margin-bottom:12px}
.hero-title span{background:linear-gradient(135deg,var(--primary)20%,var(--accent)80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-desc{font-size:15px;line-height:1.6;color:var(--n500);max-width:500px;margin:0 auto 24px}
.hero-srch{display:flex;max-width:540px;margin:0 auto;background:var(--n0);border-radius:var(--radius-lg);box-shadow:0 0 0 1px rgba(79,70,229,.08),0 8px 30px rgba(79,70,229,.08);padding:5px}
.hero-srch:focus-within{box-shadow:0 0 0 2px rgba(79,70,229,.18),0 10px 30px rgba(79,70,229,.12)}
.hero-srch input{flex:1;border:none;outline:none;padding:12px 16px;font-size:15px;font-family:inherit;color:var(--n900);background:transparent;min-width:0}
.hero-srch input::placeholder{color:var(--n400);font-size:14px}
.hero-srch button{padding:10px 28px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:9px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:all .2s;min-height:44px}
.hero-srch button:hover{box-shadow:0 6px 20px rgba(79,70,229,.35);transform:translateY(-1px)}
.hero-srch button:active{transform:scale(.97)}
.hero-stats{display:flex;justify-content:center;gap:36px;margin-top:32px;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat-n{font-size:24px;font-weight:800;color:var(--n900)}
.hero-stat-l{font-size:13px;color:var(--n500);margin-top:2px}

/* ── Data Panel ── */
.data-panel{max-width:1100px;margin:-28px auto 0;padding:0 24px;position:relative;z-index:3}
.data-panel-in{background:var(--n0);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-md);display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border:1px solid var(--n200)}
.dp-item{text-align:center}
.dp-n{font-size:22px;font-weight:800;color:var(--n900)}
.dp-l{font-size:13px;color:var(--n500);margin-top:2px}

/* ── AdSense ── */
.ads-wrap{max-width:768px;margin:0 auto;padding:24px 24px 0}
.ads-slot{position:relative;overflow:hidden;width:100%;min-height:90px;background:var(--n0);border-radius:var(--radius-md);border:1px solid var(--n200)}
.ads-slot::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:500;color:var(--n400);background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(99,102,241,.03)10px,rgba(99,102,241,.03)20px);pointer-events:none;z-index:1}

/* ── Section ── */
.section{padding:48px 0}
.section-alt{background:var(--n50)}
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.sec-title{text-align:center;margin-bottom:28px}
.sec-title h2{font-size:clamp(21px,3vw,28px);font-weight:700;color:var(--n900)}
.sec-title p{font-size:14px;color:var(--n500);margin-top:6px}

/* ── Pill Grid ── */
.pill-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;color:var(--n600);background:var(--n50);border:1px solid var(--n200);border-radius:var(--radius-md);cursor:pointer;transition:all .18s}
.pill:hover{background:var(--primary-subtle);border-color:var(--primary-light);color:var(--primary);transform:translateY(-1px);box-shadow:0 3px 8px rgba(79,70,229,.08)}

/* ── Card Grid ── */
.card-grid{display:grid;gap:16px}
.card-grid-2{grid-template-columns:1fr 1fr}
.card-grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--n0);border-radius:var(--radius-lg);border:1px solid var(--n200);box-shadow:var(--shadow-sm);padding:24px}
.card-hover{transition:all .2s}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.card-title{font-size:clamp(16px,1.8vw,19px);font-weight:700;line-height:1.3;color:var(--n900);margin-bottom:6px}
.card-text{font-size:14px;color:var(--n500);line-height:1.6;margin-bottom:10px}
.card-example{display:block;font-size:13px;color:var(--n400);background:var(--n50);padding:8px 12px;border-radius:var(--radius-sm);font-family:'SF Mono','Menlo',monospace}

/* ── Article Meta ── */
.article-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.article-date{font-size:12px;color:var(--n400)}

/* ── Tag ── */
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 10px;border-radius:100px}
.tag-p{background:var(--primary-subtle);color:var(--primary)}
.tag-w{background:#FEF3C7;color:var(--warning)}
.tag-g{background:var(--success-bg);color:var(--success)}

/* ── Region Grid (homepage) ── */
.region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.region-card{background:var(--n0);border-radius:var(--radius-lg);border:1px solid var(--n200);transition:all .2s;overflow:hidden}
.region-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.region-link{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;text-align:center}
.region-icon{font-size:32px}
.region-name{font-size:15px;font-weight:600;color:var(--n700)}
.region-count{font-size:12px;color:var(--n400)}

/* ── Carrier Page ── */
.carrier-hero{background:linear-gradient(135deg,#EEF2FF 0%,#FAFBFC 100%);padding:32px 0;border-bottom:1px solid var(--n200)}
.carrier-hero-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.carrier-logo{width:72px;height:72px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;flex-shrink:0}
.carrier-hero-text{flex:1;min-width:280px}
.carrier-hero-text h1{font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--n900)}
.carrier-search{display:flex;max-width:480px;margin-top:14px;background:var(--n0);border:1px solid var(--n200);border-radius:var(--radius-md);padding:4px}
.carrier-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.carrier-search input{flex:1;border:none;outline:none;padding:10px 14px;font-size:14px;font-family:inherit;color:var(--n900);background:transparent;min-width:0}
.carrier-search button{padding:9px 22px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;min-height:40px;transition:all .2s}
.carrier-search button:hover{box-shadow:0 4px 14px rgba(79,70,229,.3)}

.carrier-content-grid{display:grid;grid-template-columns:1fr 280px;gap:24px}
.carrier-main{min-width:0}
.carrier-sidebar{min-width:0}

.code-block{background:var(--n50);border:1px solid var(--n200);border-radius:var(--radius-sm);padding:12px 16px;margin-top:10px;font-family:'SF Mono','Menlo',monospace;font-size:14px;color:var(--primary)}

.faq-item{padding:14px 0;border-bottom:1px solid var(--n100)}
.faq-item:last-child{border-bottom:none}
.faq-q{font-size:15px;font-weight:600;color:var(--n700);margin-bottom:4px}
.faq-a{font-size:14px;color:var(--n500);line-height:1.6}

.related-carrier-link{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);transition:all .15s}
.related-carrier-link:hover{background:var(--primary-subtle)}
.rc-logo{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}

/* ── Article Page ── */
.article-layout{max-width:1100px;margin:0 auto}
.breadcrumb{font-size:13px;color:var(--n400);margin-bottom:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb a{color:var(--n500)}.breadcrumb a:hover{color:var(--primary)}
.bc-sep{color:var(--n300)}
.article-grid{display:grid;grid-template-columns:1fr 280px;gap:24px}
.article-content{padding:32px}
.article-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.article-body h2{font-size:clamp(18px,2.5vw,24px);font-weight:700;color:var(--n900);margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--n100)}
.article-body h3{font-size:16px;font-weight:600;color:var(--n700);margin:20px 0 8px}
.article-body p{font-size:15px;color:var(--n600);line-height:1.8;margin-bottom:12px}
.article-body ul,.article-body ol{margin-bottom:12px}
.article-body li{font-size:15px;color:var(--n600);line-height:1.7;margin-bottom:4px}
.article-body a{color:var(--primary);text-decoration:underline}
.article-body a:hover{color:var(--primary-dark)}
.article-sidebar{min-width:0}
.related-article-link{display:block;padding:6px 0;border-bottom:1px solid var(--n100);transition:all .12s}
.related-article-link:hover{color:var(--primary)}
.related-article-link:last-child{border:none}

/* ── Footer ── */
.ft{background:var(--dark-bg);padding:48px 0 24px;margin-top:48px}
.ft-in{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.ft-t{display:grid;grid-template-columns:1.2fr 2fr;gap:56px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.06)}
.ft-br img{height:28px;margin-bottom:8px;filter:brightness(10) opacity(.6)}
.ft-br .ft-ai{font-size:12px;color:var(--dark-muted);margin-bottom:10px}
.ft-br p{font-size:13px;color:var(--dark-muted);line-height:1.6}
.ft-lk{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ft-cl h4{font-size:12px;font-weight:600;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px}
.ft-cl a{display:block;font-size:13px;color:var(--dark-text);padding:5px 0;transition:color .15s}
.ft-cl a:hover{color:var(--primary-light)}
.ft-b{display:flex;justify-content:space-between;align-items:center;padding-top:20px;font-size:12px;color:var(--dark-muted)}

/* ── Result Page ── */
.result-wrap{max-width:var(--max-w);margin:0 auto;padding:20px 24px 48px}
.result-grid{display:grid;grid-template-columns:1fr 300px;gap:24px}
.result-sidebar{display:flex;flex-direction:column;gap:16px}
.result-section-title{font-size:12px;font-weight:600;color:var(--n400);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.timeline-item{position:relative;padding-left:28px;padding-bottom:14px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;border:2px solid var(--n300);background:#fff}
.timeline-item.active .timeline-dot{border-color:var(--primary);box-shadow:0 0 0 4px rgba(79,70,229,.1)}
.timeline-item.completed .timeline-dot{background:var(--primary);border-color:var(--primary)}
.timeline-item.completed .timeline-dot::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;font-weight:700}
.timeline-line{position:absolute;left:8px;top:20px;bottom:0;width:1.5px;background:var(--n200)}
.timeline-item:last-child .timeline-line{display:none}
.timeline-item.completed .timeline-line{background:var(--primary-light)}
.timeline-title{font-size:14px;font-weight:500;color:var(--n600)}
.timeline-item.active .timeline-title{color:var(--primary);font-weight:600}
.timeline-time{font-size:12px;color:var(--n400);margin-top:1px}

/* ── Skeleton Loading ── */
.skeleton{background:var(--n100);border-radius:var(--radius-sm);animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--n100) 25%,var(--n50) 50%,var(--n100) 75%);background-size:200% 100%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Responsive ── */
@media(max-width:768px){
  .hd-nav{display:none}.hd-in{height:56px}.hd-lf img{height:26px}
  .hero{min-height:auto;padding:48px 0}
  .carrier-hero-in{flex-direction:column;align-items:flex-start}
  .carrier-content-grid,.article-grid,.result-grid{grid-template-columns:1fr}
  .card-grid-3,.card-grid-2,.region-grid{grid-template-columns:1fr}
  .data-panel-in{grid-template-columns:repeat(2,1fr)}
  .section{padding:32px 0}
  .ft-t{grid-template-columns:1fr;gap:32px}.ft-lk{grid-template-columns:1fr 1fr}
  .container{padding:0 16px}
  .article-content{padding:20px}
  .hero-stats{gap:20px;margin-top:24px}
}
@media(max-width:480px){
  .data-panel-in{grid-template-columns:repeat(2,1fr);gap:8px;padding:14px}
  .dp-n{font-size:18px}.dp-l{font-size:11px}
  .carrier-hero-text h1{font-size:22px}
}