@import url('./hsapi_tokens.css');

*{box-sizing:border-box;}
body{margin:0;background:var(--color-bg-base);color:var(--color-text-primary);font-family:var(--font-family-base);line-height:var(--line-height-normal);}

.hs-container{max-width:1200px;margin:0 auto;padding:0 var(--space-24);} 

.hs-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-16) 0;border-bottom:var(--border-width-1) solid var(--color-border-default);} 
.hs-logo{font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);} 
.hs-nav{display:flex;gap:var(--space-16);color:var(--color-text-secondary);} 
.hs-nav a{color:inherit;text-decoration:none;} 

.hs-footer{padding:var(--space-24) 0;border-top:var(--border-width-1) solid var(--color-border-default);color:var(--color-text-secondary);font-size:var(--font-size-sm);} 

.hs-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:var(--radius-md);border:1px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-primary);text-decoration:none;gap:8px;} 
.hs-btn.primary{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff;} 
.hs-btn.primary:hover{background:#1F63D8;} 
.hs-btn.primary:active{background:#184FB0;} 
.hs-btn.disabled{background:#243044;color:#6E7A90;border-color:#243044;pointer-events:none;} 

.hs-input{width:100%;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--color-border-default);background:var(--color-bg-surface);color:var(--color-text-primary);} 
.hs-input:focus{outline:none;border-color:var(--color-border-active);box-shadow:var(--shadow-focus);} 
.hs-input.error{border-color:var(--color-state-error);} 

.hs-card{background:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:var(--space-16);} 

/* v3 helpers */
.hs-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--color-border-default);background:rgba(18,24,36,.7);color:var(--color-text-secondary);font-size:12px;}
.hs-badge.live{border-color:rgba(33,225,122,.35);color:var(--color-state-live);}
.hs-badge.vip{border-color:rgba(255,181,71,.35);color:var(--color-state-vip);}
.hs-badge.risk{border-color:rgba(245,165,36,.35);color:var(--color-state-warning);}

.hs-kpi{font-family:var(--font-family-numeric);font-weight:var(--font-weight-bold);font-size:26px;line-height:1.1;}
.hs-sub{color:var(--color-text-secondary);font-size:12px;}

.hs-bar{height:10px;border-radius:999px;background:rgba(36,48,68,.9);border:1px solid var(--color-border-default);overflow:hidden;}
.hs-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--color-brand-primary),var(--color-brand-secondary));}

.hs-table{width:100%;border-collapse:collapse;font-size:12px;}
.hs-table th,.hs-table td{border-bottom:1px solid var(--color-border-default);padding:10px 8px;text-align:left;white-space:nowrap;}
.hs-arrow.up{color:var(--color-state-success);} 
.hs-arrow.down{color:var(--color-state-error);} 

@media (max-width: 767px){
  .hs-container{padding:0 var(--space-16);} 
  .hs-nav{display:none;} 
}