/* TianhuDev R0.6.2 THD-T071 shared design system.
   Derived from the seven user-approved desktop visual masters.
   Desktop PNG dimensions are visual anchors, never a fixed CSS canvas. */
:root {
  color-scheme: light;
  --thd-ink:#0b1538;
  --thd-ink-muted:#62708f;
  --thd-canvas:#f5f9ff;
  --thd-surface:#fff;
  --thd-surface-soft:#eef5ff;
  --thd-border:#dbe7ff;
  --thd-primary:#2f6bff;
  --thd-primary-strong:#2454e8;
  --thd-violet:#7548f7;
  --thd-success:#20b978;
  --thd-warning:#f6a51a;
  --thd-danger:#ef5a6f;
  --thd-info:#3f86ff;
  --thd-code:#10182b;
  --thd-code-raised:#18233c;
  --thd-gradient-primary:linear-gradient(135deg,#29a9ff 0%,#356bff 45%,#7548f7 100%);
  --thd-gradient-soft:linear-gradient(135deg,rgba(63,134,255,.14),rgba(117,72,247,.10));
  --thd-shadow-card:0 12px 34px rgba(47,107,255,.09);
  --thd-shadow-float:0 18px 50px rgba(40,79,175,.14);
  --thd-r-sm:10px;
  --thd-r-md:14px;
  --thd-r-lg:18px;
  --thd-r-xl:24px;
  --thd-r-pill:999px;
  --thd-space-1:4px;
  --thd-space-2:8px;
  --thd-space-3:12px;
  --thd-space-4:16px;
  --thd-space-5:20px;
  --thd-space-6:24px;
  --thd-space-8:32px;
  --thd-space-10:40px;
  --thd-space-12:48px;
  --thd-font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --thd-font-code:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --thd-text-xs:12px;
  --thd-text-sm:14px;
  --thd-text-md:16px;
  --thd-text-lg:20px;
  --thd-text-xl:24px;
  --thd-text-2xl:32px;
  --thd-text-hero:clamp(34px,4vw,52px);
  --thd-touch:44px;
  --thd-sidebar:208px;
  --thd-gutter:20px;
}

* { box-sizing:border-box; }
html { min-width:320px; background:var(--thd-canvas); }
body {
  margin:0;
  color:var(--thd-ink);
  background:
    radial-gradient(circle at 70% 0%,rgba(93,141,255,.14),transparent 35%),
    var(--thd-canvas);
  font:400 var(--thd-text-sm)/1.5 var(--thd-font-ui);
  overflow-x:hidden;
}
button,input,select,textarea { font:inherit; }
button,a,select,input { min-height:var(--thd-touch); }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid rgba(47,107,255,.38); outline-offset:2px; }
[hidden] { display:none !important; }
[dir="rtl"] { text-align:start; }
.thd-bidi-isolate,.thd-money,.thd-tech-fragment { unicode-bidi:isolate; }
.thd-tech-fragment,.thd-code-panel { direction:ltr; text-align:left; }

