/* ============================================================
   GreenGrass · 浅绿清新主题
   主色：浅草绿 #34c759 / #4cd964；背景近白偏绿 #f6fbf4
   ============================================================ */
:root{
  --gg-green:#34c759;
  --gg-green-2:#4cd964;
  --gg-green-deep:#28a745;
  --gg-green-soft:#e6f7ea;
  --gg-bg:#f6fbf4;
  --gg-card:#ffffff;
  --gg-text:#1f3328;
  --gg-text-soft:#5b6b60;
  --gg-border:#e1efe4;
  --gg-shadow:0 6px 22px rgba(52,199,89,.12);
  --gg-shadow-sm:0 2px 10px rgba(52,199,89,.10);
  --gg-radius:18px;
  --gg-radius-sm:12px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--gg-bg);
  color:var(--gg-text);
  line-height:1.6;
  min-height:100vh;
}
a{color:var(--gg-green-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

.gg-container{max-width:1080px;margin:0 auto;padding:0 18px;}

/* ---------- 顶部导航 ---------- */
.gg-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--gg-border);
}
.gg-nav-inner{
  max-width:1080px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.gg-logo{
  display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;
  color:var(--gg-green-deep);white-space:nowrap;
}
.gg-logo:hover{text-decoration:none;}
.gg-nav-links{display:flex;gap:4px;flex-wrap:wrap;flex:1;}
.gg-nav-links a{
  color:var(--gg-text-soft);padding:7px 12px;border-radius:10px;
  font-size:14.5px;white-space:nowrap;transition:.15s;
}
.gg-nav-links a:hover{background:var(--gg-green-soft);color:var(--gg-green-deep);text-decoration:none;}
.gg-nav-links a.active{background:var(--gg-green);color:#fff;}
.gg-nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.gg-user-name{font-size:14px;color:var(--gg-text-soft);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- 三币徽章 ---------- */
.gg-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gg-green-soft);color:var(--gg-green-deep);
  border:1px solid var(--gg-border);
  padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;
}

/* ---------- 按钮 ---------- */
.gg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--gg-green);color:#fff;border:none;cursor:pointer;
  padding:10px 18px;border-radius:12px;font-size:15px;font-weight:600;
  transition:.15s;text-decoration:none;
}
.gg-btn:hover{background:var(--gg-green-deep);text-decoration:none;transform:translateY(-1px);}
.gg-btn:disabled{background:#bcd9c4;cursor:not-allowed;transform:none;}
.gg-btn.ghost{background:#fff;color:var(--gg-green-deep);border:1.5px solid var(--gg-green);}
.gg-btn.ghost:hover{background:var(--gg-green-soft);}
.gg-btn.gray{background:#eef3ef;color:var(--gg-text-soft);}
.gg-btn.gray:hover{background:#e2eae4;}
.gg-btn.sm{padding:7px 13px;font-size:13.5px;border-radius:10px;}
.gg-btn.block{width:100%;}
.gg-btn.google{background:#fff;color:#333;border:1.5px solid var(--gg-border);box-shadow:var(--gg-shadow-sm);}
.gg-btn.google:hover{background:#f7f7f7;}

/* ---------- 卡片 ---------- */
.gg-card{
  background:var(--gg-card);border:1px solid var(--gg-border);
  border-radius:var(--gg-radius);box-shadow:var(--gg-shadow-sm);
  padding:22px;transition:.18s;
}
.gg-card.hover:hover{box-shadow:var(--gg-shadow);transform:translateY(-3px);}
.gg-grid{display:grid;gap:18px;}
.gg-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.gg-grid.cols-2{grid-template-columns:repeat(2,1fr);}

/* ---------- 表单 ---------- */
.gg-field{margin-bottom:14px;}
.gg-label{display:block;font-size:13.5px;color:var(--gg-text-soft);margin-bottom:6px;font-weight:600;}
.gg-input,.gg-select,.gg-textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--gg-border);
  border-radius:12px;font-size:15px;background:#fff;color:var(--gg-text);
  outline:none;transition:.15s;font-family:inherit;
}
.gg-input:focus,.gg-select:focus,.gg-textarea:focus{
  border-color:var(--gg-green);box-shadow:0 0 0 3px rgba(52,199,89,.15);
}
.gg-textarea{min-height:90px;resize:vertical;}

/* ---------- 搜索框 ---------- */
.gg-search{
  display:flex;gap:10px;background:#fff;border:1.5px solid var(--gg-border);
  border-radius:999px;padding:8px 8px 8px 20px;box-shadow:var(--gg-shadow);
  max-width:640px;margin:0 auto;
}
.gg-search input{flex:1;border:none;outline:none;font-size:16px;background:transparent;color:var(--gg-text);}
.gg-search .gg-btn{border-radius:999px;padding:10px 22px;}

/* ---------- Hero ---------- */
.gg-hero{
  text-align:center;padding:64px 18px 40px;
  background:linear-gradient(180deg,#eafaee 0%,var(--gg-bg) 100%);
}
.gg-hero h1{font-size:clamp(28px,5vw,46px);margin:0 0 12px;color:var(--gg-green-deep);font-weight:800;letter-spacing:.5px;}
.gg-hero p.lead{font-size:clamp(15px,2.5vw,19px);color:var(--gg-text-soft);margin:0 0 28px;}

/* ---------- 页面通用 ---------- */
.gg-page{padding:28px 0 60px;}
.gg-page-title{font-size:26px;font-weight:800;margin:0 0 6px;color:var(--gg-text);}
.gg-page-sub{color:var(--gg-text-soft);margin:0 0 22px;font-size:15px;}
.gg-section-title{font-size:19px;font-weight:700;margin:26px 0 14px;color:var(--gg-text);}

/* ---------- 余额大卡 ---------- */
.gg-balance-card{
  background:linear-gradient(135deg,var(--gg-green) 0%,var(--gg-green-2) 100%);
  color:#fff;border-radius:var(--gg-radius);padding:26px;box-shadow:var(--gg-shadow);
}
.gg-balance-card .label{opacity:.92;font-size:14px;margin-bottom:8px;}
.gg-coins{display:flex;gap:22px;flex-wrap:wrap;}
.gg-coin{text-align:center;}
.gg-coin .num{font-size:30px;font-weight:800;line-height:1.1;}
.gg-coin .unit{font-size:13px;opacity:.9;margin-top:2px;}

/* ---------- 信用卡卡面 ---------- */
.gg-credit{
  border-radius:16px;padding:20px;color:#fff;min-height:150px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--gg-shadow);position:relative;overflow:hidden;
}
.gg-credit::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;background:rgba(255,255,255,.12);border-radius:50%;}
.gg-credit .ctype{font-weight:700;letter-spacing:1px;}
.gg-credit .cno{font-size:18px;letter-spacing:2px;font-family:"Courier New",monospace;}
.gg-credit .cfoot{display:flex;justify-content:space-between;font-size:13px;opacity:.95;}

/* ---------- 列表 / 行 ---------- */
.gg-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;border:1px solid var(--gg-border);border-radius:12px;background:#fff;margin-bottom:10px;
}
.gg-row .amt-pos{color:var(--gg-green-deep);font-weight:700;}
.gg-row .amt-neg{color:#e0533d;font-weight:700;}
.gg-muted{color:var(--gg-text-soft);font-size:13.5px;}
.gg-tag{display:inline-block;background:var(--gg-green-soft);color:var(--gg-green-deep);padding:2px 9px;border-radius:8px;font-size:12px;margin-right:6px;}

/* 分类筛选 chips */
.gg-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.gg-chip{cursor:pointer;border:1.5px solid var(--gg-border);background:#fff;color:var(--gg-text-soft);padding:6px 14px;border-radius:999px;font-size:13.5px;transition:.15s;}
.gg-chip:hover{border-color:var(--gg-green);color:var(--gg-green-deep);}
.gg-chip.active{background:var(--gg-green);color:#fff;border-color:var(--gg-green);}

/* tabs */
.gg-tabs{display:flex;gap:6px;background:var(--gg-green-soft);padding:5px;border-radius:14px;margin-bottom:20px;}
.gg-tab{flex:1;text-align:center;padding:10px;border-radius:10px;cursor:pointer;font-weight:600;color:var(--gg-text-soft);transition:.15s;}
.gg-tab.active{background:#fff;color:var(--gg-green-deep);box-shadow:var(--gg-shadow-sm);}

/* ---------- Toast ---------- */
#gg-toast-wrap{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;}
.gg-toast{
  background:rgba(31,51,40,.94);color:#fff;padding:11px 20px;border-radius:12px;
  font-size:14.5px;box-shadow:0 8px 24px rgba(0,0,0,.2);
  animation:ggToastIn .25s ease;max-width:88vw;
}
@keyframes ggToastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ---------- 弹层 ---------- */
.gg-modal-mask{position:fixed;inset:0;background:rgba(20,40,28,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;}
.gg-modal{background:#fff;border-radius:var(--gg-radius);padding:24px;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:88vh;overflow:auto;}
.gg-modal h3{margin:0 0 16px;}

/* ---------- 三币说明 ---------- */
.gg-coin-explain{text-align:center;}
.gg-coin-explain .icon{font-size:40px;}
.gg-coin-explain .name{font-weight:800;font-size:18px;margin:6px 0 4px;}

/* ---------- footer ---------- */
.gg-footer{text-align:center;padding:30px 18px;color:var(--gg-text-soft);font-size:13px;border-top:1px solid var(--gg-border);margin-top:30px;}

.gg-empty{text-align:center;color:var(--gg-text-soft);padding:40px 0;}
.gg-loading{text-align:center;color:var(--gg-text-soft);padding:30px 0;}

/* ---------- 搜索范围切换 + 全网搜索区块 ---------- */
.gg-scope{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px;}
.gg-scope .gg-btn.active{background:var(--gg-green);color:#fff;border-color:var(--gg-green);}
.gg-web{background:var(--gg-green-soft);border:1px solid var(--gg-border);border-radius:var(--gg-radius);padding:16px 18px;margin:0 0 22px;}
.gg-web-title{font-size:15px;font-weight:700;color:var(--gg-green-deep);margin:0 0 4px;}
.gg-web-sub{color:var(--gg-text-soft);font-size:13px;margin:0 0 12px;}
.gg-web-btns{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- 响应式 ---------- */
@media (max-width:760px){
  .gg-grid.cols-3,.gg-grid.cols-2{grid-template-columns:1fr;}
  .gg-nav-links{order:3;width:100%;justify-content:flex-start;overflow-x:auto;}
  .gg-nav-inner{gap:10px;}
  .gg-coins{gap:16px;}
  .gg-coin .num{font-size:24px;}
}

/* ===== 搜索页：Google 风格居中 ===== */
.gg-search-page{min-height:calc(100vh - 64px - 60px);display:flex;flex-direction:column;}
.gg-search-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;flex:1;padding:40px 16px;transition:padding .3s ease,flex .3s ease;
}
/* 搜索后：收起到顶部 */
.gg-search-page.searched .gg-search-hero{flex:0 0 auto;padding:30px 16px 18px;}
.gg-search-logo{font-size:46px;font-weight:800;color:var(--gg-green-deep);letter-spacing:-1px;margin-bottom:8px;}
.gg-search-page.searched .gg-search-logo{font-size:30px;}
.gg-search-slogan{color:var(--gg-text-soft);font-size:15px;margin:0 0 26px;}
.gg-search-page.searched .gg-search-slogan{margin-bottom:16px;font-size:13px;}
/* 大号居中搜索框 */
.gg-search-big{width:100%;max-width:620px;margin:0 auto 16px;padding:6px 6px 6px 22px;box-shadow:0 6px 22px rgba(52,199,89,.14);}
.gg-search-big input{font-size:17px;padding:10px 0;}
.gg-scope-center{justify-content:center;margin:0;}
.gg-search-results{padding:0 0 60px;}
.gg-search-results:empty{display:none;}

/* 纯搜索引擎：引擎切换选中态 + 提示文字 */
.gg-scope-center .gg-btn.is-active{
  background:var(--gg-green,#4caf50);
  color:#fff;
  border-color:var(--gg-green,#4caf50);
}
.gg-search-tip{
  margin-top:18px;
  font-size:13px;
  color:#9aa39a;
  text-align:center;
}
.gg-search-tip a{color:var(--gg-green,#4caf50);text-decoration:none;}
.gg-search-tip a:hover{text-decoration:underline;}

/* 设置页：浏览器风格 */
.gg-settings-card{
  background:#fff;
  border:1px solid #e3efe6;
  border-radius:12px;
  padding:20px 24px;
  margin-bottom:20px;
}
.gg-settings-title{
  font-size:16px;
  margin:0 0 16px;
  color:var(--gg-green-deep);
}
.gg-settings-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
  padding:12px 0;
  border-top:1px solid #f0f4f0;
}
.gg-settings-row:first-of-type{border-top:none;}
.gg-settings-label{flex:1;min-width:160px;}
.gg-settings-label > div:first-child{font-weight:600;color:#333;}
.gg-settings-desc{font-size:13px;color:#9aa39a;margin-top:2px;}
.gg-settings-options{display:flex;gap:12px;flex-wrap:wrap;}
.gg-settings-option{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border:1px solid #e3efe6;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  color:#555;
  background:#fafcfa;
  transition:background .15s,border-color .15s;
}
.gg-settings-option:hover{background:#f0f9f2;border-color:#b4d9b9;}
.gg-settings-option input[type="radio"]{
  accent-color:var(--gg-green);
  cursor:pointer;
}