@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   ESPOOO — University registration journey (v0.10)
   Tokens: ESPOOO Design System FINAL PRODUCTION 195 (brand #6847e8, navy #071426, semantic pairs, radius 6/10/16, 4px spacing).
   Direction: institutional and quiet — white canvas, hairlines instead of cards, hierarchy by type and spacing,
   one primary action per decision. No inline styles (strict CSP); RTL is the source layout.
   ===================================================================== */
:root {
  --brand: #6847e8; --brand2: #5334c7; --brand-bg: #f3f0ff; --brand-tint: #faf9ff;
  --navy: #071426; --navy2: #0b1d33; --navy-line: #193650; --navy-hover: #12294a;
  --surface-0: #eef2f6; --surface-1: #fff; --surface-2: #f8fafc;
  --text-primary: #152235; --text-secondary: #607084;
  --border-default: #d8dfe8; --border-soft: #e9edf2;
  --success: #087a50; --success-bg: #eaf8f2; --success-line: #c6ead9;
  --warning: #825600; --warning-bg: #fff5d8; --warning-line: #efdaa5;
  --danger: #a91f2a; --danger-bg: #fff0f1; --danger-line: #e7b9bd;
  --info: #145fae; --info-bg: #edf6ff; --info-line: #cfe3f8;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --focus-ring: 0 0 0 3px rgba(104, 71, 232, .24);
  --pad-x: 80px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.j { margin: 0; background: var(--surface-1); color: var(--text-primary); font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif; font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-wrap: pretty; min-height: 100vh; display: flex; flex-direction: column; }
body.j--tint { background: var(--surface-0); }
.j a { color: var(--brand2); text-decoration: none; } .j a:hover { color: #3f2a9c; }
.j h1, .j h2, .j h3, .j p, .j dl, .j dd { margin: 0; }
.j button, .j input, .j select, .j textarea { font: inherit; color: inherit; }
.j button { cursor: pointer; }
.j-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.j-num { font-feature-settings: "tnum"; }
.j-ic { flex-shrink: 0; vertical-align: middle; }
.j-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.j :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.j-muted { color: var(--text-secondary); } .j-strong { font-weight: 600; } .j-small { font-size: 13.5px; }
.j-over { font-size: 14px; font-weight: 600; color: var(--brand2); }
.j-h1 { font-size: 28px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.j-h2 { font-size: 17px; font-weight: 600; }
.j-lead { font-size: 15px; color: var(--text-secondary); line-height: 1.8; }
.j-mt8 { margin-top: 8px; } .j-mt16 { margin-top: 16px; } .j-mt24 { margin-top: 24px; } .j-mt32 { margin-top: 32px; }
.j-stack { display: flex; flex-direction: column; } .j-gap8 { gap: 8px; } .j-gap12 { gap: 12px; } .j-gap16 { gap: 16px; } .j-gap20 { gap: 20px; } .j-gap24 { gap: 24px; } .j-gap32 { gap: 32px; }
.j-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .j-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .j-grow { flex: 1 1 0; min-width: 0; }
.j-hr { border: 0; border-top: 1px solid var(--border-soft); margin: 0; }

/* ---- buttons ---- */
.j-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; background: none; transition: background .12s, border-color .12s; }
.j a.j-btn--primary, .j-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; } .j a.j-btn--primary:hover, .j-btn--primary:hover { background: var(--brand2); border-color: var(--brand2); color: #fff; }
.j a.j-btn--secondary, .j-btn--secondary { background: #fff; border-color: var(--border-default); color: var(--text-primary); } .j a.j-btn--secondary:hover, .j-btn--secondary:hover { border-color: #b9c4d2; background: var(--surface-2); color: var(--text-primary); }
.j a.j-btn--ghost, .j-btn--ghost { color: var(--text-secondary); } .j-btn--ghost:hover { background: var(--surface-2); }
.j-btn--danger { background: #fff; border-color: var(--danger-line); color: var(--danger); } .j-btn--danger:hover { background: var(--danger-bg); }
.j-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; } .j-btn--md { height: 48px; } .j-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; } .j-btn--block { width: 100%; }
.j-btn[disabled], .j-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.j-iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: #fff; color: var(--text-secondary); }
.j-iconbtn:hover { border-color: var(--border-default); color: var(--text-primary); }
.j-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 0; color: var(--brand2); }

/* ---- badges & notes ---- */
.j-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.j-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .j-badge--plain::before { display: none; }
.j-badge--success { background: var(--success-bg); color: var(--success); } .j-badge--warning { background: var(--warning-bg); color: var(--warning); } .j-badge--danger { background: var(--danger-bg); color: var(--danger); }
.j-badge--info { background: var(--info-bg); color: var(--info); } .j-badge--brand { background: var(--brand-bg); color: var(--brand2); } .j-badge--neutral { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-soft); }
.j-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); font-size: 14.5px; font-weight: 500; line-height: 1.75; border: 1px solid; }
.j-note .j-ic { margin-top: 3px; }
.j-note--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); } .j-note--success { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
.j-note--warning { background: var(--warning-bg); border-color: var(--warning-line); color: #5c3d00; } .j-note--danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.j-note b { display: block; font-size: 15.5px; font-weight: 600; } .j-note span.sub { display: block; font-size: 14px; font-weight: 400; color: #6d592d; }
.j-flash { margin: 16px var(--pad-x) 0; }
.j-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); font-size: 13.5px; font-weight: 500; }
.j-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- top bars ---- */
.j-top { height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad-x); border-bottom: 1px solid var(--border-soft); background: #fff; }
.j-top__start, .j-top__end { display: flex; align-items: center; gap: 20px; min-width: 0; }
.j-logo-img { width: 124px; height: auto; display: block; } .j-logo-img--lg { width: 132px; } .j-logo-img--sm { width: 104px; }
.j-top__sep { width: 1px; height: 24px; background: var(--border-default); }
.j-top__title { font-size: 15px; font-weight: 600; }
.j-top__saved { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-secondary); } .j-top__saved .j-ic { color: var(--success); }
.j a.j-top__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-secondary); min-height: 44px; } .j a.j-top__link--strong { font-weight: 600; color: var(--text-primary); }
.j-nav { display: flex; gap: 32px; margin-inline-start: 28px; } .j .j-nav a { font-size: 15px; font-weight: 500; color: var(--text-secondary); }

/* ---- fields ---- */
.j-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.j-labelrow { display: flex; align-items: center; gap: 8px; }
.j-label { font-size: 14px; font-weight: 600; }
.j-opt { font-size: 13px; color: var(--text-secondary); }
.j-tag { font-size: 12px; font-weight: 600; color: var(--brand2); background: var(--brand-bg); border-radius: 4px; padding: 1px 8px; }
.j-input, .j-select, .j-textarea { height: 46px; width: 100%; padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: #fff; font-size: 15px; outline: none; }
.j-textarea { height: auto; padding: 12px 14px; line-height: 1.8; resize: vertical; }
.j-input::placeholder, .j-textarea::placeholder { color: #8c99ab; }
.j-input:focus, .j-select:focus, .j-textarea:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.j-input.is-invalid, .j-select.is-invalid { border-color: var(--danger); }
.j-input--ltr { direction: ltr; text-align: right; }
.j-input[readonly] { background: var(--surface-2); color: var(--text-secondary); }
.j-select { appearance: none; 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='%23607084' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 40px; }
.j-withicon { position: relative; } .j-withicon > .j-ic { position: absolute; inset-inline-start: 13px; top: 14px; color: var(--text-secondary); pointer-events: none; } .j-withicon > .j-input { padding-inline-start: 42px; } .j-withicon > .j-input--ltr { padding-inline-start: 14px; padding-right: 42px; }
.j-hint { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.j-hint--error, .j-hint--ok { display: flex; align-items: center; gap: 6px; font-weight: 500; } .j-hint--error { color: var(--danger); } .j-hint--ok { color: var(--success); }
.j-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.j-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.75; }
.j-check input, .j-radio input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--brand); flex-shrink: 0; }
.j-radio { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; } .j-radio input { margin: 0; width: 18px; height: 18px; }

