/* CoreStream reusable components */

/* Buttons */
.cs-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--cs-control-height-large);
  padding:0 var(--cs-space-5);
  border:1px solid transparent;
  border-radius:var(--cs-radius-lg);
  font-size:var(--cs-font-size-body);
  font-weight:var(--cs-font-weight-semibold);
  line-height:var(--cs-line-height-control);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--cs-duration-fast) var(--cs-ease-standard), box-shadow var(--cs-duration-base) var(--cs-ease-standard), border-color var(--cs-duration-base) var(--cs-ease-standard), background-color var(--cs-duration-base) var(--cs-ease-standard), color var(--cs-duration-base) var(--cs-ease-standard);
  -webkit-tap-highlight-color:transparent;
}
.cs-button:hover { transform:translateY(-1px); }
.cs-button:active { transform:translateY(0); }
.cs-button:focus-visible { outline:none; box-shadow:var(--cs-shadow-focus); }
.cs-button[disabled], .cs-button[aria-disabled="true"] { cursor:not-allowed; opacity:.48; transform:none; box-shadow:none; }
.cs-button--primary { background:var(--cs-color-primary); color:var(--cs-color-primary-ink); box-shadow:0 10px 28px rgba(1,126,255,.24); }
.cs-button--primary:hover { background:var(--cs-color-primary-hover); box-shadow:0 14px 34px rgba(1,126,255,.34); }
.cs-button--primary:active { background:var(--cs-color-primary-pressed); }
.cs-button--secondary { background:rgba(255,255,255,.02); border-color:var(--cs-color-line-strong); color:var(--cs-color-text); }
.cs-button--secondary:hover { background:rgba(204,225,246,.08); border-color:rgba(204,225,246,.44); }
.cs-button--tertiary { min-height:var(--cs-touch-target); padding-inline:var(--cs-space-3); background:transparent; color:var(--cs-color-light-blue); }
.cs-button--tertiary:hover { background:rgba(204,225,246,.08); }
.cs-button--member { background:var(--cs-color-light-blue); color:var(--cs-color-bg); box-shadow:0 10px 26px rgba(204,225,246,.12); }
.cs-button--danger { background:var(--cs-color-danger); color:#fff; }
.cs-button--full { width:100%; }
.cs-button__icon { width:1.25rem; height:1.25rem; flex:none; }
.cs-button__icon--start { margin-inline-end:var(--cs-space-2); }
.cs-button__icon--end { margin-inline-start:var(--cs-space-2); }
.cs-button__spinner { width:1.125rem; height:1.125rem; margin-inline-end:var(--cs-space-2); border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:cs-spin 800ms linear infinite; }
@keyframes cs-spin { to { transform:rotate(360deg); } }
.cs-inline-link { color:var(--cs-color-light-blue); font-weight:var(--cs-font-weight-medium); text-underline-offset:.2em; }
.cs-inline-link:hover { color:var(--cs-color-text-strong); }

/* Form fields */
.cs-field { display:grid; gap:var(--cs-space-2); min-width:0; }
.cs-field__label-row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--cs-space-3); }
.cs-field__label { color:var(--cs-color-text); font-size:var(--cs-font-size-small); font-weight:var(--cs-font-weight-semibold); line-height:1.35; }
.cs-field__optional { color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); font-weight:var(--cs-font-weight-regular); }
.cs-field__control { position:relative; min-width:0; }
.cs-input, .cs-select, .cs-textarea {
  width:100%;
  border:1px solid var(--cs-color-line-strong);
  border-radius:var(--cs-radius-lg);
  background:var(--cs-color-field-bg);
  color:var(--cs-color-text-strong);
  caret-color:var(--cs-color-primary);
  line-height:var(--cs-line-height-control);
  transition:border-color var(--cs-duration-base) var(--cs-ease-standard), box-shadow var(--cs-duration-base) var(--cs-ease-standard), background-color var(--cs-duration-base) var(--cs-ease-standard);
}
.cs-input, .cs-select { min-height:var(--cs-control-height); padding:0 var(--cs-space-4); }
.cs-textarea { min-height:7rem; padding:var(--cs-space-4); resize:vertical; }
.cs-input::placeholder, .cs-textarea::placeholder { color:var(--cs-color-text-subtle); opacity:1; }
.cs-input:hover, .cs-select:hover, .cs-textarea:hover { border-color:rgba(204,225,246,.38); }
.cs-input:focus, .cs-select:focus, .cs-textarea:focus { outline:none; border-color:var(--cs-color-primary); background:var(--cs-color-field-bg-focus); box-shadow:var(--cs-shadow-focus); }
.cs-input[aria-invalid="true"], .cs-select[aria-invalid="true"], .cs-textarea[aria-invalid="true"], .cs-input.is-error, .cs-select.is-error, .cs-textarea.is-error { border-color:var(--cs-color-danger); box-shadow:0 0 0 4px rgba(210,63,77,.18); }
.cs-input.is-valid, .cs-select.is-valid, .cs-textarea.is-valid { border-color:var(--cs-color-success); }
.cs-input:disabled, .cs-select:disabled, .cs-textarea:disabled { cursor:not-allowed; color:var(--cs-color-text-subtle); background:rgba(255,255,255,.04); opacity:.72; }
.cs-select { appearance:none; padding-inline-end:3rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23CCE1F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
[dir="rtl"] .cs-select { background-position:left 1rem center; }
.cs-input--with-action { padding-inline-end:3.25rem; }
.cs-input--with-prefix { padding-inline-start:3rem; }
.cs-field__prefix { position:absolute; inset-block:0; inset-inline-start:var(--cs-space-4); display:flex; align-items:center; color:var(--cs-color-text-subtle); pointer-events:none; }
.cs-field__action { position:absolute; inset-block:0; inset-inline-end:.25rem; display:grid; place-items:center; width:2.75rem; min-height:var(--cs-touch-target); border:0; border-radius:var(--cs-radius-md); background:transparent; color:var(--cs-color-light-blue); cursor:pointer; }
.cs-field__action:hover { background:rgba(204,225,246,.08); }
.cs-field__action svg { width:1.25rem; height:1.25rem; }
.cs-field__hint, .cs-field__message { margin:0; font-size:.8125rem; line-height:1.45; }
.cs-field__hint { color:var(--cs-color-text-subtle); }
.cs-field__message--error { color:var(--cs-color-danger-text); }
.cs-field__message--valid { color:var(--cs-color-success-text); }
.cs-form-grid { display:grid; gap:var(--cs-space-5); }
.cs-form-actions { display:grid; gap:var(--cs-space-3); }
.cs-form-divider { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--cs-space-3); align-items:center; color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); }
.cs-form-divider::before, .cs-form-divider::after { content:""; height:1px; background:var(--cs-color-line); }

