/* ===== 香蕉接码平台 - 清爽浅色主题 ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --p:#F5A623;       /* 主色：香蕉橙黄 */
  --pd:#E09516;      /* 主色深 */
  --pl:#FFF3D6;      /* 主色浅底 */
  --bg:#f5f6fa;      /* 背景：浅灰蓝 */
  --w:#ffffff;       /* 卡片背景：白色 */
  --t:#1a1a2e;       /* 文字：深蓝黑 */
  --tl:#6b7280;      /* 次要文字：灰 */
  --tm:#9ca3af;      /* 更淡文字 */
  --bd:#e5e7eb;      /* 边框：浅灰 */
  --ok:#10b981;      /* 成功：翠绿 */
  --no:#ef4444;      /* 错误：红 */
  --info:#3b82f6;    /* 信息：蓝 */
  --pink:#ec4899;    /* 点缀：粉 */
  --r:10px;          /* 圆角：现代圆润 */
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08);
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--t);line-height:1.6}
a{color:var(--p);text-decoration:none}
a:hover{color:var(--pd);text-decoration:none}

/* 导航 */
.navbar{background:#fff;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:56px}
.logo{font-size:1.1em;font-weight:800;color:var(--p)}
.nav-links{display:flex;align-items:center;gap:18px;font-size:.85em}
.nav-links a{color:var(--t);font-weight:500;font-size:.85em;transition:.2s}
.nav-links a:hover{color:var(--p)}
.nav-bal{background:var(--pl);color:var(--pd);padding:5px 14px;border-radius:20px;font-size:.85em;font-weight:700}
.nav-muted{color:var(--tm)!important;font-size:.85em}
.nav-btn{border:1.5px solid var(--p);color:var(--p)!important;padding:6px 18px;border-radius:20px;font-size:.8em;font-weight:600;transition:.2s}
.nav-btn:hover{background:var(--pl)}
.nav-btn-fill{background:var(--p)!important;color:#fff!important;border-color:var(--p)}
.nav-btn-fill:hover{background:var(--pd)!important}
.flash{padding:10px 20px;text-align:center;font-size:.9em;font-weight:600}
.flash-success{background:#d1fae5;color:#065f46}
.flash-error{background:#fee2e2;color:#991b1b}

/* 按钮 */
.btn{display:inline-block;padding:8px 20px;border:1.5px solid transparent;border-radius:8px;font-size:.85em;font-weight:600;cursor:pointer;transition:.2s}
.btn-p{background:var(--p);color:#fff;border-color:var(--p)}.btn-p:hover{background:var(--pd);border-color:var(--pd);box-shadow:0 2px 8px rgba(245,166,35,.3)}
.btn-s{background:transparent;color:var(--p);border-color:var(--p)}.btn-s:hover{background:var(--pl)}
.btn-d{background:var(--no);color:#fff;border-color:var(--no)}.btn-d:hover{opacity:.9}
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-i{background:var(--info);color:#fff;border-color:var(--info)}
.btn-sm{padding:4px 12px;font-size:.75em;border-radius:6px}.btn-block{width:100%}
.btn:disabled{opacity:.3;cursor:not-allowed}

/* 表单 */
.fg{margin-bottom:14px}
.fg label{display:block;margin-bottom:5px;font-size:.85em;font-weight:500;color:var(--tl)}
.fg input,.fg select{width:100%;padding:10px 14px;background:#fff;border:1.5px solid var(--bd);border-radius:8px;font-size:.9em;outline:none;color:var(--t);transition:.2s}
.fg input:focus,.fg select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(245,166,35,.12)}
.fg input::placeholder{color:var(--tm)}

/* 认证页 */
.auth-wrap{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{background:var(--w);padding:40px;border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:400px}
.auth-card h2{text-align:center;margin-bottom:6px;font-size:1.3em;font-weight:800;color:var(--t)}
.auth-sub{text-align:center;color:var(--tl);margin-bottom:24px;font-size:.85em}
.auth-link{text-align:center;margin-top:16px;color:var(--tl);font-size:.85em}

/* ===== 服务页 - 核心三栏布局 ===== */
.svc-page{max-width:1200px;margin:0 auto;padding:20px}
.svc-page h1{font-size:1.2em;margin-bottom:16px;font-weight:800;color:var(--t)}
.svc-layout{display:flex;gap:16px;min-height:calc(100vh - 130px)}

/* 左栏：服务列表 */
.svc-left{width:280px;flex-shrink:0;background:var(--w);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.svc-search{padding:12px;border-bottom:1px solid var(--bd)}
.svc-search input{width:100%;padding:8px 12px;border:1.5px solid var(--bd);border-radius:8px;font-size:.85em;outline:none;background:#fff;color:var(--t);transition:.2s}
.svc-search input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(245,166,35,.12)}
.svc-list{flex:1;overflow-y:auto;max-height:calc(100vh - 200px)}
.svc-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-left:3px solid transparent;transition:.15s;font-size:.85em}
.svc-item:hover{background:var(--pl);color:var(--pd)}
.svc-item.active{background:var(--p);color:#fff;border-left-color:var(--pd);font-weight:700}
.svc-item .svc-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1em;flex-shrink:0;overflow:hidden}
.svc-item .svc-icon img.svc-logo{width:24px;height:24px;border-radius:4px;object-fit:contain}
.svc-item .svc-logo-fallback{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.1em}
.svc-item.active .svc-icon{background:rgba(255,255,255,.2)}

/* 右栏：国家+价格 */
.svc-right{flex:1;background:var(--w);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.svc-right-header{padding:12px 16px;border-bottom:1px solid var(--bd);display:flex;gap:12px;align-items:center}
.svc-right-header input{flex:1;padding:8px 12px;border:1.5px solid var(--bd);border-radius:8px;font-size:.85em;outline:none;background:#fff;color:var(--t);transition:.2s}
.svc-right-header input:focus{border-color:var(--p)}
.svc-right-header select{padding:8px 12px;border:1.5px solid var(--bd);border-radius:8px;font-size:.85em;outline:none;background:#fff;color:var(--t)}
.country-list{flex:1;overflow-y:auto;max-height:calc(100vh - 200px);padding:8px 0}

/* 国家行 */
.country-row{padding:10px 16px;border-bottom:1px solid var(--bd);cursor:pointer;transition:.15s}
.country-row:hover{background:var(--pl)}
.country-row.expanded{background:var(--pl);border-left:3px solid var(--p)}
.country-header{display:flex;align-items:center;gap:12px}
.country-flag{font-size:1.2em}
.country-name{font-weight:500;font-size:.9em;flex:1}
.country-stock{font-size:.8em;color:var(--tl)}
.country-stock sup{font-size:.7em}
.country-price{background:var(--p);color:#fff;padding:4px 12px;border-radius:6px;font-size:.8em;font-weight:700;white-space:nowrap}

/* 价位展开列表 */
.price-list{display:none;padding:8px 0 4px 40px}
.country-row.expanded .price-list{display:block}
.price-item{display:flex;align-items:center;gap:12px;padding:6px 12px;margin-bottom:4px;border-radius:6px;font-size:.85em;transition:.15s}
.price-item:hover{background:#f9fafb}
.price-val{font-weight:700;color:var(--pd);min-width:70px;font-family:'Inter',sans-serif}
.price-retail{text-decoration:line-through;color:var(--tm);font-size:.8em;min-width:50px}
.price-stock{flex:1;text-align:right;color:var(--tl);font-size:.8em}
.price-stock sup{font-size:.7em}
.price-buy{padding:4px 14px;background:var(--p);color:#fff;border:1.5px solid var(--p);border-radius:6px;font-size:.8em;font-weight:600;cursor:pointer;transition:.2s}
.price-buy:hover{background:var(--pd);box-shadow:0 2px 8px rgba(245,166,35,.3)}

/* 加载中 */
.loading{text-align:center;padding:60px 20px;color:var(--tl)}
.loading::after{content:'';display:inline-block;width:20px;height:20px;border:2px solid var(--bd);border-top-color:var(--p);border-radius:50%;animation:spin .6s linear infinite;margin-left:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:60px 20px;color:var(--tm);font-size:.9em}

/* ===== 订单页 ===== */
.page-wrap{max-width:1000px;margin:0 auto;padding:20px}
.card{background:var(--w);box-shadow:var(--shadow);border-radius:var(--r);padding:20px;margin-bottom:16px}
.card h3{margin-bottom:14px;font-size:1em;font-weight:700;color:var(--t)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--bd);font-size:.85em;white-space:nowrap}
th{color:var(--tl);font-weight:600;font-size:.75em;text-transform:uppercase;letter-spacing:.5px}
.mono{font-family:'SF Mono','Courier New',monospace}
.code-val{font-family:'SF Mono','Courier New',monospace;font-weight:700;color:var(--pd)}
.st{padding:3px 10px;border-radius:20px;font-size:.75em;font-weight:600}
.st-active{background:#dbeafe;color:#1d4ed8}
.st-completed{background:#d1fae5;color:#065f46}
.st-cancelled{background:#fee2e2;color:#991b1b}

/* 充值页双栏 */
.deposit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* 管理后台 */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:var(--w);box-shadow:var(--shadow);border-radius:var(--r);padding:20px;text-align:center}
.stat-card .sl{font-size:.75em;color:var(--tl);text-transform:uppercase;letter-spacing:.5px}
.stat-card .sv{font-size:1.4em;font-weight:800;color:var(--t)}
.stat-card .sv.profit{color:var(--ok)}
.rch{display:flex;gap:6px;align-items:center}
.rch input{padding:4px 8px;border:1.5px solid var(--bd);border-radius:6px;width:80px;font-size:.8em;background:#fff;color:var(--t)}

/* 首页 */
.hero{background:linear-gradient(135deg,#fff8e1 0%,#fff3d6 50%,#ffecd2 100%);padding:80px 20px;text-align:center;border-bottom:1px solid var(--bd)}
.hero h1{font-size:2em;font-weight:800;margin-bottom:16px;line-height:1.4;color:var(--t)}
.hero p{font-size:1em;color:var(--tl);margin-bottom:30px}
.hero-btns{display:flex;gap:12px;justify-content:center}
.hero-btns .btn{padding:14px 32px;font-size:.9em;border-radius:10px}
.btn-w{background:var(--p);color:#fff;border:none;padding:16px 48px;font-size:1.1em;font-weight:700;border-radius:12px;box-shadow:0 4px 14px rgba(245,166,35,.35)}.btn-w:hover{background:var(--pd);transform:translateY(-1px);box-shadow:0 6px 20px rgba(245,166,35,.4)}
.hero-btn{display:inline-block;padding:16px 48px;font-size:1.1em;font-weight:700;color:#fff;border:none;border-radius:12px;text-decoration:none;transition:all .3s ease;cursor:pointer}
.hero-btn-sms{background:linear-gradient(135deg,#F5A623,#f7c948);box-shadow:0 4px 14px rgba(245,166,35,.35)}
.hero-btn-sms:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 24px rgba(245,166,35,.5);color:#fff}
.hero-btn-smm{background:linear-gradient(135deg,#a855f7,#ec4899);box-shadow:0 4px 14px rgba(168,85,247,.35)}
.hero-btn-smm:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 24px rgba(168,85,247,.5);color:#fff}
.hero-btn:active{transform:translateY(0) scale(.98)}
.btn-o{background:#fff;color:var(--t);border:1.5px solid var(--bd);border-radius:10px}.btn-o:hover{border-color:var(--p);color:var(--p)}
.feat-grid{max-width:1000px;margin:40px auto;padding:0 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feat{border:none;border-radius:14px;padding:28px 24px;text-align:left;transition:.3s;position:relative;box-shadow:var(--shadow)}
.feat:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-lg)}
.feat h3{font-size:.95em;font-weight:700;margin-bottom:8px;line-height:1.4}
.feat p{font-size:.9em;margin-bottom:10px;opacity:.8}
.feat-link{font-size:.8em;font-weight:600;cursor:pointer}

/* 不规则旋转和偏移 */
.feat:nth-child(1){transform:none;margin-top:0}
.feat:nth-child(2){transform:none;margin-top:0}
.feat:nth-child(3){transform:none;margin-left:0}
.feat:nth-child(4){transform:none;margin-top:0;margin-right:0}
.feat:nth-child(5){transform:none;margin-top:0}
.feat:nth-child(6){transform:none;margin-top:0;margin-left:0}

/* 方块颜色 — 鲜明饱和 */
.feat-green{background:#10b981;color:#fff}
.feat-green .feat-link{color:#d1fae5}
.feat-pink{background:#ec4899;color:#fff}
.feat-pink .feat-link{color:#fce7f3}
.feat-yellow{background:#f59e0b;color:#fff}
.feat-yellow .feat-link{color:#fef3c7}
.feat-dark{background:#1e293b;color:#f1f5f9}
.feat-dark .feat-link{color:var(--p)}
.feat-white{background:#6366f1;color:#fff}
.feat-white .feat-link{color:#e0e7ff}
.feat-blue{background:#3b82f6;color:#fff}
.feat-blue .feat-link{color:#dbeafe}

/* ===== 汉堡菜单按钮（移动端） ===== */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--t);font-size:1.4em;line-height:1}
.admin-toggle{display:none;position:fixed;top:12px;left:12px;z-index:201;background:var(--p);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:1.2em;cursor:pointer;box-shadow:var(--shadow)}

/* ===== 响应式：平板 ≤1024px ===== */
@media(max-width:1024px){
.svc-left{width:220px}
.admin-side{width:180px}
.admin-main{margin-left:180px}
.feat-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.hero{padding:60px 20px}
.hero h1{font-size:1.6em}
.stats-row,.stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ===== 响应式：手机+小平板 ≤768px ===== */
@media(max-width:768px){
/* 导航 - 汉堡菜单 */
.nav-toggle{display:block}
.nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:#fff;flex-direction:column;padding:12px 20px;gap:0;border-bottom:1px solid var(--bd);box-shadow:var(--shadow-lg);z-index:99}
.nav-links.open{display:flex}
.nav-links a,.nav-links span{padding:10px 0;font-size:.9em;border-bottom:1px solid var(--bd)}
.nav-links a:last-child,.nav-links span:last-of-type{border-bottom:none}
.nav-bal{display:block;text-align:center;margin:4px 0}
.nav-btn{text-align:center;display:block;margin:4px 0}
.nav-inner{position:relative}

/* 首页 */
.hero{padding:40px 16px}
.hero h1{font-size:1.3em}
.hero p{font-size:.9em}
.hero-btns{flex-direction:column;gap:8px;align-items:center}
.hero-btns .btn{width:80%;text-align:center;padding:12px 20px}
.btn-w{padding:14px 32px;font-size:1em}
.feat-grid{grid-template-columns:1fr;gap:12px;padding:0 16px;margin:24px auto}
.feat{padding:20px 18px}

/* 服务页 */
.svc-page{padding:12px}
.svc-layout{flex-direction:column;min-height:auto}
.svc-left{width:100%;max-height:none}
.svc-list{max-height:180px}
.svc-right{min-height:400px}
.country-list{max-height:none}
.svc-right-header{flex-direction:column;gap:8px}
.svc-right-header input,.svc-right-header select{width:100%}
.price-list{padding-left:20px}

/* 充值页 */
.page-wrap{padding:12px}
.deposit-grid{grid-template-columns:1fr}
.page-wrap .card{margin-bottom:12px}

/* 表格 */
th,td{padding:8px 6px;font-size:.78em}
.btn-sm{padding:3px 8px;font-size:.7em}

/* 认证页 */
.auth-card{padding:24px 20px;margin:0 12px}

/* 通用 */
.card{padding:14px}
.card h3{font-size:.95em}
.page-wrap h1{font-size:1.2em}

/* 管理后台 - 侧边栏折叠 */
.admin-side{position:fixed;left:-260px;width:260px;transition:left .3s;z-index:200}
.admin-side.open{left:0}
.admin-main{margin-left:0;padding:16px}
.admin-toggle{display:block!important}
.admin-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:199}
.admin-overlay.open{display:block}

/* Telegram 悬浮 */
.tg-float{padding:10px 14px;font-size:.8em;bottom:16px;right:16px}
.tg-float span{display:none}
}

/* ===== 响应式：小手机 ≤480px ===== */
@media(max-width:480px){
.hero h1{font-size:1.1em}
.hero p{font-size:.85em;margin-bottom:20px}
.hero-btns .btn{width:100%}
.btn-w{padding:12px 24px;font-size:.95em}
.svc-item{padding:8px 10px;font-size:.8em}
.country-name{font-size:.8em}
.country-price{font-size:.7em;padding:3px 8px}
.price-item{gap:8px;font-size:.8em}
.price-buy{padding:6px 12px;font-size:.75em}
th,td{padding:6px 4px;font-size:.72em}
.stat-grid,.stats-row{grid-template-columns:1fr 1fr}
.stat-box .sb-val{font-size:1.4em}
.admin-main{padding:10px}
}

/* 功能8: 公告横幅 */
.notice-bar{background:var(--pl);color:var(--pd);text-align:center;padding:10px 20px;font-size:.85em;font-weight:600;border-bottom:1px solid #fde68a}

/* 功能7: 开关样式 */
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#d1d5db;border-radius:11px;transition:.3s}
.slider::before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.switch input:checked+.slider{background:var(--ok)}
.switch input:checked+.slider::before{transform:translateX(18px)}

/* 状态标签补充 */
.st-pending{background:#fef3c7;color:#92400e}
.st-approved{background:#d1fae5;color:#065f46}
.st-rejected{background:#fee2e2;color:#991b1b}
.st-expired{background:#f3f4f6;color:#6b7280}
.st-paid{background:#d1fae5;color:#065f46}

/* Footer */
.site-footer{background:#fff;border-top:1px solid var(--bd);padding:20px;text-align:center;margin-top:40px}
.footer-inner{font-size:.8em;color:var(--tm);display:flex;gap:8px;justify-content:center}

/* 滚动条样式 */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--p)}

/* Telegram 悬浮客服按钮 */
.tg-float{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;align-items:center;gap:8px;background:#0088cc;color:#fff;padding:12px 20px;border-radius:50px;box-shadow:0 4px 14px rgba(0,136,204,.4);text-decoration:none;font-size:.9em;font-weight:600;transition:.3s}
.tg-float:hover{background:#006da3;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,136,204,.5);color:#fff}
.tg-float svg{flex-shrink:0}

/* 选中文字颜色 */
::selection{background:var(--pl);color:var(--pd)}