/* ============================================================
   SEIRAIYU DESIGN SYSTEM — COMPONENTS
   References only --sy-* tokens. Works in light + dark.
   ============================================================ */

*{box-sizing:border-box;}
.sy{
  font-family:var(--sy-font-sans);
  color:var(--sy-text);
  font-size:var(--sy-text-base);
  line-height:var(--sy-leading-normal);
}

/* ---------- the lockup ---------- */
.sy-lockup{display:inline-flex;align-items:center;gap:.40em;color:var(--sy-text);font-size:24px;line-height:1;}
.sy-lockup .glyph{font-family:var(--sy-font-jp);font-weight:500;font-size:.80em;line-height:1;color:var(--sy-glyph);transform:translateY(.015em);}
.sy-lockup .wm{font-family:var(--sy-font-sans);font-weight:600;font-size:1em;letter-spacing:var(--sy-track-wordmark);}
.sy-glyph-tile{background:var(--sy-ink);border-radius:var(--sy-radius-tile);display:inline-flex;align-items:center;justify-content:center;}
.sy-glyph-tile .g{font-family:var(--sy-font-jp);font-weight:500;color:var(--sy-periwinkle-300);line-height:1;}

/* ---------- labels & helpers ---------- */
.sy-mono{font-family:var(--sy-font-mono);font-size:var(--sy-text-xs);letter-spacing:var(--sy-track-label);text-transform:uppercase;color:var(--sy-text-muted);}
.sy-eyebrow{font-family:var(--sy-font-mono);font-size:var(--sy-text-xs);letter-spacing:var(--sy-track-label);text-transform:uppercase;color:var(--sy-accent-text);}

/* ============================================================
   BUTTONS
   ============================================================ */
.sy-btn{
  --_h:42px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--_h);padding:0 18px;
  font-family:var(--sy-font-sans);font-size:var(--sy-text-sm);font-weight:600;letter-spacing:.01em;
  border-radius:var(--sy-radius-sm);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--sy-dur) var(--sy-ease),border-color var(--sy-dur) var(--sy-ease),
             color var(--sy-dur) var(--sy-ease),box-shadow var(--sy-dur) var(--sy-ease),transform var(--sy-dur) var(--sy-ease);
}
.sy-btn:active{transform:translateY(1px);}
.sy-btn:focus-visible{outline:2px solid var(--sy-border-focus);outline-offset:2px;}
.sy-btn .ico{width:15px;height:15px;display:inline-block;}

.sy-btn--primary{background:var(--sy-accent);color:var(--sy-accent-contrast);}
.sy-btn--primary:hover{background:var(--sy-accent-hover);}

.sy-btn--secondary{background:var(--sy-surface);color:var(--sy-text);border-color:var(--sy-border-strong);}
.sy-btn--secondary:hover{background:var(--sy-bg-sunken);border-color:var(--sy-text-muted);}

.sy-btn--ghost{background:transparent;color:var(--sy-text-secondary);}
.sy-btn--ghost:hover{background:var(--sy-bg-sunken);color:var(--sy-text);}

.sy-btn--accent-soft{background:var(--sy-accent-soft);color:var(--sy-accent-text);}
.sy-btn--accent-soft:hover{filter:brightness(.97);}

.sy-btn--danger{background:transparent;color:var(--sy-neg-fg);border-color:var(--sy-border-strong);}
.sy-btn--danger:hover{background:var(--sy-neg-soft);border-color:var(--sy-neg-fg);}

.sy-btn--sm{--_h:32px;padding:0 12px;font-size:var(--sy-text-xs);}
.sy-btn--lg{--_h:52px;padding:0 26px;font-size:var(--sy-text-base);}
.sy-btn[disabled],.sy-btn--disabled{opacity:.45;pointer-events:none;}
.sy-btn--block{display:flex;width:100%;}

/* link */
.sy-link{color:var(--sy-accent-text);text-decoration:none;font-weight:500;
  border-bottom:1px solid color-mix(in srgb,var(--sy-accent-text) 35%,transparent);
  transition:border-color var(--sy-dur) var(--sy-ease);}