/* Checkbox */
.cs-checkbox { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--cs-space-3); align-items:start; cursor:pointer; }
.cs-checkbox__input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.cs-checkbox__box { display:grid; place-items:center; width:1.25rem; height:1.25rem; margin-top:.12rem; border:1px solid var(--cs-color-line-strong); border-radius:.375rem; background:var(--cs-color-field-bg); color:var(--cs-color-primary-ink); transition:background-color var(--cs-duration-base), border-color var(--cs-duration-base), box-shadow var(--cs-duration-base); }
.cs-checkbox__box svg { width:.875rem; height:.875rem; opacity:0; transform:scale(.75); transition:opacity var(--cs-duration-fast), transform var(--cs-duration-fast); }
.cs-checkbox__input:checked + .cs-checkbox__box { border-color:var(--cs-color-primary); background:var(--cs-color-primary); }
.cs-checkbox__input:checked + .cs-checkbox__box svg { opacity:1; transform:scale(1); }
.cs-checkbox__input:focus-visible + .cs-checkbox__box { box-shadow:var(--cs-shadow-focus); }
.cs-checkbox__input[aria-invalid="true"] + .cs-checkbox__box { border-color:var(--cs-color-danger); box-shadow:0 0 0 4px rgba(210,63,77,.18); }
.cs-checkbox__copy { display:grid; gap:var(--cs-space-1); }
.cs-checkbox__label { color:var(--cs-color-text); font-size:var(--cs-font-size-small); font-weight:var(--cs-font-weight-medium); line-height:1.45; }
.cs-checkbox__hint { color:var(--cs-color-text-subtle); font-size:.8125rem; line-height:1.45; }

/* Error summary */
.cs-error-summary { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--cs-space-3); padding:var(--cs-space-4); border:1px solid var(--cs-color-danger-line); border-radius:var(--cs-radius-xl); background:var(--cs-color-danger-bg); }
.cs-error-summary__icon { width:1.25rem; height:1.25rem; margin-top:.1rem; color:var(--cs-color-danger-text); }
.cs-error-summary__title { margin:0; color:var(--cs-color-text-strong); font-size:var(--cs-font-size-small); font-weight:var(--cs-font-weight-semibold); }
.cs-error-summary__list { margin:var(--cs-space-2) 0 0; padding-inline-start:1.15rem; color:var(--cs-color-danger-text); font-size:.8125rem; line-height:1.55; }
.cs-error-summary__list a { color:inherit; text-underline-offset:.2em; }