/* ---- wizard ---- */
.j-wiz { flex: 1 1 auto; display: flex; gap: 48px; padding: 48px var(--pad-x) 40px; align-items: flex-start; }
.j-rail { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
.j-rail__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.j-steps { display: flex; flex-direction: column; gap: 4px; }
.j .j-step { display: flex; gap: 14px; color: inherit; }
.j-step__mark { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.j-step__dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--text-secondary); background: #fff; border: 1.5px solid var(--border-default); }
.j-step__line { width: 2px; flex: 1 1 0; min-height: 22px; border-radius: 2px; background: var(--border-default); }
.j-step__text { display: flex; flex-direction: column; gap: 1px; padding-bottom: 22px; } .j-step:last-child .j-step__text { padding-bottom: 0; }
.j-step__t { font-size: 15px; font-weight: 500; line-height: 30px; color: var(--text-secondary); } .j-step__s { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.j-step.is-done .j-step__dot { background: var(--brand); border-color: var(--brand); color: #fff; } .j-step.is-done .j-step__line { background: var(--brand); } .j-step.is-done .j-step__t { color: var(--text-primary); font-weight: 600; }
.j-step.is-current .j-step__dot { background: var(--brand-bg); border: 2px solid var(--brand); color: var(--brand2); font-weight: 700; } .j-step.is-current .j-step__t { color: var(--brand2); font-weight: 700; }
.j-rail__meta { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.j-rail__meta small { display: block; font-size: 13px; color: var(--text-secondary); } .j-rail__meta b { font-size: 14px; font-weight: 600; }
.j-share summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand2); min-height: 44px; } .j-share summary::-webkit-details-marker { display: none; }
.j-share__body { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.j-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; max-width: 760px; }
.j-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 28px; }
.j-groups { display: flex; flex-direction: column; gap: 32px; }
.j-group { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.j-group__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .j-group__head p { font-size: 14px; color: var(--text-secondary); margin-top: 4px; line-height: 1.7; }
.j-help { width: 264px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 24px; position: sticky; top: 24px; }
.j-help__b { display: flex; flex-direction: column; gap: 8px; } .j-help__b + .j-help__b { padding-top: 20px; border-top: 1px solid var(--border-soft); }
.j-help__t { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; } .j-help__t .j-ic { color: var(--brand2); } .j-help__b p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.85; } .j-help__b p b { color: var(--text-primary); font-weight: 600; }
.j-foot { position: sticky; bottom: 0; z-index: 5; height: 88px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--pad-x); border-top: 1px solid var(--border-soft); background: #fff; }
.j-foot__end { display: flex; align-items: center; gap: 20px; } .j-foot__note { font-size: 13.5px; color: var(--text-secondary); }

/* choices */
.j-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .j-seg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.j-choice { display: block; cursor: pointer; } .j-choice > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.j-choice__box { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: #fff; }
.j-choice__box::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-default); flex-shrink: 0; background: #fff; }
.j-choice input:checked + .j-choice__box { border: 1.5px solid var(--brand); background: var(--brand-tint); } .j-choice input:checked + .j-choice__box::before { border: 5.5px solid var(--brand); }
.j-choice input:focus-visible + .j-choice__box { box-shadow: var(--focus-ring); }
.j-choice__box b { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; } .j-choice__box small { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.j-choice--slim .j-choice__box { min-height: 46px; }
.j-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.j-game { display: block; cursor: pointer; } .j-game > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.j-game__box { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; padding-inline-end: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: #fff; min-height: 86px; }
.j-game__box::after { content: ""; position: absolute; inset-inline-end: 12px; top: 12px; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--border-default); background: #fff center/14px no-repeat; }
.j-game input:checked + .j-game__box { border: 1.5px solid var(--brand); background: var(--brand-tint); }
.j-game input:checked + .j-game__box::after { border-color: var(--brand); background-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.j-game input:focus-visible + .j-game__box { box-shadow: var(--focus-ring); } .j-game input:disabled + .j-game__box { opacity: .45; cursor: not-allowed; }
.j-game__logo { width: 46px; height: 46px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-default); background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--text-secondary); direction: ltr; overflow: hidden; }
.j-game__logo--img { border: 1px solid var(--border-soft); background: #fff; } .j-game__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.j-game__t { display: flex; flex-direction: column; min-width: 0; } .j-game__t b { font-size: 14.5px; font-weight: 600; line-height: 1.5; direction: ltr; text-align: right; } .j-game__t small { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.j-count { font-size: 14px; font-weight: 600; color: var(--brand2); white-space: nowrap; }

/* logo upload */
.j-logo { display: flex; align-items: center; gap: 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 20px; }
.j-logo__ph { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius-md); border: 1px dashed var(--border-default); background: var(--surface-2); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); line-height: 1.4; overflow: hidden; }
.j-logo__ph--img { border: 1px solid var(--border-soft); background: #fff; } .j-logo__ph img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.j-logo__ph--sm { width: 40px; height: 40px; border-radius: 8px; font-size: 11px; } .j-logo__ph--md { width: 64px; height: 64px; } .j-logo__ph--sm img { padding: 4px; }
.j-file { position: relative; overflow: hidden; } .j-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* otp */
.j-verify { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--surface-2); scroll-margin-top: 24px; }
.j-verify--ok { background: var(--success-bg); border-color: var(--success-line); color: var(--success); justify-content: flex-start; font-weight: 500; }
.j-otp { display: flex; gap: 8px; direction: ltr; } .j-otp input { width: 48px; height: 54px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: #fff; text-align: center; font-size: 20px; font-weight: 600; outline: none; padding: 0; }
.j-otp input:focus { border: 1.5px solid var(--brand); box-shadow: var(--focus-ring); } .j-otp.is-invalid input { border-color: var(--danger); }

/* description list */
.j-dl { display: flex; flex-direction: column; } .j-dl > div { display: flex; gap: 24px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); } .j-dl > div:last-child { border-bottom: 0; }
.j-dl dt { width: 190px; flex-shrink: 0; font-size: 14px; color: var(--text-secondary); } .j-dl dd { flex: 1 1 0; min-width: 0; font-size: 15px; } .j-dl--narrow dt { width: 120px; } .j-dl--mid dt { width: 170px; }
.j-person { display: flex; flex-direction: column; gap: 2px; } .j-person b { font-weight: 600; } .j-person span { font-size: 14px; color: var(--text-secondary); } .j-person .j-inline { font-size: 14px; color: var(--text-primary); }
.j-panel { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 12px; } .j-panel--tint { background: var(--surface-2); } .j-panel--strong { border-color: var(--border-default); }
.j-panel__t { font-size: 16px; font-weight: 600; }
.j-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--border-soft); background: var(--surface-2); border-radius: var(--radius-md); padding: 18px 20px; }
.j-callout__t { display: flex; align-items: center; gap: 14px; } .j-callout__t .j-ic { color: var(--brand2); } .j-callout__t b { display: block; font-size: 15px; font-weight: 600; } .j-callout__t span { font-size: 13.5px; color: var(--text-secondary); }
.j-dashed { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px dashed var(--border-default); border-radius: var(--radius-md); padding: 18px 20px; font-size: 14.5px; color: var(--text-secondary); }