.sy-link:hover{border-bottom-color:var(--sy-accent-text);}
.sy-link--muted{color:var(--sy-text-secondary);border-bottom-color:var(--sy-border-strong);}
.sy-link--muted:hover{color:var(--sy-text);border-bottom-color:var(--sy-text-muted);}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.sy-field{display:flex;flex-direction:column;gap:7px;}
.sy-label{font-size:var(--sy-text-sm);font-weight:600;color:var(--sy-text);}
.sy-hint{font-size:var(--sy-text-xs);color:var(--sy-text-muted);font-family:var(--sy-font-mono);letter-spacing:.02em;}
.sy-input,.sy-select,.sy-textarea{
  font-family:var(--sy-font-sans);font-size:var(--sy-text-sm);color:var(--sy-text);
  background:var(--sy-elevated);border:1px solid var(--sy-border-strong);border-radius:var(--sy-radius-sm);
  height:42px;padding:0 13px;width:100%;
  transition:border-color var(--sy-dur) var(--sy-ease),box-shadow var(--sy-dur) var(--sy-ease);
}
.sy-textarea{height:auto;padding:11px 13px;min-height:92px;resize:vertical;line-height:1.5;}
.sy-input::placeholder,.sy-textarea::placeholder{color:var(--sy-text-muted);}
.sy-input:focus,.sy-select:focus,.sy-textarea:focus{
  outline:none;border-color:var(--sy-border-focus);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sy-accent) 22%,transparent);
}
.sy-input[disabled]{opacity:.5;cursor:not-allowed;}
.sy-input--invalid{border-color:var(--sy-neg-fg);}
.sy-input--invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--sy-neg-fg) 22%,transparent);}
.sy-select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238d8576' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;
}

/* toggle */
.sy-toggle{display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none;font-size:var(--sy-text-sm);color:var(--sy-text);}
.sy-toggle input{position:absolute;opacity:0;pointer-events:none;}
.sy-toggle .track{width:42px;height:24px;border-radius:var(--sy-radius-pill);background:var(--sy-border-strong);position:relative;transition:background var(--sy-dur) var(--sy-ease);flex:0 0 auto;}
.sy-toggle .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--sy-elevated);box-shadow:var(--sy-shadow-sm);transition:transform var(--sy-dur) var(--sy-ease);}
.sy-toggle input:checked + .track{background:var(--sy-accent);}
.sy-toggle input:checked + .track::after{transform:translateX(18px);}
.sy-toggle input:focus-visible + .track{outline:2px solid var(--sy-border-focus);outline-offset:2px;}

/* checkbox */
.sy-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:var(--sy-text-sm);color:var(--sy-text);}
.sy-check input{position:absolute;opacity:0;pointer-events:none;}
.sy-check .box{width:19px;height:19px;border-radius:4px;border:1.5px solid var(--sy-border-strong);background:var(--sy-elevated);display:inline-flex;align-items:center;justify-content:center;transition:background var(--sy-dur) var(--sy-ease),border-color var(--sy-dur) var(--sy-ease);flex:0 0 auto;}
.sy-check .box svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:opacity var(--sy-dur) var(--sy-ease),transform var(--sy-dur) var(--sy-ease);}
.sy-check input:checked + .box{background:var(--sy-accent);border-color:var(--sy-accent);}
.sy-check input:checked + .box svg{opacity:1;transform:scale(1);}
.sy-check input:focus-visible + .box{outline:2px solid var(--sy-border-focus);outline-offset:2px;}

/* radio */
.sy-radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--sy-text-sm);color:var(--sy-text);}
.sy-radio input{position:absolute;opacity:0;pointer-events:none;}
.sy-radio .dot{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--sy-border-strong);background:var(--sy-elevated);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:border-color var(--sy-dur) var(--sy-ease);}
.sy-radio .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--sy-accent);transform:scale(0);transition:transform var(--sy-dur) var(--sy-ease);}
.sy-radio input:checked + .dot{border-color:var(--sy-accent);}
.sy-radio input:checked + .dot::after{transform:scale(1);}

/* segmented */
.sy-segmented{display:inline-flex;background:var(--sy-bg-sunken);border:1px solid var(--sy-border);border-radius:var(--sy-radius-sm);padding:3px;gap:3px;}
.sy-segmented button{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--sy-font-sans);
  font-size:var(--sy-text-sm);font-weight:500;color:var(--sy-text-muted);padding:6px 14px;border-radius:calc(var(--sy-radius-sm) - 1px);transition:all var(--sy-dur) var(--sy-ease);}
.sy-segmented button[aria-selected="true"]{background:var(--sy-elevated);color:var(--sy-text);box-shadow:var(--sy-shadow-sm);}

/* ============================================================
   CARDS & LIST
   ============================================================ */
.sy-card{background:var(--sy-surface);border:1px solid var(--sy-border);border-radius:var(--sy-radius-md);overflow:hidden;}
.sy-card--elevated{box-shadow:var(--sy-shadow-md);border-color:transparent;}
.sy-card__body{padding:var(--sy-5);}
.sy-card__title{font-size:var(--sy-text-md);font-weight:600;letter-spacing:-.01em;margin:0 0 6px;}
.sy-card__text{font-size:var(--sy-text-sm);color:var(--sy-text-secondary);margin:0;line-height:1.6;}
.sy-card__foot{border-top:1px solid var(--sy-border);padding:14px var(--sy-5);display:flex;justify-content:space-between;align-items:center;gap:12px;}