.thd-page { width:min(100%,1920px); margin-inline:auto; padding:var(--thd-gutter); }
.thd-topbar {
  min-height:64px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 16px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--thd-border);
  border-radius:var(--thd-r-lg);
  box-shadow:var(--thd-shadow-card);
  backdrop-filter:blur(16px);
}
.thd-brand { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:800; color:var(--thd-ink); text-decoration:none; }
.thd-logo {
  width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; color:#fff; font-weight:900;
  background:var(--thd-gradient-primary);
  box-shadow:0 8px 18px rgba(47,107,255,.24);
}
.thd-nav { display:flex; align-items:center; gap:6px; flex:1; }
.thd-nav button,.thd-nav a,.thd-segment button {
  border:0; background:transparent; color:var(--thd-ink); padding:0 14px;
  border-radius:var(--thd-r-sm); cursor:pointer; text-decoration:none;
}
.thd-nav button[aria-current="page"],.thd-segment button[aria-pressed="true"] {
  color:var(--thd-primary-strong);
  background:#e9f0ff;
  font-weight:700;
}
.thd-controls { display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
.thd-select {
  border:1px solid var(--thd-border); border-radius:12px; color:var(--thd-ink);
  background:var(--thd-surface); padding:0 34px 0 12px;
}
.thd-button {
  border:1px solid transparent; border-radius:12px; padding:0 18px;
  cursor:pointer; font-weight:700;
}
.thd-button-primary { color:#fff; background:var(--thd-gradient-primary); box-shadow:0 8px 18px rgba(47,107,255,.22); }
.thd-button-secondary { color:var(--thd-primary-strong); background:#fff; border-color:var(--thd-border); }
.thd-button-ghost { color:var(--thd-primary-strong); background:#edf3ff; }

.thd-shell {
  display:grid;
  grid-template-columns:var(--thd-sidebar) minmax(0,1fr);
  gap:16px;
  min-height:calc(100vh - 100px);
  margin-top:16px;
}
.thd-sidebar {
  background:rgba(255,255,255,.94);
  border:1px solid var(--thd-border);
  border-radius:var(--thd-r-lg);
  padding:14px 10px;
  box-shadow:var(--thd-shadow-card);
}
.thd-sidebar nav { display:grid; gap:5px; }
.thd-sidebar button {
  width:100%; border:0; border-radius:10px; background:transparent; color:var(--thd-ink);
  text-align:start; padding:0 12px; cursor:pointer;
}
.thd-sidebar button[aria-current="page"] { background:#dfeaff; color:var(--thd-primary-strong); font-weight:700; }
.thd-main { min-width:0; }
.thd-card {
  background:rgba(255,255,255,.96);
  border:1px solid var(--thd-border);
  border-radius:var(--thd-r-lg);
  box-shadow:var(--thd-shadow-card);
  padding:18px;
  min-width:0;
}
.thd-card h2,.thd-card h3 { margin-top:0; }
.thd-grid { display:grid; gap:14px; }
.thd-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.thd-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.thd-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.thd-kpi strong { display:block; font-size:28px; line-height:1.2; margin-top:8px; }
.thd-muted { color:var(--thd-ink-muted); }
.thd-chip {
  display:inline-flex; min-height:28px; align-items:center; padding:2px 10px;
  border-radius:var(--thd-r-pill); background:#edf3ff; color:var(--thd-primary-strong);
}
.thd-chip-success { color:#087a4c; background:#e5f8ef; }
.thd-chip-warning { color:#985e00; background:#fff4d9; }
.thd-chip-danger { color:#b12d43; background:#ffecef; }
.thd-section { margin-top:16px; }
.thd-table-scroll { overflow-x:auto; max-width:100%; border-radius:var(--thd-r-md); }
.thd-table { width:100%; border-collapse:collapse; min-width:640px; background:#fff; }
.thd-table th,.thd-table td { padding:12px; border-bottom:1px solid #edf2fc; text-align:start; }
.thd-table th { color:var(--thd-ink-muted); font-size:12px; }
.thd-bottom-nav { display:none; }

.thd-hero {
  margin-top:16px;
  min-height:360px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr);
  align-items:center;
  gap:32px;
  padding:clamp(28px,5vw,72px);
  border-radius:var(--thd-r-xl);
  border:1px solid var(--thd-border);
  background:
    radial-gradient(circle at 82% 22%,rgba(117,72,247,.23),transparent 24%),
    radial-gradient(circle at 16% 70%,rgba(41,169,255,.20),transparent 26%),
    linear-gradient(135deg,#f9fcff,#eef5ff);
  overflow:hidden;
}
.thd-hero h1 { font-size:var(--thd-text-hero); line-height:1.15; margin:0 0 16px; }
.thd-gradient-text { background:var(--thd-gradient-primary); color:transparent; background-clip:text; -webkit-background-clip:text; }
.thd-prompt {
  display:flex; gap:10px; padding:10px; background:#fff; border:1px solid var(--thd-border);
  border-radius:var(--thd-r-lg); box-shadow:var(--thd-shadow-float);
}
.thd-prompt input { flex:1; min-width:0; border:0; outline:0; padding:0 10px; color:var(--thd-ink); }
.thd-art {
  min-height:260px; border-radius:28px; background:var(--thd-gradient-soft);
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.8);
}
.thd-art::before,.thd-art::after {
  content:""; position:absolute; border-radius:999px; filter:blur(2px);
  background:var(--thd-gradient-primary); opacity:.28;
}
.thd-art::before { width:300px;height:80px;right:-40px;top:60px;rotate:-20deg; }
.thd-art::after { width:260px;height:70px;left:-30px;bottom:40px;rotate:18deg; }

.thd-market-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.thd-product-card { display:grid; gap:10px; }
.thd-product-preview { aspect-ratio:16/9; border-radius:14px; background:var(--thd-gradient-soft); border:1px solid var(--thd-border); }
.thd-product-meta { display:flex; gap:8px; flex-wrap:wrap; }
.thd-market-detail { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:16px; }
.thd-fixture-note { font-size:12px; color:#8b6500; background:#fff7dd; border:1px solid #f8df94; border-radius:10px; padding:8px 10px; }

.thd-agent-client { display:grid; grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr); gap:14px; }
.thd-chat { display:grid; gap:10px; align-content:start; }
.thd-message { padding:12px; border-radius:14px; background:#edf3ff; }
.thd-message-user { background:#e4edff; margin-inline-start:12%; }
.thd-preview { min-height:420px; background:#fff; border:1px solid var(--thd-border); border-radius:var(--thd-r-lg); overflow:hidden; }
.thd-agent-pro {
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 360px;
  grid-template-rows:minmax(460px,1fr) 180px;
  grid-template-areas:"files code ai" "logs logs status";
  gap:10px;
}
.thd-pro-files { grid-area:files; }
.thd-pro-code { grid-area:code; }
.thd-pro-ai { grid-area:ai; }
.thd-pro-logs { grid-area:logs; }
.thd-pro-status { grid-area:status; }
.thd-code-panel {
  background:var(--thd-code); color:#dbe6ff; border-radius:var(--thd-r-lg);
  padding:16px; overflow:auto; font-family:var(--thd-font-code);
}
.thd-code-line { white-space:pre; min-width:max-content; }
.thd-mobile-view-switcher { display:none; }

@media (max-width:1199px) {
  :root { --thd-gutter:18px; }
  .thd-shell { grid-template-columns:72px minmax(0,1fr); }
  .thd-sidebar .thd-label { display:none; }
  .thd-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .thd-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .thd-hero { grid-template-columns:1fr; }
  .thd-art { min-height:180px; }
  .thd-market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .thd-agent-client { grid-template-columns:1fr 1fr; }
  .thd-agent-pro {
    grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);
    grid-template-rows:minmax(420px,1fr) 180px;
    grid-template-areas:"code ai" "logs status";
  }
  .thd-pro-files { display:none; }
}

@media (max-width:767px) {
  :root { --thd-gutter:12px; }
  body { font-size:14px; }
  .thd-page { padding:12px; padding-bottom:78px; }
  .thd-topbar { align-items:flex-start; flex-wrap:wrap; border-radius:14px; }
  .thd-nav { order:3; width:100%; overflow-x:auto; }
  .thd-nav button,.thd-nav a { flex:0 0 auto; }
  .thd-controls { width:100%; margin-inline-start:0; }
  .thd-controls .thd-select { flex:1; min-width:0; }
  .thd-shell { display:block; min-height:auto; }
  .thd-sidebar { display:none; }
  .thd-grid-4,.thd-grid-3,.thd-grid-2 { grid-template-columns:1fr; }
  .thd-card { padding:14px; border-radius:14px; }
  .thd-bottom-nav {
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; z-index:50;
    inset-inline:10px; bottom:8px; min-height:58px; padding:5px;
    background:rgba(255,255,255,.96); border:1px solid var(--thd-border);
    border-radius:16px; box-shadow:var(--thd-shadow-float);
  }
  .thd-bottom-nav button { min-width:44px; border:0; background:transparent; border-radius:10px; font-size:11px; }
  .thd-bottom-nav button[aria-current="page"] { color:var(--thd-primary-strong); background:#e8f0ff; }
  .thd-hero { min-height:0; padding:28px 18px; gap:18px; }
  .thd-hero h1 { font-size:clamp(32px,11vw,44px); }
  .thd-prompt { display:grid; }
  .thd-prompt .thd-button { width:100%; }
  .thd-art { min-height:150px; }
  .thd-market-grid,.thd-market-detail { grid-template-columns:1fr; }
  .thd-agent-client { grid-template-columns:1fr; }
  .thd-agent-client > * { min-height:320px; }
  .thd-agent-pro { display:block; }
  .thd-agent-pro > * { display:none; }
  .thd-agent-pro > .thd-mobile-active { display:block; min-height:430px; }
  .thd-mobile-view-switcher {
    display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; padding-bottom:2px;
  }
  .thd-mobile-view-switcher button { flex:0 0 auto; border:1px solid var(--thd-border); background:#fff; border-radius:10px; padding:0 12px; }
  .thd-table { min-width:580px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.001ms !important; animation-duration:.001ms !important; }
}