/* timeline */
.j-tl { display: flex; flex-direction: column; gap: 4px; } .j-tl__i { display: flex; gap: 16px; }
.j-tl__m { display: flex; flex-direction: column; align-items: center; gap: 4px; } .j-tl__d { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-default); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.j-tl__l { flex: 1 1 0; width: 2px; min-height: 16px; border-radius: 2px; background: var(--border-default); }
.j-tl__c { display: flex; flex-direction: column; gap: 2px; padding-bottom: 28px; } .j-tl--compact .j-tl__c { padding-bottom: 20px; } .j-tl__i:last-child .j-tl__c { padding-bottom: 0; } .j-tl__i:last-child .j-tl__l { display: none; }
.j-tl__c b { font-size: 15px; font-weight: 500; color: var(--text-secondary); line-height: 1.6; } .j-tl__c span { font-size: 13px; color: var(--text-secondary); }
.j-tl__i.is-done .j-tl__d { background: var(--brand); border-color: var(--brand); } .j-tl__i.is-done .j-tl__l { background: var(--brand); } .j-tl__i.is-done b, .j-tl__i.is-current b { color: var(--text-primary); font-weight: 600; }
.j-tl__i.is-current .j-tl__d { background: var(--brand-bg); border: 2px solid var(--brand); } .j-tl__i.is-current .j-tl__d::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

/* ---- landing ---- */
.j-hero { display: flex; gap: 80px; align-items: center; padding: 88px var(--pad-x) 80px; }
.j-hero__text { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; } .j-hero h1 { font-size: 42px; font-weight: 700; color: var(--navy); line-height: 1.4; } .j-hero p.j-hero__lead { font-size: 17px; color: var(--text-secondary); line-height: 1.95; max-width: 600px; }
.j-hero__trust { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); } .j-hero__trust .j-ic { color: var(--success); }
.j-path { width: 480px; flex-shrink: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px 28px 10px; }
.j-path__label { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); padding: 12px 0 4px; }
.j-path__row { display: flex; gap: 16px; padding: 18px 0; } .j-path__row + .j-path__row { border-top: 1px solid var(--border-soft); }
.j-numdot { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--navy); font-size: 14px; font-weight: 700; color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .j-numdot--sm { width: 28px; height: 28px; font-size: 13.5px; } .j-numdot--fill { background: var(--navy); color: #fff; }
.j-path__row b { font-size: 16px; font-weight: 600; } .j-path__row p { font-size: 14px; color: var(--text-secondary); line-height: 1.75; }
.j-sec { padding: 64px var(--pad-x); border-top: 1px solid var(--border-soft); } .j-sec--tint { background: var(--surface-2); } .j-sec h2 { font-size: 26px; font-weight: 700; color: var(--navy); }
.j-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 36px; } .j-feat { display: flex; flex-direction: column; gap: 10px; } .j-feat + .j-feat { padding-inline-start: 32px; border-inline-start: 1px solid var(--border-soft); }
.j-feat .j-ic { color: var(--brand2); } .j-feat b { font-size: 17px; font-weight: 600; } .j-feat p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.85; }
.j-req { display: flex; gap: 80px; } .j-req__intro { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; } .j-req__intro p { font-size: 15.5px; color: var(--text-secondary); line-height: 1.9; }
.j-reqlist { flex: 1 1 0; display: flex; flex-direction: column; } .j-reqlist > div { display: flex; gap: 14px; padding: 18px 0; } .j-reqlist > div + div { border-top: 1px solid var(--border-default); } .j-reqlist .j-ic { color: var(--brand2); margin-top: 4px; }
.j-reqlist b { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; } .j-reqlist span { font-size: 14px; color: var(--text-secondary); }
.j-footer { margin-top: auto; padding: 36px var(--pad-x); border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 40px; font-size: 13.5px; color: var(--text-secondary); } .j-footer__links { display: flex; gap: 24px; } .j .j-footer a { color: var(--text-secondary); }