.sy-list{background:var(--sy-surface);border:1px solid var(--sy-border);border-radius:var(--sy-radius-md);overflow:hidden;}
.sy-list__item{display:flex;align-items:center;gap:14px;padding:15px var(--sy-5);border-top:1px solid var(--sy-border);transition:background var(--sy-dur) var(--sy-ease);}
.sy-list__item:first-child{border-top:0;}
.sy-list__item:hover{background:var(--sy-bg-sunken);}
.sy-list__glyph{font-family:var(--sy-font-jp);font-size:22px;color:var(--sy-text-secondary);flex:0 0 auto;width:30px;text-align:center;}
.sy-list__main{flex:1;min-width:0;}
.sy-list__main .t{font-size:var(--sy-text-sm);font-weight:600;}
.sy-list__main .d{font-size:var(--sy-text-xs);color:var(--sy-text-muted);font-family:var(--sy-font-mono);letter-spacing:.02em;margin-top:2px;}

/* ============================================================
   TABLE
   ============================================================ */
.sy-table-wrap{border:1px solid var(--sy-border);border-radius:var(--sy-radius-md);overflow:hidden;background:var(--sy-surface);}
.sy-table{width:100%;border-collapse:collapse;font-size:var(--sy-text-sm);}
.sy-table thead th{
  text-align:left;font-family:var(--sy-font-mono);font-size:var(--sy-text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--sy-text-muted);font-weight:500;padding:13px var(--sy-5);background:var(--sy-bg-sunken);border-bottom:1px solid var(--sy-border);
}
.sy-table tbody td{padding:14px var(--sy-5);border-top:1px solid var(--sy-border);color:var(--sy-text-secondary);}
.sy-table tbody tr:first-child td{border-top:0;}
.sy-table tbody tr:hover td{background:var(--sy-bg-sunken);}
.sy-table td .strong{color:var(--sy-text);font-weight:600;}
.sy-table .num{text-align:right;font-family:var(--sy-font-mono);font-variant-numeric:tabular-nums;color:var(--sy-text);}

/* ============================================================
   CODE & TERMINAL
   ============================================================ */
.sy-code{background:var(--sy-code-bg);border-radius:var(--sy-radius-md);overflow:hidden;border:1px solid var(--sy-border);}
.sy-code__bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid #ffffff10;}
.sy-code__bar .dot{width:10px;height:10px;border-radius:50%;background:#ffffff20;}
.sy-code__bar .name{margin-left:6px;font-family:var(--sy-font-mono);font-size:var(--sy-text-xs);color:#ffffff66;letter-spacing:.04em;}
.sy-code pre{margin:0;padding:17px 18px;overflow:auto;}
.sy-code code{font-family:var(--sy-font-mono);font-size:var(--sy-text-sm);line-height:1.7;color:var(--sy-code-text);white-space:pre;}
.sy-code .c-prompt{color:var(--sy-periwinkle-300);}
.sy-code .c-flag{color:#c8a96a;}
.sy-code .c-str{color:#9cb88f;}
.sy-code .c-dim{color:#ffffff55;}
.sy-code .c-kw{color:var(--sy-periwinkle-200);}
.sy-inline-code{font-family:var(--sy-font-mono);font-size:.9em;background:var(--sy-bg-sunken);border:1px solid var(--sy-border);border-radius:4px;padding:1px 6px;color:var(--sy-accent-text);}

/* ============================================================
   TABS
   ============================================================ */
.sy-tabs__list{display:flex;gap:2px;border-bottom:1px solid var(--sy-border);}
.sy-tabs__tab{appearance:none;background:transparent;border:0;cursor:pointer;font-family:var(--sy-font-sans);
  font-size:var(--sy-text-sm);font-weight:500;color:var(--sy-text-muted);padding:11px 16px;position:relative;transition:color var(--sy-dur) var(--sy-ease);}
.sy-tabs__tab:hover{color:var(--sy-text);}
.sy-tabs__tab[aria-selected="true"]{color:var(--sy-text);}
.sy-tabs__tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--sy-accent);border-radius:2px;}
.sy-tabs__panel{padding-top:var(--sy-5);font-size:var(--sy-text-sm);color:var(--sy-text-secondary);}
.sy-tabs__panel[hidden]{display:none;}

/* ============================================================
   BADGES & PILLS
   ============================================================ */
.sy-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--sy-font-mono);font-size:var(--sy-text-xs);
  letter-spacing:.06em;text-transform:uppercase;font-weight:500;padding:4px 9px;border-radius:var(--sy-radius-sm);
  background:var(--sy-bg-sunken);color:var(--sy-text-secondary);border:1px solid var(--sy-border);}
.sy-badge--accent{background:var(--sy-accent-soft);color:var(--sy-accent-text);border-color:transparent;}
.sy-badge--pos{background:var(--sy-pos-soft);color:var(--sy-pos-fg);border-color:transparent;}
.sy-badge--warn{background:var(--sy-warn-soft);color:var(--sy-warn-fg);border-color:transparent;}
.sy-badge--neg{background:var(--sy-neg-soft);color:var(--sy-neg-fg);border-color:transparent;}
.sy-badge--solid{background:var(--sy-ink);color:var(--sy-paper);border-color:transparent;}
.sy-badge .pip{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ============================================================
   TOOLTIP
   ============================================================ */
.sy-tip{position:relative;display:inline-flex;}
.sy-tip__bubble{
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--sy-ink);color:var(--sy-paper);font-size:var(--sy-text-xs);font-weight:500;
  padding:7px 11px;border-radius:var(--sy-radius-sm);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--sy-dur) var(--sy-ease),transform var(--sy-dur) var(--sy-ease);
  box-shadow:var(--sy-shadow-md);z-index:5;
}
.sy-tip__bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--sy-ink);}
.sy-tip:hover .sy-tip__bubble,.sy-tip:focus-within .sy-tip__bubble{opacity:1;transform:translateX(-50%) translateY(0);}
[data-theme="dark"] .sy-tip__bubble{background:var(--sy-elevated);color:var(--sy-text);border:1px solid var(--sy-border);}
[data-theme="dark"] .sy-tip__bubble::after{border-top-color:var(--sy-elevated);}

