:root{
  --rhk-deep:#073f4b;
  --rhk-deeper:#052f39;
  --rhk-mid:#086777;
  --rhk-accent:#0794a4;
  --rhk-cyan:#10afbd;
  --rhk-soft:#eaf5f7;
  --rhk-ice:#f5f9fa;
  --ink:#17313a;
  --muted:#78909a;
  --line:#dbe7ea;
  --paper:#fff;
  --shadow:0 16px 42px rgba(28,67,76,.09);
  --shadow-soft:0 8px 24px rgba(28,67,76,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#f4f8f9}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 90% 5%,rgba(16,175,189,.08),transparent 28%),
    linear-gradient(180deg,#f9fbfc 0,#f3f7f8 100%);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  min-height:100vh;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.app-shell{width:min(100%,1240px);margin:0 auto;min-height:100vh;padding-bottom:88px}
.app-topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(249,252,252,.88);
  border-bottom:1px solid rgba(189,211,216,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.topbar-inner{
  height:72px;padding:0 24px;display:flex;align-items:center;gap:14px;
  max-width:1180px;margin:0 auto;
}
.topbar-back,.account-mini{
  border:1px solid #cfe0e3;background:rgba(255,255,255,.9);color:var(--rhk-mid);
  height:38px;border-radius:12px;box-shadow:0 5px 18px rgba(44,94,104,.06)
}
.topbar-back{width:42px;font-size:20px}
.account-mini{padding:0 15px;margin-left:auto;font-size:12px;font-weight:700}
.brand-lockup{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{
  width:39px;height:39px;border-radius:12px;position:relative;overflow:hidden;
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:21px;
  background:linear-gradient(145deg,var(--rhk-deep),var(--rhk-accent));
  box-shadow:0 8px 22px rgba(4,103,119,.22);
}
.brand-mark:after{
  content:"";position:absolute;width:29px;height:9px;right:-8px;bottom:5px;
  border:1px solid rgba(147,242,248,.66);transform:rotate(-28deg);
}
.brand-lockup strong{display:block;font-size:17px;letter-spacing:-.02em}
.brand-lockup small{display:block;margin-top:2px;color:#8aa0a8;font-size:8px;letter-spacing:.16em}
.app-view{padding:26px 24px 42px;max-width:1180px;margin:0 auto}

.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:250px;padding:38px 42px;border-radius:28px;
  color:#fff;
  background:
    linear-gradient(120deg,rgba(4,43,53,.98),rgba(6,91,105,.97) 62%,rgba(12,146,161,.94));
  box-shadow:0 22px 55px rgba(2,67,78,.22);
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 80% 20%,rgba(92,239,247,.25),transparent 28%),
    linear-gradient(135deg,transparent 58%,rgba(255,255,255,.09) 58.2%,transparent 58.6%);
}
.hero:after{
  content:"";position:absolute;right:-80px;top:-100px;width:420px;height:420px;z-index:-1;
  border:1px solid rgba(173,246,250,.36);border-radius:50%;
  box-shadow:0 0 80px rgba(16,175,189,.12) inset;
}
.hero-glass{
  position:absolute;right:42px;border:1px solid rgba(185,249,252,.43);
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(7,139,155,.05));
  box-shadow:inset 0 0 30px rgba(255,255,255,.06),0 0 30px rgba(48,226,235,.07);
  transform:skewY(-13deg) rotate(7deg);z-index:-1;
}
.hero-glass-a{width:150px;height:210px;top:15px}
.hero-glass-b{width:92px;height:155px;right:140px;top:67px;opacity:.72}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.24em;color:#7ce3eb}
.hero h1{margin:12px 0 8px;font-size:48px;line-height:1;font-weight:760;letter-spacing:-.045em}
.hero p{margin:0;color:#d5ecef;font-size:14px;line-height:1.85;letter-spacing:.02em}
.hero p span{color:#95cbd1}
.hero-line{display:flex;align-items:center;gap:12px;margin-top:28px}
.hero-line i{display:block;width:54px;height:2px;background:linear-gradient(90deg,#42e5ef,rgba(66,229,239,.1))}
.hero-line em{font-style:normal;color:#6eaeb7;font-size:8px;letter-spacing:.18em}

.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:30px 2px 15px}
.section-title h2{margin:3px 0 0;font-size:22px;letter-spacing:-.02em}
.section-title small{color:var(--rhk-accent);font-size:8px;font-weight:800;letter-spacing:.2em}
.section-title>span{color:#90a6ae;font-size:9px;letter-spacing:.12em}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tool-card{
  position:relative;min-height:168px;overflow:hidden;text-align:left;
  border:1px solid #d9e6e9;border-radius:20px;padding:19px 18px 17px;
  color:var(--ink);background:rgba(255,255,255,.93);box-shadow:var(--shadow-soft);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.tool-card:before{
  content:"";position:absolute;width:130px;height:130px;border-radius:50%;
  right:-68px;top:-72px;background:radial-gradient(circle,rgba(13,167,181,.11),transparent 66%);
}
.tool-card:hover{transform:translateY(-3px);border-color:#9fd1d8;box-shadow:0 18px 36px rgba(23,85,97,.13)}
.tool-index{position:absolute;right:15px;top:15px;color:#b8c8cd;font-size:9px;letter-spacing:.1em}
.icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:13px;margin-bottom:15px;
  color:#067b8b;font-size:11px;font-weight:900;letter-spacing:.03em;
  background:linear-gradient(145deg,#e8f8fa,#f7fcfd);
  border:1px solid #bfe7eb;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.tool-card strong{display:block;font-size:16px;line-height:1.25}
.tool-card small{display:block;margin-top:4px;color:#9aadb3;font-size:8px;letter-spacing:.1em}
.tool-card p{margin:10px 28px 0 0;color:#718890;font-size:11px;line-height:1.6}
.tool-arrow{position:absolute;right:16px;bottom:15px;color:#74aeb6;font-size:18px;font-weight:300}

.card,.project-card,.spec-item,.market-item,.share-sheet,.profile-card,.account-list{
  border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.96);
  box-shadow:var(--shadow-soft);
}
.card{padding:20px;margin-bottom:14px}
.card h3{margin:0 0 16px;font-size:17px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{margin-bottom:13px}
.field label{display:block;margin:0 0 7px;color:#607b84;font-size:11px;font-weight:650}
.input-wrap{
  display:flex;align-items:center;min-height:48px;border:1px solid #cfe0e4;border-radius:14px;
  overflow:hidden;background:#fbfdfd;transition:border-color .15s,box-shadow .15s;
}
.input-wrap:focus-within{border-color:#62bcc7;box-shadow:0 0 0 4px rgba(7,148,164,.08)}
.input-wrap input,.input-wrap select,.input-wrap textarea{
  flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;padding:12px 13px;color:#17313a;
}
.input-wrap>span{padding:0 13px;color:#8ba0a7;font-size:11px;white-space:nowrap}
textarea{width:100%;min-height:120px;resize:vertical;border:1px solid #cfe0e4!important;border-radius:14px;padding:12px!important}
.btn{
  border:1px solid transparent;border-radius:14px;min-height:44px;padding:10px 16px;
  font-weight:750;font-size:12px;transition:.18s ease;
}
.btn.primary{
  color:#fff;background:linear-gradient(135deg,var(--rhk-mid),var(--rhk-accent));
  box-shadow:0 10px 22px rgba(7,126,143,.18);
}
.btn.dark{color:#fff;background:var(--rhk-deep)}
.btn.ghost{color:#486872;background:#fff;border-color:#cfe0e4}
.btn.danger{color:#bb5050;border-color:#efd1d1}
.btn:hover{transform:translateY(-1px)}
.block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

.tabs,.shape-list,.auth-switch{
  display:flex;gap:6px;padding:5px;margin-bottom:15px;border:1px solid var(--line);
  border-radius:15px;background:#eef5f6;overflow:auto;
}
.tabs button,.shape-list button,.auth-switch button{
  border:0;border-radius:10px;padding:9px 13px;background:transparent;color:#70858c;font-size:11px;white-space:nowrap
}
.tabs button.active,.shape-list button.active,.auth-switch button.active{
  background:#fff;color:#067b8b;font-weight:800;box-shadow:0 4px 13px rgba(42,85,94,.08)
}

.result{
  overflow:hidden;margin:13px 0;border:1px solid rgba(75,181,193,.34);border-radius:21px;
  color:#fff;background:
    radial-gradient(circle at 100% 0,rgba(51,226,235,.18),transparent 35%),
    linear-gradient(135deg,#063d49,#075c69 72%,#087f8e);
  box-shadow:0 16px 35px rgba(5,78,90,.16);
}
.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.result-grid>div{padding:18px;border-right:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.result-grid>div:nth-child(even){border-right:0}
.result .k{color:#82bec6;font-size:9px;letter-spacing:.08em}
.result .v{margin-top:7px;font-size:23px;font-weight:750;letter-spacing:-.03em}
.result .v small{font-size:10px;color:#b9dfe3;font-weight:500}

.note,.muted{color:#82979e;font-size:11px;line-height:1.7}
.note{padding:12px 14px;border:1px solid #dcebed;border-radius:13px;background:#f4f9fa}
.diagram{
  display:grid;place-items:center;margin-bottom:14px;padding:14px;border:1px solid var(--line);
  border-radius:20px;background:#fff;box-shadow:var(--shadow-soft)
}
.diagram svg{width:100%;max-width:480px;color:#6d9ba3}
.shape{fill:rgba(19,160,177,.08);stroke:#178ca0;stroke-width:2}
.dimline{stroke:#9db7bd;stroke-width:1}
.dim{fill:#67848c;font-size:11px}

.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.pill{padding:15px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow-soft)}
.pill b{display:block;color:#075d6c;font-size:20px}
.pill span{display:block;margin-top:3px;color:#8fa2a8;font-size:9px}
.list{display:flex;flex-direction:column;gap:10px}
.spec-item,.market-item,.project-card{padding:16px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.badge{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border-radius:999px;background:#e8f6f8;color:#0a7b89;font-size:9px;font-weight:800}
.project-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0}
.project-stats>div{padding:10px;border-radius:12px;background:#f2f8f9}
.project-stats b,.project-stats small{display:block}
.project-stats b{color:#075d6c;font-size:16px}
.project-stats small{color:#96a8ae;font-size:8px}
.project-actions{display:flex;gap:8px}

.market-hero{
  margin-bottom:15px;padding:24px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,var(--rhk-deep),var(--rhk-accent));
}
.market-hero h2{margin:0 0 6px}
.share-sheet{padding:22px}
.line{padding:12px 0;border-bottom:1px solid #e7eef0}
.footer-note{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:25px 3px 4px;color:#91a3a9;font-size:9px
}
.footer-note b{color:#54727a;font-size:11px}
.auth-wrap{max-width:680px;margin:0 auto}
.auth-head{text-align:center;padding:22px 10px 15px}
.auth-mark,.avatar{
  margin:0 auto 12px;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;
  color:#fff;font-weight:900;background:linear-gradient(145deg,var(--rhk-deep),var(--rhk-accent));
  box-shadow:0 12px 28px rgba(7,112,127,.2)
}
.auth-head h2{margin:0 0 7px}
.auth-head p{color:#82969d;font-size:11px;line-height:1.7}
.auth-msg{min-height:0;margin-bottom:10px;border-radius:12px;font-size:11px}
.auth-msg:not(:empty){padding:10px 12px;background:#fff0f0;color:#b14848;border:1px solid #f1cccc}
.auth-msg.ok{background:#eef9f6;color:#267966;border-color:#cce9df}
.checkline{display:flex;gap:8px;align-items:flex-start;color:#788d94;font-size:10px;line-height:1.55;margin:4px 0 14px}
.profile-card{text-align:center;padding:25px;margin-bottom:13px}
.profile-card h2{margin:0 0 4px}
.profile-card p{color:#8aa0a7}
.profile-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px;text-align:left}
.profile-meta>div,.account-row{padding:13px;border-radius:13px;background:#f3f8f9}
.profile-meta small,.profile-meta b{display:block}
.profile-meta small{color:#96a8ae;font-size:8px}
.account-list{padding:8px}
.account-row{display:flex;justify-content:space-between;gap:15px;margin:5px}
.account-row span{color:#7f949b;font-size:10px}

.tabbar{
  position:fixed;left:50%;bottom:0;z-index:70;transform:translateX(-50%);
  width:min(100%,1240px);height:72px;padding:7px max(14px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  background:rgba(255,255,255,.94);border-top:1px solid #d9e6e9;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 -12px 35px rgba(28,67,76,.07);
}
.tabbar button{
  border:0;border-radius:14px;background:transparent;color:#91a3aa;
  display:flex;align-items:center;justify-content:center;gap:7px;flex-direction:column;
  font-size:9px;
}
.tabbar button.active{color:#067f8f;background:#e9f5f7}
.nav-ico{font-size:17px;line-height:1;font-weight:500}
.tabbar b{font-size:9px}

@media (min-width:900px){
  .app-view{padding-top:32px}
  .hero{min-height:265px;padding:45px 52px}
  .hero h1{font-size:56px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tool-card{min-height:178px}
  .tabbar{width:min(720px,calc(100% - 40px));bottom:15px;border:1px solid #d5e4e7;border-radius:22px;height:66px}
  .app-shell{padding-bottom:102px}
}
@media (max-width:680px){
  .topbar-inner{height:64px;padding:0 14px}
  .app-view{padding:15px 14px 28px}
  .brand-lockup small{display:none}
  .hero{min-height:222px;padding:30px 25px;border-radius:23px}
  .hero h1{font-size:42px}
  .hero p{font-size:12px}
  .hero-line em{font-size:7px}
  .hero-glass-a{right:8px;opacity:.45}
  .hero-glass-b{right:76px;opacity:.35}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .tool-card{min-height:154px;padding:15px 12px 13px;border-radius:17px}
  .icon{width:37px;height:37px;border-radius:11px;margin-bottom:12px}
  .tool-card strong{font-size:14px}
  .tool-card p{font-size:9px;margin-right:15px}
  .tool-card small{font-size:7px}
  .tool-index{font-size:7px;right:11px;top:11px}
  .row{grid-template-columns:1fr}
  .result .v{font-size:20px}
  .card{padding:16px;border-radius:17px}
}
@media (max-width:460px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-card{min-height:158px}
  .summary{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr}
  .result-grid>div{border-right:0}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}