/* ---- centered pages (welcome, receipt) ---- */
.j-center { width: 960px; max-width: calc(100% - 48px); margin: 0 auto; padding: 64px 0 72px; display: flex; flex-direction: column; gap: 36px; } .j-center--narrow { width: 900px; gap: 32px; } .j-center--xs { width: 560px; }
.j-center h1 { font-size: 34px; font-weight: 700; color: var(--navy); line-height: 1.4; } .j-center .j-lead { font-size: 16px; line-height: 1.9; max-width: 760px; }
.j-two { display: flex; gap: 64px; padding-top: 28px; border-top: 1px solid var(--border-soft); } .j-two > div { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; } .j-two h2 { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.j-listrow { display: flex; gap: 14px; padding: 14px 0; align-items: flex-start; min-height: 50px; } .j-listrow + .j-listrow { border-top: 1px solid var(--border-soft); } .j-listrow b { display: block; font-size: 15.5px; font-weight: 600; } .j-listrow span { font-size: 14px; color: var(--text-secondary); } .j-listrow--check { align-items: center; font-size: 15px; } .j-listrow--check .j-ic { color: var(--brand2); }
.j-meta3 { display: flex; padding: 20px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .j-meta3 > div { flex: 1 1 0; display: flex; align-items: center; gap: 12px; } .j-meta3 > div + div { padding-inline-start: 24px; border-inline-start: 1px solid var(--border-soft); }
.j-meta3 .j-ic { color: var(--text-secondary); } .j-meta3 small { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .j-meta3 b { font-size: 15px; font-weight: 600; line-height: 1.6; }
.j-okmark { width: 52px; height: 52px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; }
.j-ref { display: flex; align-items: center; justify-content: space-between; gap: 32px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px 28px; flex-wrap: wrap; }
.j-ref small { display: block; font-size: 13.5px; color: var(--text-secondary); } .j-ref__no { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: .02em; direction: ltr; } .j-ref__side { display: flex; gap: 40px; } .j-ref__side b { font-size: 15px; font-weight: 600; }
.j-hsteps { display: flex; } .j-hstep { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; } .j-hstep__m { display: flex; align-items: center; gap: 8px; }
.j-hstep__d { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-default); background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; } .j-hstep__l { flex: 1 1 0; height: 2px; border-radius: 2px; background: var(--border-default); } .j-hstep:last-child .j-hstep__l { visibility: hidden; }
.j-hstep__c { padding-inline-end: 16px; } .j-hstep__c b { display: block; font-size: 15px; font-weight: 500; color: var(--text-secondary); line-height: 1.6; } .j-hstep__c span { font-size: 13px; color: var(--text-secondary); }
.j-hstep.is-done .j-hstep__d { background: var(--brand); border-color: var(--brand); } .j-hstep.is-done .j-hstep__l { background: var(--brand); } .j-hstep.is-done b, .j-hstep.is-current b { color: var(--text-primary); font-weight: 600; }
.j-hstep.is-current .j-hstep__d { background: var(--brand-bg); border: 2px solid var(--brand); } .j-hstep.is-current .j-hstep__d::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

/* ---- university shell (status, launch) ---- */
.j-uni { display: flex; align-items: center; gap: 12px; min-width: 0; } .j-uni__t { display: flex; flex-direction: column; min-width: 0; } .j-uni__t b { font-size: 15px; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-tabs { display: flex; gap: 28px; margin-inline-start: 24px; align-self: stretch; } .j .j-tabs a { display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; color: var(--text-secondary); } .j .j-tabs a.is-on { font-weight: 600; color: var(--navy); box-shadow: inset 0 -2px 0 var(--brand); }
.j-user { display: flex; align-items: center; gap: 10px; } .j-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .j-user b { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; } .j-user small { display: block; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.j-page { padding: 48px var(--pad-x); display: flex; flex-direction: column; gap: 28px; flex: 1 1 auto; }
.j-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } .j-pagehead__t { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .j-pagehead p { font-size: 14.5px; color: var(--text-secondary); margin-top: 6px; }
.j-cols { display: flex; gap: 48px; align-items: flex-start; } .j-cols > section, .j-cols > .j-colmain { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .j-cols > aside { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.j-locked { display: flex; } .j-locked > div { flex: 1 1 0; display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); } .j-locked > div + div { padding-inline-start: 20px; border-inline-start: 1px solid var(--border-soft); }
.j-fix { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 24px; } .j-fix.is-pending { border: 1.5px solid var(--brand); }
.j-fix__n { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 2px solid var(--brand); background: var(--brand-bg); color: var(--brand2); } .j-fix.is-done .j-fix__n { background: var(--brand); color: #fff; }
.j-fix__t { font-size: 16px; font-weight: 600; } .j-fix__reason { font-size: 14.5px; color: var(--text-secondary); line-height: 1.8; } .j-fix__form { display: flex; align-items: flex-end; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; } .j-fix__form .j-field { flex: 1 1 200px; } .j-fix__form .j-field--sm { flex: 0 0 180px; }
.j-progress { display: flex; flex-direction: column; gap: 8px; width: 320px; } .j-progress__bar { height: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; display: flex; } .j-progress__bar i { display: block; border-radius: 999px; background: var(--brand); }
.j-w0 { width: 0; } .j-w25 { width: 25%; } .j-w33 { width: 33.3%; } .j-w50 { width: 50%; } .j-w66 { width: 66.6%; } .j-w75 { width: 75%; } .j-w100 { width: 100%; }

/* launch */
.j-launch { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--border-soft); }
.j-launch__d { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 600; border: 1.5px solid var(--border-default); color: var(--text-secondary); }
.j-launch.is-done .j-launch__d { background: var(--brand); border-color: var(--brand); color: #fff; } .j-launch.is-current .j-launch__d { background: var(--brand-bg); border: 2px solid var(--brand); color: var(--brand2); font-weight: 700; }
.j-launch__c { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .j-launch__c b { font-size: 17px; font-weight: 600; line-height: 1.6; } .j-launch__c p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.8; }
.j-launch__a { flex-shrink: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; max-width: 440px; }
.j-urlbox { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; direction: ltr; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- platform (espooo) ---- */
.j-plat { display: flex; flex: 1 1 auto; min-height: 100vh; }
.j-side { width: 240px; flex-shrink: 0; background: var(--navy); display: flex; flex-direction: column; padding: 24px 16px; position: sticky; top: 0; height: 100vh; }
.j-side__brand { padding: 4px 12px 20px; border-bottom: 1px solid var(--navy-line); display: flex; flex-direction: column; gap: 8px; } .j-side__brand img { width: 116px; height: auto; } .j-side__brand span { font-size: 12.5px; color: #8ea5bc; }
.j-side nav { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; flex: 1 1 0; }
.j .j-side nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 500; color: #b7c7d7; } .j .j-side nav a:hover { background: #0e223c; color: #fff; } .j .j-side nav a.is-on { background: var(--navy-hover); color: #fff; font-weight: 600; }
.j-side__n { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.j-side__user { display: flex; align-items: center; gap: 10px; padding: 16px 12px 0; border-top: 1px solid var(--navy-line); } .j-side__user .j-avatar { width: 38px; height: 38px; background: var(--navy-hover); font-size: 12.5px; } .j-side__user b { display: block; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.5; } .j-side__user small { display: block; font-size: 12.5px; color: #8ea5bc; line-height: 1.5; }
.j-platmain { flex: 1 1 0; min-width: 0; padding: 40px; display: flex; flex-direction: column; gap: 24px; background: #fff; } .j-platmain h1 { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.j-ptabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; } .j .j-ptabs a { display: inline-flex; align-items: center; gap: 8px; height: 48px; font-size: 15px; font-weight: 500; color: var(--text-secondary); } .j .j-ptabs a.is-on { font-weight: 600; color: var(--navy); box-shadow: inset 0 -2px 0 var(--brand); }
.j-ptabs i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); background: var(--surface-2); border-radius: 999px; padding: 0 8px; line-height: 22px; } .j-ptabs a.is-on i { color: var(--brand2); background: var(--brand-bg); }
.j-search { position: relative; display: flex; align-items: center; } .j-search .j-ic { position: absolute; inset-inline-start: 12px; color: var(--text-secondary); } .j-search input { width: 320px; height: 44px; padding: 0 40px 0 14px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 14.5px; outline: none; } .j-search input:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.j-table { border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.j-tr { display: flex; align-items: center; gap: 16px; padding: 0 16px; min-height: 72px; border-top: 1px solid var(--border-soft); } .j-tr--head { min-height: 44px; background: var(--surface-2); border-top: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); } .j-tr.is-next { background: var(--brand-tint); }
.j-td--ref { width: 130px; flex-shrink: 0; font-size: 14px; font-weight: 600; } .j-td--uni { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; } .j-td--uni b { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; } .j-td--uni small { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.j-td--dom { width: 170px; flex-shrink: 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; } .j-td--dom.is-ok { color: var(--success); } .j-td--dom.is-warn { color: var(--warning); } .j-td--date { width: 96px; flex-shrink: 0; font-size: 14.5px; } .j-td--wait { width: 96px; flex-shrink: 0; font-size: 14.5px; } .j-td--wait.is-late { color: var(--warning); font-weight: 600; } .j-td--st { width: 150px; flex-shrink: 0; } .j-td--act { width: 80px; flex-shrink: 0; }
.j-empty { padding: 48px 24px; text-align: center; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 8px; } .j-empty b { color: var(--text-primary); font-size: 16px; }
.j-crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); } .j .j-crumb a { color: var(--text-secondary); }
.j-rvsec { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid var(--border-soft); }
.j-checkrow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; } .j-checkrow + .j-checkrow { border-top: 1px solid var(--border-soft); } .j-checkrow > .j-ic { margin-top: 3px; } .j-checkrow.is-ok > .j-ic { color: var(--success); } .j-checkrow.is-bad > .j-ic { color: var(--danger); } .j-checkrow.is-todo > .j-ic { color: var(--text-secondary); }
.j-checkrow b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.6; } .j-checkrow small { display: block; font-size: 13px; color: var(--text-secondary); }
.j-dopts { display: flex; flex-direction: column; gap: 8px; } .j-dopt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: #fff; font-size: 15px; font-weight: 500; cursor: pointer; }
.j-dopt::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-default); flex-shrink: 0; } .j-dopt--no { color: var(--danger); }
#d_ok:checked ~ .j-dopts label[for=d_ok], #d_fix:checked ~ .j-dopts label[for=d_fix], #d_no:checked ~ .j-dopts label[for=d_no] { border: 1.5px solid var(--brand); background: var(--brand-tint); font-weight: 600; }
#d_ok:checked ~ .j-dopts label[for=d_ok]::before, #d_fix:checked ~ .j-dopts label[for=d_fix]::before, #d_no:checked ~ .j-dopts label[for=d_no]::before { border: 5.5px solid var(--brand); }
#d_ok:focus-visible ~ .j-dopts label[for=d_ok], #d_fix:focus-visible ~ .j-dopts label[for=d_fix], #d_no:focus-visible ~ .j-dopts label[for=d_no] { box-shadow: var(--focus-ring); }
.j-dpanel, .j-dsubmit { display: none; } #d_fix:checked ~ .j-dpanel--fix { display: flex; flex-direction: column; gap: 6px; } #d_ok:checked ~ .j-dsubmit--ok, #d_fix:checked ~ .j-dsubmit--fix, #d_no:checked ~ .j-dsubmit--no { display: inline-flex; }
.j-fixrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0; } .j-fixrow > input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; } .j-fixrow > label { font-size: 14.5px; flex: 1 1 0; cursor: pointer; } .j-fixrow > small { font-size: 12.5px; color: var(--text-secondary); }
.j-fixrow > .j-input { display: none; flex-basis: 100%; height: 42px; font-size: 14px; } .j-fixrow > input[type=checkbox]:checked ~ .j-input { display: block; }
.j-samewrap { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 20px; align-items: center; } .j-samewrap > #same { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); } .j-samewrap > label { font-size: 15px; cursor: pointer; min-height: 28px; display: flex; align-items: center; } .j-samewrap > .j-approver { grid-column: 1 / -1; }
#same:checked ~ .j-approver { display: none; }

/* ---- e-mail preview / print summary ---- */
.j-sheet { width: 820px; max-width: calc(100% - 32px); margin: 32px auto 56px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 48px 56px; display: flex; flex-direction: column; gap: 24px; }
.j-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); } .j-sheet h1 { font-size: 24px; font-weight: 700; color: var(--navy); } .j-sheet h2 { font-size: 16px; font-weight: 600; padding-bottom: 4px; }
.j-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 8px; } .j-sign > div { border-top: 1px solid var(--border-default); padding-top: 10px; font-size: 13.5px; color: var(--text-secondary); min-height: 72px; }
.j-printbar { display: flex; justify-content: center; gap: 12px; padding: 20px 0 0; }