/* Password meter */
.cs-password-meter { display:grid; gap:var(--cs-space-2); }
.cs-password-meter__bar { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--cs-space-1); }
.cs-password-meter__segment { height:.25rem; border-radius:var(--cs-radius-pill); background:rgba(255,255,255,.1); }
.cs-password-meter[data-strength="1"] .cs-password-meter__segment:nth-child(-n+1) { background:var(--cs-color-danger); }
.cs-password-meter[data-strength="2"] .cs-password-meter__segment:nth-child(-n+2) { background:var(--cs-color-warning-text); }
.cs-password-meter[data-strength="3"] .cs-password-meter__segment:nth-child(-n+3) { background:var(--cs-color-primary); }
.cs-password-meter[data-strength="4"] .cs-password-meter__segment:nth-child(-n+4) { background:var(--cs-color-success); }
.cs-password-meter__meta { display:flex; justify-content:space-between; gap:var(--cs-space-3); color:var(--cs-color-text-subtle); font-size:.8125rem; }
.cs-password-meter__value { color:var(--cs-color-light-blue); font-weight:var(--cs-font-weight-medium); }
.cs-requirements { display:grid; gap:var(--cs-space-2); margin:0; padding:0; list-style:none; }
.cs-requirements li { display:grid; grid-template-columns:auto 1fr; gap:var(--cs-space-2); align-items:start; color:var(--cs-color-text-subtle); font-size:.8125rem; line-height:1.45; }
.cs-requirements svg { width:1rem; height:1rem; margin-top:.1rem; color:var(--cs-color-primary); }

/* Card */
.cs-card { padding:var(--cs-space-5); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-2xl); background:linear-gradient(160deg, rgba(14,58,92,.64), rgba(10,42,77,.88)); box-shadow:var(--cs-shadow-card); }
.cs-card--flat { background:rgba(10,42,77,.56); box-shadow:none; }
.cs-card--quiet { background:rgba(3,16,31,.28); box-shadow:none; }
.cs-card--interactive:hover { border-color:var(--cs-color-line-strong); }

/* Trust strip */
.cs-trust-strip { display:grid; gap:var(--cs-space-1); padding:var(--cs-space-2); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-xl); background:rgba(10,42,77,.52); }
.cs-trust-strip__item { display:flex; align-items:center; min-height:3rem; padding:var(--cs-space-2) var(--cs-space-3); color:var(--cs-color-light-blue); font-size:var(--cs-font-size-small); font-weight:var(--cs-font-weight-medium); line-height:1.4; }
.cs-trust-strip__icon { width:1.25rem; height:1.25rem; margin-inline-end:var(--cs-space-3); color:var(--cs-color-primary); flex:none; }

/* Banner and toast */
.cs-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--cs-space-3); align-items:flex-start; padding:var(--cs-space-4); border:1px solid var(--cs-color-info-line); border-radius:var(--cs-radius-xl); background:var(--cs-color-info-bg); }
.cs-banner--success { border-color:var(--cs-color-success-line); background:var(--cs-color-success-bg); }
.cs-banner--warning { border-color:var(--cs-color-warning-line); background:var(--cs-color-warning-bg); }
.cs-banner--error { border-color:var(--cs-color-danger-line); background:var(--cs-color-danger-bg); }
.cs-banner__icon { width:1.25rem; height:1.25rem; color:var(--cs-color-primary); }
.cs-banner--success .cs-banner__icon { color:var(--cs-color-success-text); }
.cs-banner--warning .cs-banner__icon { color:var(--cs-color-warning-text); }
.cs-banner--error .cs-banner__icon { color:var(--cs-color-danger-text); }
.cs-banner__title { margin:0; color:var(--cs-color-text-strong); font-weight:600; }
.cs-banner__body { margin:.15rem 0 0; color:var(--cs-color-text-muted); font-size:var(--cs-font-size-small); }
.cs-banner__close { display:grid; place-items:center; width:var(--cs-touch-target); height:var(--cs-touch-target); margin:-.625rem -.625rem 0 0; border:0; background:transparent; color:var(--cs-color-text-muted); cursor:pointer; }
.cs-banner__close svg { width:1.125rem; height:1.125rem; }
.cs-toast { position:fixed; inset-inline:var(--cs-space-4); inset-block-end:calc(var(--cs-space-4) + env(safe-area-inset-bottom)); z-index:50; max-width:28rem; margin-inline:auto; box-shadow:var(--cs-shadow-raised); }

