/* ════════════════════════════════════════════════════════════════
   TASSELORA® COLOR INTELLIGENCE — PREMIUM "MAISON" THEME
   Couture-atelier aesthetic · gold leaf · warm espresso · bone ink
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');

#tci-root,#tci-root *,#tci-root *::before,#tci-root *::after{margin:0;padding:0;box-sizing:border-box;}
#tci-root{
  --bg:#0B0A07;
  --bg2:#100D08;
  --surface:#151109;
  --card:#19140C;
  --card2:#1F1910;
  --line:#2B2316;
  --line-2:#3A2F1D;
  --ink:#F1E9D8;
  --ink-soft:#D8CDB6;
  --muted:#998C72;
  --faint:#5B5040;
  --gold:#C7A24A;
  --gold-bright:#E6CC82;
  --gold-deep:#8A6C2A;
  --gold-glow:rgba(199,162,74,0.14);
  --clay:#C77E54;
  --clay-deep:#7E4A30;
  --r-xs:3px;--r-sm:6px;--r-md:12px;--r-lg:20px;--r-xl:28px;
  --shadow-soft:0 2px 8px rgba(0,0,0,0.35);
  --shadow-lift:0 24px 60px -20px rgba(0,0,0,0.7),0 8px 24px -12px rgba(0,0,0,0.5);
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','DM Sans',system-ui,sans-serif;
  font-family:var(--sans);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(199,162,74,0.07), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 55%,var(--bg) 100%);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
#tci-root ::selection{background:rgba(199,162,74,0.28);color:var(--ink);}

/* grain + vignette */
#tci-root::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
#tci-root::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,0.45) 100%);
}
#tci-root>*{position:relative;z-index:1;}

/* hairline rule helper used in markup-less way via pseudo on sections */
.tci-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto;}

/* ─── HERO ───────────────────────────────────────────────────────── */
.tci-hero{
  position:relative;text-align:center;
  padding:clamp(72px,11vw,140px) 24px clamp(48px,7vw,84px);
  overflow:hidden;
}
.tci-hero::before{
  content:'T';position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:min(62vw,720px);line-height:1;color:rgba(199,162,74,0.035);
  pointer-events:none;z-index:-1;letter-spacing:-0.04em;
}
.tci-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:11px;font-weight:500;letter-spacing:0.42em;text-transform:uppercase;
  color:var(--gold);margin-bottom:30px;
  animation:tci-fade 0.9s var(--ease) both;
}
.tci-eyebrow span{width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);}
.tci-h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,7.5vw,92px);line-height:1.02;letter-spacing:-0.015em;
  color:var(--ink);margin:0 auto 26px;max-width:14ch;
  animation:tci-rise-in 1s var(--ease) 0.08s both;
}
.tci-h1 em{
  display:block;font-style:italic;font-weight:400;
  background:linear-gradient(96deg,var(--gold-bright),var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tci-hero-p{
  max-width:640px;margin:0 auto;font-size:15px;line-height:1.85;
  color:var(--muted);font-weight:300;letter-spacing:0.01em;
  animation:tci-fade 1s var(--ease) 0.2s both;
}
.tci-hero-stats{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:0;margin-top:52px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:760px;margin-left:auto;margin-right:auto;
  animation:tci-fade 1s var(--ease) 0.32s both;
}
.tci-stat{
  flex:1 1 120px;padding:22px 14px;position:relative;
}
.tci-stat+.tci-stat::before{
  content:'';position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--line);
}
.tci-stat strong{
  display:block;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;
  color:var(--gold-bright);margin-bottom:8px;letter-spacing:0.01em;
}
.tci-stat span{
  font-size:9.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);font-weight:500;
}

.tci-scroll-hint{
  text-align:center;font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--faint);padding:30px 0 6px;animation:tci-pulse 2.6s ease-in-out infinite;
}

/* ─── LAYOUT ─────────────────────────────────────────────────────── */
.tci-layout{
  display:grid;grid-template-columns:380px 1fr;gap:34px;align-items:start;
  max-width:1280px;margin:14px auto 0;padding:0 clamp(18px,4vw,48px) 90px;
}
@media(max-width:980px){.tci-layout{grid-template-columns:1fr;gap:26px;}}

