/* KORD v1.8.5 — final design system. Loaded LAST to prevent legacy cascade collisions.
 * No external image assets or custom glyphs. This layer only changes presentation.
 */
:root {
  --kf-ink:#121216;
  --kf-night:#0d0d10;
  --kf-red:#ce1328;
  --kf-red-bright:#e42137;
  --kf-red-soft:#fff1f3;
  --kf-grey:#666671;
  --kf-grey-light:#8a8a95;
  --kf-border:#e3e3e8;
  --kf-canvas:#f5f5f7;
  --kf-shadow:0 12px 34px rgba(10,10,15,.055);
  --kf-shadow-hover:0 20px 44px rgba(10,10,15,.10);
  --kf-radius:10px;
  --kf-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --kf-body:"Manrope",system-ui,-apple-system,sans-serif;
}
html{scroll-padding-top:104px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--kf-body);color:var(--kf-ink);background:var(--kf-canvas);letter-spacing:-.012em;line-height:1.65}
:where(p,.muted-copy,.side-description,.hb-hero-description){text-wrap:pretty}
:where(.container,.control-main,.dashboard-main,.order-main,.order-side,.detail-sidebar,.auth-card,.panel,.control-panel){min-width:0}
:where(h1,h2,h3,h4){overflow-wrap:break-word;hyphens:auto}
:where(h1,h2,h3,h4,.hb-hero h1,.page-hero.compact h1,.hb-section-heading h2,.hb-cta h2,.control-top h1,.control-section-title h2,.auth-card h1,.auth-aside h2,.kord-brand-type strong){font-family:var(--kf-display)!important;letter-spacing:.013em;line-height:1.05;text-transform:uppercase}
.hb-hero h1{font-size:clamp(60px,6.8vw,116px);line-height:.90;letter-spacing:.012em;overflow-wrap:normal;hyphens:none}
.hb-hero h1 span{color:#f33a4e;-webkit-text-fill-color:#f33a4e;-webkit-text-stroke:0}
.hb-hero-description{font-size:clamp(14px,1.25vw,17px);line-height:1.84;max-width:58ch;color:#c6c6ce}
.hb-section-heading h2,.section-header h2{font-size:clamp(34px,3.8vw,55px);line-height:1.06}
.hb-section-heading p,.section-header p{max-width:66ch;font-size:13px;line-height:1.8}
.hb-category-card strong{font-family:var(--kf-display);font-size:clamp(18px,1.6vw,24px);line-height:1.14;letter-spacing:.025em;text-transform:uppercase}
.hb-category-description{font-size:12px;color:#71717a;line-height:1.73;min-height:38px}
.hb-product h3{font-family:var(--kf-display);font-size:clamp(18px,1.42vw,23px);line-height:1.14;letter-spacing:.02em;text-transform:uppercase;min-height:0;margin:8px 0}
.hb-product-summary{font-size:12px;line-height:1.8;min-height:48px}
.hb-product-foot strong{font-family:var(--kf-display);font-size:clamp(22px,1.75vw,29px);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.015em;overflow-wrap:anywhere}
.hb-steps h3,.panel h3,.action-panel h3,.control-panel h3,.integration-card h3{font-family:var(--kf-display);text-transform:uppercase;letter-spacing:.018em;line-height:1.17}
.hb-steps h3{font-size:24px}
.hb-cta h2{font-size:clamp(40px,4.6vw,72px);line-height:1.02}
.page-hero.compact h1{font-size:clamp(40px,4.5vw,68px);line-height:1.02;overflow-wrap:anywhere}
.auth-card h1{font-size:clamp(36px,3.8vw,54px);line-height:1.05}
.auth-aside h2{font-size:clamp(40px,4vw,58px);line-height:1.08}
.control-top h1{font-size:clamp(40px,4.4vw,68px);line-height:1.04}
.control-section-title h2{font-size:clamp(32px,3.1vw,46px);line-height:1.08}
:where(.hb-kicker,.overline,.control-small,.hb-product-category,.hb-product-kind,.hb-product-badge,.hb-step-index,.side-group,.kord-frame-top,.kord-frame-bottom){letter-spacing:.09em}
.kord-brand-type strong{font-size:36px;line-height:.96;letter-spacing:.075em}
.kord-brand-type small{font-size:10px;letter-spacing:.27em}
.desktop-nav a{font-family:var(--kf-body);font-size:12px;letter-spacing:.07em;font-weight:800}
.nav-actions{min-width:0}
/* Buttons and links: one geometry and clear states across all templates. */
:where(.btn,.mini-button,.hb-search button,.hb-preferences-submit,.kord-copy-button,.logout-btn){font-family:var(--kf-body);font-size:12px;font-weight:800;letter-spacing:.035em;line-height:1.3;transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease,opacity .22s ease}
.btn{min-height:46px;border-radius:6px;padding:12px 19px;gap:9px}
.btn-sm{min-height:40px;border-radius:6px;padding:10px 15px}
:where(.btn,.mini-button,.hb-search button,.kord-copy-button):not(:disabled):hover{transform:translateY(-2px)}
.btn-dark,.hb-search button{background:#16161a;border-color:#16161a;color:#fff;box-shadow:none}
.btn-dark:hover:not(:disabled){background:var(--kf-red);border-color:var(--kf-red);box-shadow:0 10px 28px rgba(206,19,40,.16)}
.hb-search button,.header .btn-dark{background:var(--kf-red);border-color:var(--kf-red)}
.hb-search button:hover,.header .btn-dark:hover:not(:disabled){background:var(--kf-red-bright);border-color:var(--kf-red-bright)}
.btn-outline{background:#fff;border:1px solid #cfd0d6;color:#1a1a20}
.btn-outline:hover:not(:disabled){background:#fff3f4;border-color:var(--kf-red);color:#ae1325}
.btn-white{background:#fff;border-color:#fff;color:#141418}
.btn:disabled,.mini-button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
:where(.table-action,.text-link,.hb-section-link,.kord-primary-link){text-underline-offset:4px}
:where(.table-action,.text-link,.hb-section-link):hover{text-decoration:underline;text-decoration-thickness:1px}
:where(button,a,summary,input,select,textarea):focus-visible{outline:3px solid #ee2a42;outline-offset:3px}
/* Form elements: common height, labels, and clear validation without red-at-rest inputs. */
:where(.stacked-form,.inside-form) label{font-size:12px;font-weight:800;letter-spacing:.01em;line-height:1.6;color:#292930}
:where(.input,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){font-family:var(--kf-body);font-size:13px;line-height:1.5}
:where(.input,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select){min-height:45px;border-radius:6px;max-width:100%}
:where(textarea,.input.textarea){min-height:92px;border-radius:6px;resize:vertical}
:where(.input,input,select,textarea)::placeholder{color:#82838e;opacity:1}
:where(.input,input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus{outline:3px solid rgba(206,19,40,.17);outline-offset:0;border-color:#c92035;background-color:#fff}
:where(input,textarea,select):user-invalid{border-color:#b9162a!important;box-shadow:0 0 0 2px rgba(185,22,42,.10)}
:where(input[type="checkbox"],input[type="radio"]){accent-color:var(--kf-red);width:17px;height:17px;vertical-align:middle}
:where(form .notice,.auth-alert){line-height:1.7}
:where(.auth-card,.form-panel,.panel,.action-panel,.control-panel,.integration-card,.detail-section,.wallet-stat,.kord-security-summary){border-radius:var(--kf-radius);border-color:var(--kf-border)}
.auth-card .input{min-height:50px;background:#fff}
.auth-bottom{line-height:1.85}
.auth-bottom a,.form-subline a{font-weight:800}
/* Cards: restrained lines and shadows, never decorative motion at rest. */
:where(.hb-category-card,.product-card.hb-product,.hb-steps article){border-radius:9px;box-shadow:var(--kf-shadow);will-change:auto;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
:where(.hb-category-card,.product-card.hb-product,.hb-steps article):hover{transform:translateY(-4px);box-shadow:var(--kf-shadow-hover)}
.hb-category-card:hover,.product-card.hb-product:hover{border-color:#d7a1a8}
.hb-category-card .hb-category-icon,.hb-steps .hb-step-icon{border-radius:6px}
.hb-category-bottom{font-weight:800}
.empty-state{max-width:100%;border:1px solid var(--kf-border);border-radius:12px;background:linear-gradient(180deg,#fff,#fcfcfd)}
.empty-state .empty-icon{color:var(--kf-red)}
/* Data-heavy pages, real readable statuses, and comfortable scroll areas. */
.table-scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:8px;border:1px solid var(--kf-border);background:#fff}
.data-table{border-collapse:collapse;width:100%;font-size:12px}
.data-table thead{background:#1a1a1e}
.data-table th{font-family:var(--kf-body);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.075em;color:#f8f8fa;white-space:nowrap;padding:14px 16px}
.data-table td{padding:14px 16px;color:#41414c;line-height:1.65;vertical-align:middle;border-bottom:1px solid #ededf0;overflow-wrap:anywhere}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:nth-child(even){background:#fafafa}
.data-table tbody tr:hover{background:#fff4f5}
.table-primary{font-weight:800;color:#17171b}
.table-primary:hover{color:#b91224;text-decoration:underline}
:where(.status,.status-pill,.listing-status,.control-pill,.integration-state){display:inline-flex;align-items:center;gap:6px;border-radius:5px;padding:6px 9px;line-height:1.35;letter-spacing:.005em;font-size:11px;font-weight:800;white-space:normal}
.status-published,.status-completed,.status-confirmed,.status-verified{background:#f2f2f3;color:#222228;border:1px solid #d9d9de}
.status-pending_review,.status-awaiting_payment,.status-pending,.status-paid_held,.status-in_progress{background:#fff5ed;color:#7d4017;border:1px solid #eed9c3}
.status-rejected,.status-disputed,.status-failed,.status-banned{background:#fff1f3;color:#a41d2d;border:1px solid #eac0c5}
:where(.panel,.control-panel,.integration-card) .panel-head{gap:12px;align-items:flex-start}
.panel-head h3{line-height:1.12}
.panel-head p{line-height:1.7}
/* Financial transparency and admin forms stay visually calm, not promotional. */
.wallet-primary,.wallet-primary-live{border-radius:10px}
.wallet-stat .stat-icon{border-radius:7px}
.control-shell .control-sidebar .side-link{border-radius:6px}
.control-shell .control-stats{gap:12px}
.control-shell .control-stat{border-radius:8px;padding:18px}
.control-quick-card{border-radius:8px;gap:12px}
.control-section{scroll-margin-top:98px}
.integration-card-head{gap:10px;align-items:flex-start}
.integration-card-head h3{font-size:19px}
.control-reconfirm{gap:10px}
.control-list-item{overflow-wrap:anywhere}
.security-session{border-color:var(--kf-border)}
.kord-deal-steps>li.current>span{background:var(--kf-red)}
/* UX motion: finite and optional; never hide content prior to JS. */
@keyframes kord-enter{from{opacity:.65;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
:where(.hb-hero-main,.kord-hero-symbol){animation:kord-enter .58s cubic-bezier(.18,.7,.2,1) both}
.btn.is-loading{position:relative;cursor:progress;opacity:.82;transform:none;pointer-events:none}
.btn.is-loading::after{content:"";display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kord-spin .7s linear infinite;flex:none}
@keyframes kord-spin{to{transform:rotate(360deg)}}
.kord-character-count{display:block;margin-top:4px;text-align:right;color:#777781;font-size:11px;font-variant-numeric:tabular-nums}
/* Keep the chat counter in the same column as the textarea in compact layouts. */
.chat-form .kord-character-count{min-width:85px;align-self:center}
/* Responsive: prevent long labels, prices and titles from clipping. */
@media(max-width:1100px){.data-table{font-size:11px}.data-table th,.data-table td{padding:12px}.control-top h1{font-size:clamp(39px,4vw,56px)}}
@media(max-width:850px){.hb-hero h1{font-size:clamp(56px,9vw,84px)}.hb-section-heading h2{font-size:clamp(32px,5vw,47px)}.kord-hero-frame{min-height:0}.hb-product h3{font-size:19px}}
@media(max-width:620px){
  .header{height:72px}
  .kord-logo{width:43px;height:43px}
  .kord-brand-type strong{font-size:29px}
  .kord-brand-type small{font-size:8px}
  .hb-hero h1{font-size:clamp(48px,12vw,70px);line-height:.97}
  .hb-hero-description{font-size:13px}
  .hb-section-heading h2{font-size:clamp(29px,8vw,42px)}
  .hb-category-card strong{font-size:19px}
  .hb-product h3{font-size:19px}
  .hb-product-summary{min-height:0}
  .hb-product-foot strong{font-size:24px}
  .hb-steps h3{font-size:21px}
  .auth-card h1{font-size:clamp(30px,8.4vw,43px);line-height:1.1}
  .page-hero.compact h1{font-size:clamp(29px,8vw,42px);line-height:1.1}
  .control-top h1{font-size:clamp(31px,8vw,46px)}
  .control-section-title h2{font-size:clamp(29px,7vw,41px)}
  .control-panel,.integration-card,.panel{padding:16px}
  .table-scroll{border-radius:6px}
  .data-table th,.data-table td{padding:11px 12px}
  .btn{min-height:44px;white-space:normal;overflow-wrap:break-word}
  .chat-form .kord-character-count{align-self:flex-end}
  .control-reconfirm{flex-wrap:wrap}
}
@media(max-width:360px){.kord-brand-type strong{font-size:26px}.hb-hero h1{font-size:clamp(42px,12vw,50px)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  :where(.hb-category-card,.product-card.hb-product,.hb-steps article,.btn):hover{transform:none!important}
}
/* The readiness indicator must not imply financial readiness when live mode is off. */
.control-live:not(.is-ready) .status-dot{background:var(--kf-red)!important;box-shadow:0 0 0 3px rgba(206,19,40,.13)!important}