/* ============================================================
   MODAL
   ============================================================ */
.sy-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;}
.sy-modal.open{display:flex;}
.sy-modal__scrim{position:absolute;inset:0;background:var(--sy-overlay);backdrop-filter:blur(2px);animation:sy-fade .2s var(--sy-ease);}
.sy-modal__panel{position:relative;background:var(--sy-elevated);border:1px solid var(--sy-border);border-radius:var(--sy-radius-lg);
  box-shadow:var(--sy-shadow-lg);width:min(460px,100%);overflow:hidden;animation:sy-pop .22s var(--sy-ease);}
.sy-modal__head{padding:22px var(--sy-6) 0;}
.sy-modal__title{font-size:var(--sy-text-lg);font-weight:600;letter-spacing:-.01em;margin:0;}
.sy-modal__body{padding:12px var(--sy-6) 4px;font-size:var(--sy-text-sm);color:var(--sy-text-secondary);line-height:1.6;}
.sy-modal__foot{padding:var(--sy-5) var(--sy-6);display:flex;justify-content:flex-end;gap:10px;}
@keyframes sy-fade{from{opacity:0;}to{opacity:1;}}
@keyframes sy-pop{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}

/* ============================================================
   NAV / HEADER / FOOTER (marketing)
   ============================================================ */
.sy-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--sy-5);background:color-mix(in srgb,var(--sy-bg) 85%,transparent);
  border:1px solid var(--sy-border);border-radius:var(--sy-radius-md);backdrop-filter:blur(8px);}
.sy-nav__links{display:flex;align-items:center;gap:4px;}
.sy-nav__links a{font-size:var(--sy-text-sm);font-weight:500;color:var(--sy-text-secondary);text-decoration:none;padding:8px 12px;border-radius:var(--sy-radius-sm);transition:all var(--sy-dur) var(--sy-ease);}
.sy-nav__links a:hover{color:var(--sy-text);background:var(--sy-bg-sunken);}
.sy-nav__links a.active{color:var(--sy-text);}
.sy-nav__right{display:flex;align-items:center;gap:10px;}

.sy-footer{background:var(--sy-surface);border:1px solid var(--sy-border);border-radius:var(--sy-radius-md);padding:var(--sy-6);}
.sy-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;}
.sy-footer__col h5{font-family:var(--sy-font-mono);font-size:var(--sy-text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--sy-text-muted);margin:0 0 12px;font-weight:500;}
.sy-footer__col a{display:block;font-size:var(--sy-text-sm);color:var(--sy-text-secondary);text-decoration:none;padding:5px 0;transition:color var(--sy-dur) var(--sy-ease);}
.sy-footer__col a:hover{color:var(--sy-text);}
.sy-footer__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:var(--sy-6);padding-top:var(--sy-5);border-top:1px solid var(--sy-border);flex-wrap:wrap;}

@media(max-width:680px){
  .sy-footer__grid{grid-template-columns:1fr 1fr;}
}