/* Status pills */
.cs-pill { display:inline-flex; align-items:center; min-height:1.75rem; padding:.25rem .625rem; border:1px solid var(--cs-color-line-strong); border-radius:var(--cs-radius-pill); background:rgba(255,255,255,.04); color:var(--cs-color-light-blue); font-size:var(--cs-font-size-caption); font-weight:var(--cs-font-weight-semibold); line-height:1.2; white-space:nowrap; }
.cs-pill--info { color:var(--cs-color-light-blue); border-color:var(--cs-color-info-line); background:var(--cs-color-info-bg); }
.cs-pill--success { color:var(--cs-color-success-text); border-color:var(--cs-color-success-line); background:var(--cs-color-success-bg); }
.cs-pill--warning { color:var(--cs-color-warning-text); border-color:var(--cs-color-warning-line); background:var(--cs-color-warning-bg); }
.cs-pill--danger { color:var(--cs-color-danger-text); border-color:var(--cs-color-danger-line); background:var(--cs-color-danger-bg); }
.cs-pill__dot { width:.4375rem; height:.4375rem; margin-inline-end:.4375rem; border-radius:50%; background:currentColor; }

/* Success and illustration icon */
.cs-state-icon { display:grid; place-items:center; width:4rem; height:4rem; border:1px solid var(--cs-color-info-line); border-radius:50%; background:var(--cs-color-info-bg); color:var(--cs-color-primary); }
.cs-state-icon svg { width:2rem; height:2rem; }
.cs-state-icon--success { border-color:var(--cs-color-success-line); background:var(--cs-color-success-bg); color:var(--cs-color-success-text); }
.cs-state-icon--danger { border-color:var(--cs-color-danger-line); background:var(--cs-color-danger-bg); color:var(--cs-color-danger-text); }

/* Navigation frame */
.cs-app-frame { min-height:100dvh; background:var(--cs-color-bg); }
.cs-app-main { width:min(100%,var(--cs-mobile-column)); margin-inline:auto; padding:var(--cs-space-6) var(--cs-space-5) calc(6.5rem + env(safe-area-inset-bottom)); }
.cs-mobile-tabs { position:fixed; inset-inline:0; inset-block-end:0; z-index:40; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-height:calc(4.5rem + env(safe-area-inset-bottom)); padding:.375rem max(.5rem,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.5rem,env(safe-area-inset-left)); border-top:1px solid var(--cs-color-line); background:rgba(3,16,31,.96); backdrop-filter:blur(18px); }
.cs-mobile-tabs__link { display:grid; place-items:center; align-content:center; gap:.125rem; min-width:0; min-height:var(--cs-touch-target); border-radius:var(--cs-radius-md); color:var(--cs-color-text-subtle); font-size:.6875rem; font-weight:var(--cs-font-weight-medium); line-height:1.2; text-decoration:none; }
.cs-mobile-tabs__link svg { width:1.375rem; height:1.375rem; }
.cs-mobile-tabs__link[aria-current="page"] { background:rgba(1,126,255,.14); color:var(--cs-color-light-blue); }
.cs-desktop-sidebar { display:none; }

@media (min-width:48rem) {
  .cs-trust-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cs-trust-strip__item + .cs-trust-strip__item { border-inline-start:1px solid var(--cs-color-line); }
}
@media (min-width:56.25rem) {
  .cs-app-frame { display:grid; grid-template-columns:var(--cs-desktop-sidebar) minmax(0,1fr); min-height:100dvh; }
  .cs-desktop-sidebar { position:sticky; inset-block-start:0; display:flex; flex-direction:column; height:100dvh; padding:var(--cs-space-8) var(--cs-space-5); border-inline-end:1px solid var(--cs-color-line); background:var(--cs-color-bg-deep); }
  .cs-desktop-sidebar__logo { width:10.5rem; margin-bottom:var(--cs-space-10); }
  .cs-desktop-sidebar__group + .cs-desktop-sidebar__group { margin-top:var(--cs-space-8); }
  .cs-desktop-sidebar__label { margin:0 0 var(--cs-space-2); color:var(--cs-color-text-subtle); font-size:.6875rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
  .cs-desktop-sidebar__link { display:flex; align-items:center; min-height:2.75rem; padding:0 var(--cs-space-3); border-radius:var(--cs-radius-md); color:var(--cs-color-text-muted); font-size:var(--cs-font-size-small); font-weight:500; text-decoration:none; }
  .cs-desktop-sidebar__link svg { width:1.25rem; height:1.25rem; margin-inline-end:var(--cs-space-3); }
  .cs-desktop-sidebar__link[aria-current="page"] { background:rgba(1,126,255,.14); color:var(--cs-color-light-blue); }
  .cs-app-main { width:min(100%,var(--cs-desktop-content)); padding:var(--cs-space-12) var(--cs-space-8) var(--cs-space-16); }
  .cs-mobile-tabs { display:none; }
}