/* ============================================================
   Listy Group — Design System
   "Let's Expand Together"  /  一起拓展全球
   Light canvas + signature multi-colour gradient.
   ============================================================ */

:root{
  /* Brand palette — vivid on light */
  --violet:#6d4aff;  --violet-d:#5a37e0;
  --magenta:#b14bff;
  --coral:#ff5da2;
  --amber:#ff9e3d;
  --cyan:#16d6c6;
  --sky:#38bdf8;
  --green:#22c55e;

  /* Signature gradients */
  --grad-brand:linear-gradient(120deg,#6d4aff 0%,#b14bff 38%,#ff5da2 70%,#ff9e3d 100%);
  --grad-brand-soft:linear-gradient(120deg,#7b5bff 0%,#c060ff 45%,#ff77b3 100%);
  --grad-cyan:linear-gradient(120deg,#16d6c6 0%,#38bdf8 100%);
  --grad-sun:linear-gradient(120deg,#ff5da2 0%,#ff9e3d 100%);

  /* Neutrals (light) */
  --ink:#1c1733;       --ink-2:#4b4566;     --ink-3:#7a7596;
  --line:#ece9f7;      --line-2:#e0dcf2;
  --bg:#faf9ff;        --bg-2:#f3f1fc;      --surface:#ffffff;
  --surface-tint:#f7f5ff;

  /* Effects */
  --shadow-sm:0 1px 2px rgba(28,23,51,.06),0 1px 3px rgba(28,23,51,.04);
  --shadow:0 6px 18px -6px rgba(74,45,160,.18),0 2px 6px rgba(28,23,51,.05);
  --shadow-lg:0 24px 50px -18px rgba(94,55,224,.35);
  --shadow-violet:0 14px 30px -10px rgba(109,74,255,.45);
  --shadow-coral:0 14px 30px -10px rgba(255,93,162,.4);
  --radius:14px; --radius-lg:22px; --radius-xl:30px; --radius-pill:999px;

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;font-size:16px;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
:lang(zh) body,html[lang="zh"] body{line-height:1.75}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:.2s}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
input,textarea,select{font-family:inherit;font-size:1rem}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:90px 0}
.section-sm{padding:56px 0}
.center{text-align:center}
.grid{display:grid;gap:24px}
.flex{display:flex}
.between{display:flex;align-items:center;justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.hide{display:none!important}

/* ---------- Typography ---------- */
h1,h2,h3,h4{line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.display{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:900;letter-spacing:-.03em;line-height:1.08}
.h-section{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:850}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-2)}
.kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--violet);
  background:var(--surface-tint);border:1px solid var(--line-2);
  padding:7px 15px;border-radius:var(--radius-pill);
}
.kicker.coral{color:var(--coral)} .kicker.cyan{color:#0c9d92}
.gradient-text{background:var(--grad-brand);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.muted{color:var(--ink-3)} .sub{color:var(--ink-2)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:.97rem;padding:13px 24px;border-radius:var(--radius-pill);
  transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap;cursor:pointer;
  border:1.5px solid transparent;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-violet)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(109,74,255,.6)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:#2b2350}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px)}
.btn-light{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.32);backdrop-filter:blur(6px)}
.btn-light:hover{background:rgba(255,255,255,.26)}
.btn-coral{background:var(--grad-sun);color:#fff;box-shadow:var(--shadow-coral)}
.btn-coral:hover{transform:translateY(-2px)}
.btn-cyan{background:var(--grad-cyan);color:#06322e;box-shadow:0 12px 26px -10px rgba(22,214,198,.6)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px;font-size:.875rem}
.btn-lg{padding:16px 32px;font-size:1.05rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .25s}
.card-pad{padding:26px}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}

/* ---------- Badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  padding:5px 12px;border-radius:var(--radius-pill);line-height:1.3}
.badge.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.b-violet{background:#efe9ff;color:#5a37e0}
.b-coral{background:#ffe6f1;color:#d6357e}
.b-amber{background:#fff1dd;color:#c9760a}
.b-cyan{background:#d8fbf6;color:#0a8a80}
.b-sky{background:#e0f2fe;color:#0784c7}
.b-green{background:#dcfce7;color:#15803d}
.b-pink{background:#ffe6f1;color:#d6357e}
.b-blue{background:#e0ecff;color:#2563eb}
.b-indigo{background:#e6e7ff;color:#4f46e5}
.b-teal{background:#d8fbf6;color:#0a8a80}
.b-rose{background:#ffe4ec;color:#e11d6b}
.b-gray{background:#eef0f5;color:#5b6478}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--radius-pill);
  background:var(--surface-tint);border:1px solid var(--line-2);font-size:.85rem;font-weight:600;color:var(--ink-2)}

/* ---------- Icon tiles ---------- */
.itile{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:none}
.itile svg{width:26px;height:26px}
.t-violet{background:linear-gradient(135deg,#6d4aff,#9a5cff)}
.t-coral{background:linear-gradient(135deg,#ff5da2,#ff7eb6)}
.t-amber{background:linear-gradient(135deg,#ff9e3d,#ffba5c)}
.t-cyan{background:linear-gradient(135deg,#16d6c6,#3dd7e6)}
.t-sky{background:linear-gradient(135deg,#38bdf8,#5ea0ff)}
.t-indigo{background:linear-gradient(135deg,#6366f1,#8b7bff)}
.t-pink{background:linear-gradient(135deg,#ff5da2,#ff95c9)}
.t-rose{background:linear-gradient(135deg,#fb5e8e,#ff8fb0)}
.t-teal{background:linear-gradient(135deg,#16d6c6,#3dd7e6)}
.t-green{background:linear-gradient(135deg,#22c55e,#4ade80)}
.t-gray{background:linear-gradient(135deg,#8b93a7,#aab2c4)}
.t-blue{background:linear-gradient(135deg,#3b82f6,#60a5fa)}

/* ---------- Forms ---------- */
.field{margin-bottom:18px}
.label{display:block;font-weight:650;font-size:.9rem;margin-bottom:7px;color:var(--ink)}
.label .req{color:var(--coral)}
.label .opt{color:var(--ink-3);font-weight:500;font-size:.82rem}
.input,.textarea,.select{
  width:100%;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:12px;
  background:var(--surface);color:var(--ink);transition:.18s;outline:none;
}
.textarea{resize:vertical;min-height:120px}
.input:focus,.textarea:focus,.select:focus{
  border-color:var(--violet);box-shadow:0 0 0 4px rgba(109,74,255,.12)}
.input.err,.textarea.err{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,93,162,.12)}
.field-err{color:#d6357e;font-size:.82rem;margin-top:6px;font-weight:600}
.hint{color:var(--ink-3);font-size:.84rem;margin-top:6px}
.input-icon{position:relative}
.input-icon svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3)}
.input-icon .input{padding-left:42px}

/* segmented / choice cards */
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.choice{position:relative;border:1.5px solid var(--line-2);border-radius:14px;padding:16px;cursor:pointer;
  transition:.18s;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.choice:hover{border-color:var(--violet);transform:translateY(-2px);box-shadow:var(--shadow)}
.choice input{position:absolute;opacity:0}
.choice.sel,.choice input:checked+*{}
.choice:has(input:checked){border-color:var(--violet);background:var(--surface-tint);
  box-shadow:0 0 0 3px rgba(109,74,255,.14)}
.choice-title{font-weight:700;font-size:.95rem}
.choice-desc{font-size:.8rem;color:var(--ink-3)}

.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.92rem;color:var(--ink-2)}
.check input{width:18px;height:18px;accent-color:var(--violet)}

/* ---------- Alerts / flash ---------- */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:14px;
  font-weight:600;font-size:.92rem;margin-bottom:16px;border:1px solid}
.alert svg{width:20px;height:20px;flex:none;margin-top:1px}
.alert-success{background:#e8fbf0;color:#15803d;border-color:#bbf3cf}
.alert-error{background:#ffeef4;color:#c2255c;border-color:#ffcfe0}
.alert-info{background:#eef0ff;color:#4f46e5;border-color:#d6d8ff}
.flash-stack{position:fixed;top:84px;right:20px;z-index:120;max-width:360px;display:flex;flex-direction:column;gap:10px}
.flash-stack .alert{box-shadow:var(--shadow-lg);animation:slideIn .35s ease;margin:0}
@keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;padding:14px 16px;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:700;border-bottom:1px solid var(--line);background:var(--surface-tint)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:var(--surface-tint)}
.tbl a.ref{font-weight:700;color:var(--violet)}

/* ---------- Avatars ---------- */
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;
  font-size:.9rem;background:var(--grad-brand);flex:none}
.avatar.sm{width:32px;height:32px;font-size:.78rem}
.avatar.lg{width:56px;height:56px;font-size:1.1rem}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:56px 24px;color:var(--ink-3)}
.empty .itile{margin:0 auto 16px}

/* ---------- Utility surfaces ---------- */
.soft-bg{background:var(--bg-2)}
.divider{height:1px;background:var(--line);margin:24px 0;border:none}
.stat-num{font-size:2rem;font-weight:900;letter-spacing:-.02em}
.dotline{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:.88rem}

@media(max-width:760px){
  .section{padding:62px 0}
  .wrap{padding:0 18px}
  .flash-stack{left:14px;right:14px;max-width:none}
}