/* ─── PANEL ──────────────────────────────────────────────────────── */
.tci-panel{
  position:sticky;top:24px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;box-shadow:var(--shadow-lift);
  animation:tci-rise-in 0.9s var(--ease) 0.15s both;
}
@media(max-width:980px){.tci-panel{position:relative;top:0;}}
.tci-panel-head{padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line);}
.tci-panel-head h3{
  font-family:var(--serif);font-weight:500;font-size:25px;color:var(--ink);letter-spacing:0.01em;
}
.tci-panel-head p{
  font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:var(--gold);margin-top:7px;font-weight:500;
}
.tci-panel-section{margin-bottom:26px;}
.tci-sec-label{
  font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);
  margin-bottom:13px;font-weight:500;display:flex;align-items:center;gap:10px;
}
.tci-sec-label::after{content:'';flex:1;height:1px;background:var(--line);}

/* context grid */
.tci-ctx-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.tci-ctx-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:13px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  cursor:pointer;transition:all 0.28s var(--ease);text-align:left;position:relative;overflow:hidden;
}
.tci-ctx-btn::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform 0.3s var(--ease);
}
.tci-ctx-btn:hover{border-color:var(--gold-deep);transform:translateY(-2px);background:var(--card2);}
.tci-ctx-btn.active{
  border-color:var(--gold);background:linear-gradient(180deg,rgba(199,162,74,0.12),rgba(199,162,74,0.04));
  box-shadow:0 0 0 1px rgba(199,162,74,0.25),0 10px 30px -14px rgba(199,162,74,0.4);
}
.tci-ctx-btn.active::before{transform:scaleY(1);}
.tci-ctx-icon{font-size:18px;line-height:1;filter:grayscale(0.15);}
.tci-ctx-name{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:0.02em;}
.tci-ctx-sub{font-size:9.5px;color:var(--muted);letter-spacing:0.04em;}
.tci-ctx-btn.active .tci-ctx-name{color:var(--gold-bright);}

/* select */
.tci-select{
  width:100%;appearance:none;-webkit-appearance:none;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 42px 14px 15px;font-family:var(--sans);font-size:13.5px;font-weight:400;letter-spacing:0.02em;
  cursor:pointer;transition:all 0.25s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C7A24A' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.tci-select:hover{border-color:var(--gold-deep);}
.tci-select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);}
.tci-select option{background:#151109;color:var(--ink);}

/* fiber pills (subtle rounded chips) */
.tci-fiber-wrap{display:flex;flex-wrap:wrap;gap:7px;}
.tci-fiber-tag{
  font-size:11px;letter-spacing:0.04em;padding:8px 13px;
  border:1px solid var(--line);border-radius:40px;
  background:var(--surface);color:var(--muted);cursor:pointer;
  transition:all 0.24s var(--ease);user-select:none;white-space:nowrap;
}
.tci-fiber-tag:hover{border-color:var(--gold-deep);color:var(--ink-soft);transform:translateY(-1px);}
.tci-fiber-tag.active{
  background:linear-gradient(180deg,rgba(199,162,74,0.18),rgba(199,162,74,0.06));
  border-color:var(--gold);color:var(--gold-bright);font-weight:500;
  box-shadow:0 0 0 1px rgba(199,162,74,0.2);
}

/* category buttons (premium gold-leaf selector) */
.tci-cat-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.tci-cat-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:0.05em;
  padding:10px 16px 10px 14px;cursor:pointer;user-select:none;white-space:nowrap;
  color:var(--ink-soft);border:1px solid var(--line-2);border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--card2),var(--surface));
  position:relative;overflow:hidden;transition:all 0.28s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset;
}
.tci-cat-tag::before{
  content:'';width:6px;height:6px;flex:0 0 auto;border:1px solid var(--gold-deep);
  transform:rotate(45deg);transition:all 0.28s var(--ease);
}
.tci-cat-tag::after{
  content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(230,204,130,0.35),transparent);
  transition:left 0.55s var(--ease);
}
.tci-cat-tag:hover{
  color:var(--ink);border-color:var(--gold-deep);transform:translateY(-2px);
  box-shadow:0 8px 20px -12px rgba(199,162,74,0.45);
}
.tci-cat-tag:hover::before{border-color:var(--gold);transform:rotate(45deg) scale(1.15);}
.tci-cat-tag.active{
  color:#16120A;font-weight:600;border-color:var(--gold);
  background:linear-gradient(100deg,var(--gold-bright),var(--gold) 48%,var(--gold-deep));
  box-shadow:0 0 0 1px rgba(199,162,74,0.4),0 10px 26px -12px rgba(199,162,74,0.6);
}
.tci-cat-tag.active::before{background:#16120A;border-color:#16120A;transform:rotate(45deg) scale(0.85);}
.tci-cat-tag.active:hover{transform:translateY(-2px);}
.tci-cat-tag.active:hover::after,.tci-cat-tag:hover::after{left:150%;}

/* generate button */
.tci-btn{
  width:100%;margin-top:8px;padding:17px 20px;cursor:pointer;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;
  color:#16120A;border:none;border-radius:var(--r-md);position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--gold-bright),var(--gold) 45%,var(--gold-deep));
  transition:all 0.3s var(--ease);box-shadow:0 12px 30px -12px rgba(199,162,74,0.6);
}
.tci-btn::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.45),transparent);
  transition:left 0.6s var(--ease);
}
.tci-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(199,162,74,0.7);}
.tci-btn:hover:not(:disabled)::after{left:140%;}
.tci-btn:active:not(:disabled){transform:translateY(0);}
.tci-btn:disabled{opacity:0.32;cursor:not-allowed;filter:grayscale(0.5);box-shadow:none;}