/* ---- responsive ---- */
@media (max-width: 1240px) { :root { --pad-x: 40px; } .j-help { display: none; } .j-hero { gap: 48px; } .j-path { width: 420px; } .j-cols > aside { width: 340px; } .j-td--dom { display: none; } }
@media (max-width: 900px) {
  :root { --pad-x: 20px; } .j-wiz { flex-direction: column; gap: 28px; padding-top: 28px; } .j-rail { width: 100%; position: static; } .j-steps { flex-direction: row; gap: 10px; overflow-x: auto; } .j-step__line, .j-step__s { display: none; } .j-step__text { padding-bottom: 0; } .j-step__t { white-space: nowrap; font-size: 14px; } .j-rail__meta { display: none; }
  .j-row, .j-seg, .j-games, .j-feats, .j-sign { grid-template-columns: minmax(0, 1fr); } .j-feat + .j-feat { padding-inline-start: 0; border-inline-start: 0; }
  .j-hero, .j-req, .j-two, .j-cols, .j-meta3, .j-locked, .j-hsteps { flex-direction: column; gap: 24px; } .j-hero { padding-top: 48px; padding-bottom: 48px; } .j-hero h1 { font-size: 30px; } .j-center h1 { font-size: 26px; } .j-path, .j-req__intro, .j-cols > aside { width: 100%; }
  .j-meta3 > div + div, .j-locked > div + div { padding-inline-start: 0; border-inline-start: 0; } .j-hstep__l { display: none; } .j-nav, .j-tabs, .j-top__title, .j-top__sep, .j-top__saved, .j-user > div { display: none; }
  .j-verify, .j-callout, .j-logo, .j-pagehead, .j-launch, .j-footer, .j-ref { flex-direction: column; align-items: stretch; } .j-launch__a { max-width: none; justify-content: flex-start; } .j-otp input { width: 42px; } .j-foot { height: auto; padding-top: 14px; padding-bottom: 14px; } .j-foot__note { display: none; }
  .j-plat { flex-direction: column; } .j-side { width: 100%; height: auto; position: static; } .j-side nav { flex-direction: row; overflow-x: auto; } .j-side__user { display: none; } .j-platmain { padding: 24px 20px; } .j-td--date, .j-td--wait, .j-td--ref { display: none; } .j-search input { width: 100%; } .j-sheet { padding: 28px 20px; } .j-dl > div { flex-direction: column; gap: 2px; } .j-dl dt { width: auto; }
}
@media (max-width: 900px) { .j-top { gap: 12px; height: 64px; } .j-top__start, .j-top__end { gap: 12px; } .j-logo-img, .j-logo-img--lg { width: 100px; } .j-top .j-btn { height: 40px; padding: 0 14px; font-size: 14px; } .j a.j-top__link { white-space: nowrap; } .j-top__end a.j-top__link:not(.j-top__link--strong) span, .j-top__end a.j-top__link:not(.j-top__link--strong):not(:has(svg)) { display: none; } .j-uni__t b { max-width: 150px; } }
/* ---- workspace admin oversight (v0.11): four indicators, short approvals list, agenda, readiness, documentation ---- */
.j-wstabs { display: flex; align-items: stretch; gap: 32px; padding: 0 var(--pad-x); border-bottom: 1px solid var(--border-soft); background: #fff; overflow-x: auto; }
.j .j-wstabs a { display: inline-flex; align-items: center; gap: 8px; height: 52px; font-size: 15px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; } .j .j-wstabs a.is-on { font-weight: 600; color: var(--navy); box-shadow: inset 0 -2px 0 var(--brand); } .j .j-wstabs a:hover { color: var(--text-primary); }
.j-inds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 28px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.j-ind { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-inline-start: 28px; border-inline-start: 1px solid var(--border-soft); } .j-ind:first-child { padding-inline-start: 0; border-inline-start: 0; } .j-ind:not(:last-child) { padding-inline-end: 28px; }
.j-ind__q { font-size: 14px; font-weight: 600; color: var(--text-secondary); } .j-ind__v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .j-ind__v b { font-size: 34px; font-weight: 700; color: var(--navy); line-height: 1.2; direction: ltr; } .j-ind__v span { font-size: 15px; color: var(--text-secondary); }
.j-ind__line { font-size: 14px; line-height: 1.8; min-height: 50px; }
.j-tone { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .j-tone::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .j-tone--ok { color: var(--success); } .j-tone--warn { color: var(--warning); } .j-tone--late { color: var(--danger); }
progress.j-bar { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--border-soft); overflow: hidden; display: block; color: var(--brand); } progress.j-bar--lg { height: 8px; }
progress.j-bar::-webkit-progress-bar { background: var(--border-soft); border-radius: 999px; } progress.j-bar::-webkit-progress-value { background: var(--brand); border-radius: 999px; } progress.j-bar::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
progress.j-bar--ok { color: var(--success); } progress.j-bar--ok::-webkit-progress-value { background: var(--success); } progress.j-bar--ok::-moz-progress-bar { background: var(--success); }
progress.j-bar--warn { color: var(--warning); } progress.j-bar--warn::-webkit-progress-value { background: var(--warning); } progress.j-bar--warn::-moz-progress-bar { background: var(--warning); }
progress.j-bar--late { color: var(--danger); } progress.j-bar--late::-webkit-progress-value { background: var(--danger); } progress.j-bar--late::-moz-progress-bar { background: var(--danger); }
.j-sechead { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .j-sechead h2 { font-size: 18px; font-weight: 600; }
.j-rows > * + * { border-top: 1px solid var(--border-soft); }
.j-appr { display: flex; align-items: center; gap: 20px; padding: 20px 0; } .j-appr__t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .j-appr__t b { font-size: 16px; font-weight: 600; line-height: 1.6; } .j-appr__t span { font-size: 14px; color: var(--text-secondary); } .j-appr__t small { font-size: 13px; color: var(--text-secondary); }
.j-fyi { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 14.5px; line-height: 1.8; } .j-fyi small { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.j-meter { display: flex; align-items: center; gap: 24px; padding: 20px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .j-meter__v { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .j-meter__v b { font-size: 34px; font-weight: 700; color: var(--navy); direction: ltr; } .j-meter__v span { font-size: 15px; color: var(--text-secondary); } .j-meter progress { flex: 1 1 0; } .j-meter__n { font-size: 14.5px; color: var(--text-secondary); }
.j-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .j-nums > div { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 24px; border-inline-start: 1px solid var(--border-soft); } .j-nums > div:first-child { padding-inline-start: 0; border-inline-start: 0; } .j-nums b { font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.3; direction: ltr; text-align: right; } .j-nums span { font-size: 13.5px; color: var(--text-secondary); }
.j-next { display: flex; align-items: center; justify-content: space-between; gap: 32px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px 28px; } .j-next__l { display: flex; align-items: center; gap: 24px; min-width: 0; } .j-next__d { display: flex; flex-direction: column; align-items: center; min-width: 96px; } .j-next__d b { font-size: 40px; font-weight: 700; color: var(--navy); line-height: 1.1; direction: ltr; } .j-next__d span { font-size: 13.5px; color: var(--text-secondary); }
.j-next__t { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 24px; border-inline-start: 1px solid var(--border-soft); min-width: 0; } .j-next__t b { font-size: 18px; font-weight: 600; } .j-next__t span { font-size: 14.5px; color: var(--text-secondary); }
.j-ag { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; } .j-ag__h, .j-ag__r { display: grid; grid-template-columns: minmax(0, 2.2fr) 120px 150px 100px 170px 190px; gap: 16px; align-items: center; padding: 0 16px; } .j-ag__h { height: 44px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.j-ag__item { border-top: 1px solid var(--border-soft); scroll-margin-top: 24px; } .j-ag__item.is-next { background: var(--brand-tint); } .j-ag__r { padding-top: 16px; padding-bottom: 16px; font-size: 14.5px; } .j-ag__n { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .j-ag__n b { font-size: 15.5px; font-weight: 600; line-height: 1.6; } .j-ag__n span { font-size: 13.5px; color: var(--text-secondary); } .j-ag__n small { font-size: 12.5px; color: var(--text-secondary); }
.j-ag__d { display: flex; flex-direction: column; } .j-ag__d b { font-weight: 600; } .j-ag__d small { font-size: 13px; color: var(--text-secondary); } .j-ag__d small.is-soon { color: var(--warning); font-weight: 600; }
.j-ag__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 13.5px; font-weight: 600; color: var(--brand2); } .j-ag__more summary::-webkit-details-marker { display: none; }
.j-ag__forms { display: flex; gap: 32px; padding: 4px 16px 20px; flex-wrap: wrap; } .j-ag__forms form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .j-ag__forms .j-field { min-width: 200px; }
.j-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 24px; border-top: 1px solid var(--border-soft); } .j-legend > div { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 24px; border-inline-start: 1px solid var(--border-soft); } .j-legend > div:first-child { padding-inline-start: 0; border-inline-start: 0; } .j-legend b { font-size: 14.5px; font-weight: 600; } .j-legend span { font-size: 13.5px; color: var(--text-secondary); line-height: 1.8; }
.j-team { display: flex; align-items: center; gap: 24px; padding: 24px 0; } .j-team__id { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .j-team__id b { font-size: 17px; font-weight: 600; } .j-team__checks { width: 330px; flex-shrink: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.j-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; } .j-chk.is-ok { color: var(--success); } .j-chk.is-no { color: var(--warning); } .j-team__miss { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .j-team__miss b { font-size: 14.5px; font-weight: 600; line-height: 1.7; } .j-team__miss span { font-size: 13.5px; color: var(--text-secondary); }
.j-gamelogo { width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-default); background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--text-secondary); direction: ltr; overflow: hidden; } .j-gamelogo--img { border: 1px solid var(--border-soft); background: #fff; } .j-gamelogo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.j-tbl { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; } .j-tbl__h, .j-tbl__r { display: grid; gap: 16px; align-items: center; padding: 0 16px; } .j-tbl__h { height: 44px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-secondary); } .j-tbl__r { min-height: 72px; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--border-soft); font-size: 14.5px; line-height: 1.8; }
.j-tbl--team .j-tbl__h, .j-tbl--team .j-tbl__r { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.6fr) 170px; } .j-tbl--pend .j-tbl__h, .j-tbl--pend .j-tbl__r { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 120px; } .j-tbl--inv .j-tbl__h, .j-tbl--inv .j-tbl__r { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 190px; }
.j-pers { display: flex; align-items: center; gap: 12px; min-width: 0; } .j-pers .j-avatar { width: 36px; height: 36px; font-size: 12px; background: var(--surface-0); color: var(--text-primary); } .j-pers b { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; } .j-pers small { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.j-rec { display: flex; align-items: center; gap: 16px; padding: 18px 0; } .j-rec > .j-ic { flex-shrink: 0; } .j-rec.is-ok > .j-ic { color: var(--success); } .j-rec.is-warn > .j-ic { color: var(--warning); } .j-rec.is-na > .j-ic { color: var(--text-secondary); } .j-rec__t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .j-rec__t b { font-size: 16px; font-weight: 600; line-height: 1.6; } .j-rec__t span { font-size: 14px; color: var(--text-secondary); } .j-rec__e { width: 300px; flex-shrink: 0; font-size: 14px; line-height: 1.7; } .j-rec__a { width: 150px; flex-shrink: 0; display: flex; justify-content: flex-end; }
@media (max-width: 1240px) { .j-ag__h, .j-ag__r { grid-template-columns: minmax(0, 2fr) 110px 130px 150px 170px; } .j-ag__h > :nth-child(4), .j-ag__r > :nth-child(4) { display: none; } .j-team__checks { width: 260px; } .j-rec__e { width: 220px; } }
@media (max-width: 900px) { .j-wstabs { gap: 20px; } .j-inds, .j-nums, .j-legend { grid-template-columns: minmax(0, 1fr); gap: 24px; } .j-ind, .j-nums > div, .j-legend > div { padding-inline-start: 0 !important; padding-inline-end: 0 !important; border-inline-start: 0; } .j-ind__line { min-height: 0; }
  .j-appr, .j-next, .j-next__l, .j-team, .j-rec, .j-meter { flex-direction: column; align-items: stretch; gap: 12px; } .j-next__t { padding-inline-start: 0; border-inline-start: 0; } .j-next__d { align-items: flex-start; } .j-team__id, .j-team__checks, .j-rec__e, .j-rec__a { width: auto; } .j-rec__a { justify-content: flex-start; }
  .j-ag__h, .j-tbl__h { display: none; } .j-ag__r, .j-tbl__r, .j-tbl--team .j-tbl__r, .j-tbl--pend .j-tbl__r, .j-tbl--inv .j-tbl__r { grid-template-columns: minmax(0, 1fr); gap: 8px; } .j-ag__r > :nth-child(4) { display: block; } }
/* ===== v0.12 — workspace v3: containers on a tinted page, brand-coloured progress, dot status chips (no brown anywhere) ===== */
:root { --amber: #f5a524; --ok-dot: #12a36d; --card-shadow: 0 2px 7px rgba(7, 20, 38, .035); }
/* status chips: white pill + coloured dot + neutral text (status never depends on text colour) */
.j-badge { background: #fff !important; color: var(--text-primary) !important; border: 1px solid var(--border-default); }
.j-badge::before { width: 7px; height: 7px; background: #9aa7b8; }
.j-badge--success::before { background: var(--ok-dot); } .j-badge--warning::before { background: var(--amber); } .j-badge--danger::before { background: var(--danger); } .j-badge--info::before { background: var(--info); } .j-badge--brand::before { background: var(--brand); }
.j-badge--plain { white-space: normal; height: auto; min-height: 26px; padding: 3px 10px; line-height: 1.5; max-width: 100%; background: var(--surface-2) !important; color: var(--text-secondary) !important; border-color: var(--border-soft); border-radius: 6px; font-weight: 500; }
.j-note--warning { color: var(--text-primary); } .j-note--warning > .j-ic { color: #c27803; } .j-note--warning span.sub { color: var(--text-secondary); }
.j-td--dom.is-warn, .j-td--wait.is-late, .j-ag__d small.is-soon { color: var(--text-primary); } .j-td--dom.is-warn .j-ic { color: #c27803; }
.j-chk.is-no { color: var(--text-secondary); } .j-chk.is-no .j-ic { color: #c27803; } .j-chk.is-ok { color: var(--text-primary); } .j-chk.is-ok .j-ic { color: var(--ok-dot); }
.j-rec.is-warn > .j-ic, .j-checkrow.is-bad > .j-ic { color: #c27803; }
progress.j-bar, progress.j-bar--ok, progress.j-bar--warn, progress.j-bar--late { color: var(--brand); }
progress.j-bar::-webkit-progress-value, progress.j-bar--ok::-webkit-progress-value, progress.j-bar--warn::-webkit-progress-value, progress.j-bar--late::-webkit-progress-value { background: var(--brand); }
progress.j-bar::-moz-progress-bar, progress.j-bar--ok::-moz-progress-bar, progress.j-bar--warn::-moz-progress-bar, progress.j-bar--late::-moz-progress-bar { background: var(--brand); }
/* page + containers */
body.j--ws { background: var(--surface-0); } .j--ws .j-page { gap: 20px; padding-top: 36px; }
.j-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 13px; box-shadow: var(--card-shadow); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .j-card--tint { background: var(--surface-2); } .j-card--flush { padding: 0; overflow: hidden; }
.j-card__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .j-card__h h2 { font-size: 17px; font-weight: 600; } .j-card__h small { font-size: 13.5px; color: var(--text-secondary); }
.j-grid { display: grid; gap: 20px; } .j-grid--2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .j-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .j-grid--side { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.j-tile { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-bg); color: var(--brand2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .j-tile--sm { width: 40px; height: 40px; } .j-tile--mute { background: #fff; color: var(--text-secondary); border: 1px solid var(--border-soft); }
.j-countb { min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--brand-bg); color: var(--brand2); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; direction: ltr; }
.j-mono { width: 40px; height: 40px; border-radius: 10px; background: var(--navy2); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; direction: ltr; letter-spacing: .02em; }
.j-uni__t small { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.j-title h1 { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.4; } .j-title p { font-size: 14.5px; color: var(--text-secondary); }
/* KPI card */
.j-kpi { gap: 14px; padding: 20px; } .j-kpi__top { display: flex; align-items: center; justify-content: space-between; } .j-kpi__l { font-size: 14px; font-weight: 500; color: var(--text-secondary); } .j-kpi__v { display: flex; align-items: baseline; gap: 6px; } .j-kpi__v b { font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1.2; direction: ltr; } .j-kpi__v span { font-size: 14px; color: var(--text-secondary); } .j-kpi__w { font-size: 13.5px; color: var(--text-secondary); }
.j .j-kpi { color: inherit; } .j a.j-kpi:hover { border-color: var(--border-default); color: inherit; }
/* hero: next step + launch checklist */
.j-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 0; overflow: hidden; gap: 0; } .j-hero__main { padding: 32px; display: flex; flex-direction: column; gap: 14px; border-inline-end: 1px solid var(--border-soft); } .j-hero__main h2 { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.4; } .j-hero__main p { font-size: 15px; color: var(--text-secondary); }
.j-hero__side { padding: 28px 32px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; } .j-hero__row { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .j-hero__row .j-urlbox { flex: 1 1 0; height: 48px; font-size: 15px; font-weight: 600; }
.j-stepl { display: flex; align-items: center; gap: 12px; min-height: 48px; } .j-stepl__d { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-default); background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; } .j-stepl__t { flex: 1 1 0; display: flex; flex-direction: column; font-size: 15px; font-weight: 500; color: var(--text-secondary); line-height: 1.5; } .j-stepl__t small { font-size: 12.5px; color: var(--text-secondary); font-weight: 400; } .j-stepl > small { font-size: 13px; color: var(--text-secondary); }
.j-stepl.is-done .j-stepl__d { background: var(--brand); border-color: var(--brand); } .j-stepl.is-done .j-stepl__t { color: var(--text-primary); } .j-stepl.is-now .j-stepl__d { background: var(--brand-bg); border: 2px solid var(--brand); } .j-stepl.is-now .j-stepl__t { color: var(--text-primary); font-weight: 600; }
.j-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; } .j-item__t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .j-item__t b { font-size: 16px; font-weight: 600; line-height: 1.6; } .j-item__t span { font-size: 13.5px; color: var(--text-secondary); }
.j-bigdate { width: 92px; height: 92px; border-radius: 13px; background: var(--brand-bg); color: var(--brand2); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .j-bigdate b { font-size: 34px; font-weight: 700; line-height: 1.1; direction: ltr; } .j-bigdate span { font-size: 13px; font-weight: 600; }
.j-mini { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14.5px; } .j-mini__t { flex: 1 1 0; min-width: 0; } .j-mini small { font-size: 13px; color: var(--text-secondary); white-space: nowrap; } .j-mini .j-avatar { width: 32px; height: 32px; font-size: 11.5px; background: var(--surface-0); color: var(--text-primary); } .j-mini .j-gamelogo { width: 36px; height: 36px; font-size: 11px; }
/* agenda timeline */
.j-flts { display: flex; gap: 8px; flex-wrap: wrap; } .j .j-flt { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border-default); color: var(--text-primary); font-size: 14.5px; font-weight: 600; } .j .j-flt.is-on { background: var(--navy); border-color: var(--navy); color: #fff; } .j-flt i { font-style: normal; font-size: 12.5px; opacity: .75; direction: ltr; }
.j-ev { display: flex; align-items: center; gap: 20px; padding: 20px 0; flex-wrap: wrap; scroll-margin-top: 24px; } .j-ev.is-off { opacity: .6; } .j-ev__date { width: 76px; height: 76px; border-radius: 13px; background: var(--brand-bg); color: var(--brand2); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .j-ev__date b { font-size: 26px; font-weight: 700; line-height: 1.1; direction: ltr; } .j-ev__date span { font-size: 12.5px; font-weight: 600; }
.j-ev__t { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .j-ev__t b { font-size: 16px; font-weight: 600; line-height: 1.5; } .j-ev__tags { display: flex; gap: 8px; flex-wrap: wrap; } .j-ev__a { width: 190px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.j-stp { display: flex; align-items: flex-start; width: 440px; flex-shrink: 0; } .j-stp__s { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); text-align: center; } .j-stp__s i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-default); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; } .j-stp__l { flex: 1 1 0; height: 2px; border-radius: 2px; background: var(--border-default); margin-top: 10px; }
.j-stp__s.is-done i { background: var(--brand); border-color: var(--brand); } .j-stp__s.is-done, .j-stp__s.is-now { color: var(--text-primary); } .j-stp__s.is-now { font-weight: 600; } .j-stp__s.is-now i { background: var(--brand-bg); border: 2px solid var(--brand); } .j-stp__l.is-done { background: var(--brand); }
.j-act { position: relative; } .j-act > summary { list-style: none; cursor: pointer; } .j-act > summary::-webkit-details-marker { display: none; } .j-act__pop { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 20; width: 340px; background: #fff; border: 1px solid var(--border-default); border-radius: 13px; box-shadow: 0 12px 32px rgba(7, 20, 38, .14); padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: start; }
.j-act__pop form { display: flex; flex-direction: column; gap: 12px; } .j-act__pop p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }
.j-srcd { position: relative; } .j-srcd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--brand2); } .j-srcd > summary::-webkit-details-marker { display: none; }
/* team & readiness in cards */
.j-vac { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .j-vac__t { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; } .j-vac__t b { font-size: 16px; font-weight: 600; }
.j-rdy { display: flex; align-items: center; gap: 20px; padding: 18px 0; flex-wrap: wrap; } .j-rdy__id { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .j-rdy__id b { font-size: 16px; font-weight: 600; } .j-rdy__dots { display: flex; gap: 14px; flex-wrap: wrap; width: 400px; } .j-rdy__miss { flex: 1 1 240px; display: flex; flex-direction: column; } .j-rdy__miss b { font-size: 14.5px; font-weight: 600; line-height: 1.7; } .j-rdy__miss span { font-size: 13px; color: var(--text-secondary); }
@media (max-width: 1240px) { .j-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .j-grid--side { grid-template-columns: minmax(0, 1fr); } .j-stp { width: 100%; order: 5; } .j-rdy__dots { width: 100%; } }
@media (max-width: 900px) { .j-grid--2, .j-grid--4, .j-hero { grid-template-columns: minmax(0, 1fr); } .j-hero__main { border-inline-end: 0; border-bottom: 1px solid var(--border-soft); padding: 24px; } .j-hero__side { padding: 20px 24px; } .j-hero__row { flex-direction: column; align-items: stretch; } .j-card { padding: 20px; } .j-item { flex-wrap: wrap; } .j-ev__a { width: 100%; justify-content: flex-start; } .j-act__pop { position: static; width: auto; box-shadow: none; margin-top: 8px; } .j-stp__s { width: 70px; font-size: 11.5px; } }
@media (max-width: 900px) { .j-uni__t small { display: none; } .j--ws .j-between { flex-wrap: wrap; } .j-flts { width: 100%; } .j-stp { width: 100%; min-width: 0; } .j-stp__s { width: auto; flex: 0 0 64px; } .j-ev__t { flex-basis: 100%; } .j-rdy__dots, .j-rdy__id, .j-rdy__miss { width: 100%; flex-basis: 100%; } .j-kpi__v b { font-size: 28px; } }
@media print { body.j { background: #fff; } .j-noprint, .j-top, .j-printbar { display: none !important; } .j-sheet { border: 0; margin: 0; padding: 0; width: 100%; max-width: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.j input[list]::-webkit-calendar-picker-indicator { display: none !important; }
.j-ag__upd { padding: 0 16px 8px; } .j-ag__upd .j-ag__forms { padding: 8px 0 12px; }
/* v0.13 — tournament journey */
.j-stp--long { width: 600px; } .j-stp--long .j-stp__s { width: 76px; } .j-stp--wide { width: 100%; max-width: 760px; }
.j-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; } .j-stats > div { padding: 14px 18px; border-inline-start: 1px solid var(--border-soft); } .j-stats > div:first-child { border-inline-start: 0; } .j-stats b { display: block; font-size: 24px; font-weight: 700; color: var(--navy); direction: ltr; text-align: right; } .j-stats span { font-size: 13px; color: var(--text-secondary); }
.j-blt { display: flex; flex-direction: column; gap: 8px; } .j-blt > div { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.8; } .j-blt .j-ic { margin-top: 5px; color: var(--brand2); }
.j-kvl > div { display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: 14.5px; } .j-kvl > div:first-child { border-top: 0; } .j-kvl dt { width: 140px; flex-shrink: 0; font-size: 14px; color: var(--text-secondary); } .j-kvl dd { flex: 1 1 0; }
.j-dos__head { display: flex; align-items: center; gap: 20px; } .j-dos__head h1 { font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.4; } .j-dos__next { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 20px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.j-sel { display: grid; grid-template-columns: minmax(0, 1.3fr) 78px 92px 96px 140px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; font-size: 14.5px; } .j-sel--h { font-size: 13px; font-weight: 600; color: var(--text-secondary); padding-top: 0; } .j-dots { display: flex; gap: 5px; } .j-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-soft); } .j-dots i.is-on { background: var(--brand); } .j-dots i.is-no { background: #fff; border: 1.5px solid var(--border-default); }
.j-mk { display: grid; grid-template-columns: minmax(0, 1.3fr) 150px 110px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; } .j-mk .j-input, .j-mk .j-select, .j-sel .j-select, .j-sel .j-input { height: 40px; font-size: 14px; }
.j-sesd > summary { list-style: none; cursor: pointer; } .j-sesd > summary::-webkit-details-marker { display: none; } .j-sesd[open] > summary { padding-bottom: 8px; }
.j-ann { width: 960px; max-width: calc(100% - 40px); margin: 0 auto; padding: 40px 0 56px; display: flex; flex-direction: column; gap: 20px; } .j-ann h1 { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.j-how { display: flex; align-items: center; gap: 16px; padding: 18px 0; flex-wrap: wrap; } .j-how__n { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-bg); border: 2px solid var(--brand); color: var(--brand2); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .j-how.is-done .j-how__n { background: var(--brand); color: #fff; } .j-how__t { flex: 1 1 240px; display: flex; flex-direction: column; } .j-how__t b { font-size: 16px; font-weight: 600; } .j-how__t span { font-size: 14px; color: var(--text-secondary); }
.j-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .j-formgrid .is-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .j-stats, .j-formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .j-sel, .j-mk { grid-template-columns: minmax(0, 1fr); gap: 6px; } .j-sel--h { display: none; } .j-stp--long { width: 100%; } .j-dos__head { flex-wrap: wrap; } }
.j-input--sm { height: 40px; font-size: 14px; }

.j-how__form { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; } .j-how__full { flex: 1 1 100%; } .j-w180 { width: 180px; } .j-center { text-align: center; }

.j-summary-pad { padding: 20px 24px; cursor: pointer; list-style: none; } .j-summary-pad::-webkit-details-marker { display: none; } .j-form-pad { padding: 0 24px 24px; } .j-bordered { border: 1px solid var(--border-soft); border-radius: 10px; padding: 4px 14px; } .j-pad-y { padding: 8px 0; } .j-flex200 { flex: 1 1 200px; min-height: 0; } .j-w64 { width: 64px; }
/* v0.15 — internal tournaments */
.j-tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1100px) { .j-tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .j-tpl-grid { grid-template-columns: minmax(0, 1fr); } }
.j-tpl { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 13px; border: 1px solid var(--border-soft); background: #fff; box-shadow: var(--card-shadow); text-decoration: none; color: inherit; } .j-tpl:hover { border-color: var(--brand); color: inherit; }
.j-tpl__name { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.4; } .j-tpl__blurb { font-size: 13.5px; color: var(--text-secondary); line-height: 1.8; } .j-tpl__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--text-secondary); }
.j-games-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 700px) { .j-games-pick { grid-template-columns: minmax(0, 1fr); } }
.j-gpick { display: block; cursor: pointer; } .j-gpick > input { position: absolute; opacity: 0; width: 1px; height: 1px; } .j-gpick__box { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; border: 1px solid var(--border-default); background: #fff; } .j-gpick > input:checked + .j-gpick__box { border: 1.5px solid var(--brand); background: var(--brand-tint); } .j-gpick > input:focus-visible + .j-gpick__box { box-shadow: var(--focus-ring); }
.j-gpick__t b { display: block; font-size: 14.5px; font-weight: 600; } .j-gpick__t small { font-size: 13px; color: var(--text-secondary); }
.j-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 900px) { .j-tiers { grid-template-columns: minmax(0, 1fr); } }
.j-tier { gap: 16px; } .j-tier--rec { border: 1.5px solid var(--brand); } .j-tier__dot { width: 14px; height: 14px; border-radius: 50%; } .j-tier__dot[data-c=gold] { background: #f5a524; } .j-tier__dot[data-c=silver] { background: #94a3b8; } .j-tier__dot[data-c=bronze] { background: #c9803f; }
.j-tier__name { font-size: 18px; font-weight: 700; color: var(--navy); } .j-tier__price { align-items: baseline; gap: 6px; } .j-tier__price .j-num { font-size: 26px; font-weight: 700; color: var(--navy); }
.j-letter { border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px 18px; background: var(--surface-2); font-size: 13.5px; color: var(--text-secondary); line-height: 2; }