/* ─── RESULTS / EMPTY ────────────────────────────────────────────── */
.tci-results{min-height:480px;animation:tci-fade 0.9s var(--ease) 0.25s both;}
.tci-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:480px;padding:48px 30px;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  background:radial-gradient(60% 60% at 50% 30%,rgba(199,162,74,0.05),transparent 70%);
}
.tci-empty-orb{
  font-size:42px;margin-bottom:24px;width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,rgba(199,162,74,0.18),transparent 70%);
  border:1px solid var(--line-2);animation:tci-float 4s ease-in-out infinite;
}
.tci-empty h3{font-family:var(--serif);font-weight:500;font-size:28px;color:var(--ink);margin-bottom:14px;}
.tci-empty p{max-width:440px;font-size:13.5px;line-height:1.8;color:var(--muted);font-weight:300;}

/* ─── HEADER CARD ────────────────────────────────────────────────── */
.tci-header-card{
  position:relative;background:linear-gradient(165deg,var(--card2),var(--card));
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:30px 32px 28px;margin-bottom:26px;overflow:hidden;
  box-shadow:var(--shadow-lift);animation:tci-rise-in 0.7s var(--ease) both;
}
.tci-card-banner{
  position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--clay),var(--gold),transparent);
}
.tci-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;}
.tci-badge{
  display:inline-block;font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:12px;
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
.tci-card-title{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.08;color:var(--ink);letter-spacing:0.005em;}
.tci-card-sub{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.6;font-weight:300;max-width:52ch;}
.tci-season-tag{
  flex:0 0 auto;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:40px;padding:7px 13px;white-space:nowrap;
}
.tci-trend-note{
  font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.7;color:var(--ink-soft);
  padding:16px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px;
}
.tci-card-bottom{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:560px){.tci-card-bottom{grid-template-columns:1fr;gap:16px;}}
.tci-info-block h5{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:11px;font-weight:600;}
.tci-top-colors{display:flex;flex-wrap:wrap;gap:7px;}
.tci-top-pill{
  font-size:11px;color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--line);border-radius:40px;padding:6px 12px;letter-spacing:0.02em;
}
.tci-avoid-text{font-size:12.5px;line-height:1.7;color:var(--muted);font-weight:300;}

.tci-mkt-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.tci-mkt-chip{
  font-size:11px;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:40px;padding:6px 13px;letter-spacing:0.02em;
}
.tci-mkt-chip strong{color:var(--gold-bright);font-weight:500;}

.tci-culture{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
@media(max-width:560px){.tci-culture{grid-template-columns:1fr;}}
.tci-culture-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;}
.tci-culture-box h6{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;font-weight:600;}
.tci-culture-box p{font-size:12.5px;line-height:1.7;color:var(--muted);font-weight:300;}

/* ─── PALETTE CARD ───────────────────────────────────────────────── */
.tci-palette-card{
  background:linear-gradient(168deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 30px;margin-bottom:24px;box-shadow:var(--shadow-soft);
  animation:tci-rise-in 0.7s var(--ease) both;transition:border-color 0.3s var(--ease),box-shadow 0.3s var(--ease);
}
.tci-palette-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-lift);}
.tci-palette-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px;}
.tci-pnum{font-size:9.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
.tci-palette-name{font-family:var(--serif);font-weight:500;font-size:27px;color:var(--ink);margin-top:6px;line-height:1.1;}
.tci-palette-story{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.65;font-weight:300;font-style:italic;max-width:60ch;}

.tci-swatches-wrap{margin-bottom:22px;}
.tci-swatches-label{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:500;}
.tci-swatches-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:16px;}
.tci-swatch{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:transform 0.3s var(--ease),border-color 0.3s var(--ease);
}
.tci-swatch:hover{transform:translateY(-4px);border-color:var(--gold-deep);}
.tci-swatch-color{
  height:88px;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06),inset 0 -30px 40px -30px rgba(0,0,0,0.5);
}
.tci-hex-badge{
  font-size:9.5px;font-weight:600;letter-spacing:0.06em;color:#16120A;
  background:rgba(255,255,255,0.82);padding:3px 7px;border-radius:40px;backdrop-filter:blur(4px);
}
.tci-swatch-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:3px;}
.tci-swatch-name{font-family:var(--serif);font-size:16px;font-weight:500;color:var(--ink);line-height:1.15;}
.tci-swatch-role{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.tci-swatch-filter{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:300;}
.tci-strip{display:flex;height:14px;border-radius:40px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);}
.tci-strip-seg{flex:1;transition:flex 0.3s var(--ease);}
.tci-strip:hover .tci-strip-seg{flex:0.6;}
.tci-strip .tci-strip-seg:hover{flex:2.4;}

.tci-palette-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:20px 0;border-top:1px solid var(--line);}
@media(max-width:560px){.tci-palette-meta{grid-template-columns:1fr;gap:16px;}}
.tci-meta-block h5{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:11px;font-weight:600;}
.tci-meta-list{list-style:none;display:flex;flex-direction:column;gap:7px;}
.tci-meta-list li{font-size:12px;color:var(--ink-soft);line-height:1.5;padding-left:15px;position:relative;font-weight:300;}
.tci-meta-list li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border:1px solid var(--gold);transform:rotate(45deg);}

/* ─── SKU BLOCK ──────────────────────────────────────────────────── */
.tci-sku-block{margin-top:4px;border-top:1px solid var(--line);padding-top:20px;}
.tci-sku-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.tci-sku-head h5{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.tci-sku-count{font-size:10px;letter-spacing:0.06em;color:var(--muted);font-style:italic;}
.tci-sku-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@media(max-width:560px){.tci-sku-grid{grid-template-columns:1fr;}}
.tci-sku-card{
  display:flex;align-items:center;gap:12px;padding:11px 13px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:all 0.24s var(--ease);
}
.tci-sku-card:hover{border-color:var(--gold-deep);transform:translateX(3px);}
.tci-sku-dot{width:30px;height:30px;border-radius:7px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);}
.tci-sku-meta{min-width:0;}
.tci-sku-id{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:0.08em;}
.tci-sku-desc{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:300;margin-top:2px;}
.tci-sku-empty{font-size:12px;color:var(--faint);font-style:italic;line-height:1.6;padding:4px 0;font-weight:300;}

/* ─── PRODUCTION NOTE ────────────────────────────────────────────── */
.tci-prod-note{
  margin-top:20px;padding:18px 20px;border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(199,126,84,0.08),rgba(199,162,74,0.05));
  border:1px solid var(--line-2);font-size:12.5px;line-height:1.75;color:var(--ink-soft);font-weight:300;
  position:relative;
}
.tci-prod-note strong{
  display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--clay);margin-bottom:8px;font-weight:600;
}

/* ─── EXPORT ─────────────────────────────────────────────────────── */
.tci-export-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap;}
.tci-export-label{font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint);font-weight:500;}
.tci-export-btns{display:flex;gap:9px;flex-wrap:wrap;}
.tci-export-btn{
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);background:transparent;border:1px solid var(--gold-deep);border-radius:40px;
  padding:9px 16px;cursor:pointer;transition:all 0.24s var(--ease);
}
.tci-export-btn:hover{background:var(--gold-glow);border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px);}

/* ─── LOADING ────────────────────────────────────────────────────── */
.tci-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:480px;text-align:center;padding:40px;}
.tci-spinner{
  width:46px;height:46px;border-radius:50%;margin-bottom:22px;
  border:1.5px solid var(--line);border-top-color:var(--gold);animation:tci-spin 0.9s linear infinite;
}
.tci-loading-steps{display:flex;flex-direction:column;gap:13px;text-align:left;}
.tci-step{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--faint);transition:color 0.4s var(--ease);font-weight:300;letter-spacing:0.02em;}
.tci-step-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--faint);flex:0 0 auto;transition:all 0.4s var(--ease);}
.tci-step.done{color:var(--ink-soft);}
.tci-step.done .tci-step-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px var(--gold-glow);}

/* ─── ERROR ──────────────────────────────────────────────────────── */
.tci-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px;text-align:center;gap:14px;color:var(--muted);padding:40px;}
.tci-retry-btn{margin-top:10px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#16120A;background:var(--gold);border:none;border-radius:40px;padding:11px 24px;cursor:pointer;transition:all 0.24s var(--ease);}
.tci-retry-btn:hover{background:var(--gold-bright);transform:translateY(-1px);}

/* ─── HOW IT WORKS ───────────────────────────────────────────────── */
.tci-how{max-width:1180px;margin:30px auto 0;padding:70px clamp(18px,4vw,48px);border-top:1px solid var(--line);}
.tci-how-head{text-align:center;margin-bottom:56px;}
.tci-how-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.5vw,48px);color:var(--ink);letter-spacing:0.005em;}
.tci-how-head p{font-size:13px;color:var(--muted);margin-top:16px;max-width:620px;margin-left:auto;margin-right:auto;line-height:1.7;font-weight:300;}
.tci-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
@media(max-width:860px){.tci-steps-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.tci-steps-grid{grid-template-columns:1fr;}}
.tci-how-step{background:var(--card);padding:34px 26px;transition:background 0.3s var(--ease);}
.tci-how-step:hover{background:var(--card2);}
.tci-step-n{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--gold-deep);margin-bottom:16px;letter-spacing:0.02em;}
.tci-how-step h4{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink);margin-bottom:11px;}
.tci-how-step p{font-size:12.5px;line-height:1.75;color:var(--muted);font-weight:300;}

/* ─── FOOTER ─────────────────────────────────────────────────────── */
.tci-footer{text-align:center;padding:64px 24px 80px;border-top:1px solid var(--line);}
.tci-footer-brand{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--ink);letter-spacing:0.04em;}
.tci-footer-brand::after{content:'';display:block;width:52px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:18px auto 0;}
.tci-footer-tag{font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--faint);margin-top:18px;font-weight:500;}

/* ─── ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes tci-spin{to{transform:rotate(360deg);}}
@keyframes tci-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes tci-rise-in{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes tci-fade{from{opacity:0;}to{opacity:1;}}
@keyframes tci-pulse{0%,100%{opacity:0.4;}50%{opacity:0.9;}}
@keyframes tci-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media(prefers-reduced-motion:reduce){#tci-root *{animation:none!important;transition:none!important;}}

/* scrollbar */
#tci-root *::-webkit-scrollbar{width:10px;height:10px;}
#tci-root *::-webkit-scrollbar-track{background:var(--bg);}
#tci-root *::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:40px;border:2px solid var(--bg);}
#tci-root *::-webkit-scrollbar-thumb:hover{background:var(--gold-deep);}