:root {
    --ink: #16352a;
    --ink-soft: #4e675b;
    --navy: #174532;
    --teal: #2f6f4e;
    --teal-dark: #24583e;
    --mint: #e8f3eb;
    --gold: #c58b2a;
    --sand: #f3f7f3;
    --surface: #ffffff;
    --line: #d9e2e3;
    --danger: #b84b4b;
    --success: #237a4b;
    --shadow: 0 18px 60px rgba(23, 69, 50, .11);
    --radius: 18px;
    --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -60px; right: 20px; z-index: 100; padding: 10px 16px; color: #fff; background: var(--navy); border-radius: 8px; }
.skip-link:focus { top: 10px; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.93); border-bottom: 1px solid rgba(217,226,227,.75); backdrop-filter: blur(14px); }
.nav-wrap { display: flex; align-items: center; gap: 28px; min-height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.brand small { display: block; color: var(--ink-soft); font-size: 10px; line-height: 1.2; }
.brand-mark { display: inline-flex; align-items: end; gap: 3px; width: 28px; height: 30px; padding: 2px; transform: skewY(-12deg); }
.brand-mark span { display: block; width: 7px; border-radius: 4px 4px 1px 1px; background: var(--teal); }
.brand-mark span:nth-child(1) { height: 17px; background: var(--gold); }.brand-mark span:nth-child(2) { height: 25px; }.brand-mark span:nth-child(3) { height: 20px; background: var(--navy); }
.main-nav { display: flex; align-items: center; gap: 22px; margin-inline: auto; color: var(--ink-soft); font-size: 13px; }
.main-nav a { position: relative; padding: 27px 0 24px; }.main-nav a:hover, .main-nav a:focus { color: var(--teal); }.main-nav a:hover::after { position: absolute; right: 0; bottom: 16px; left: 0; height: 2px; background: var(--teal); border-radius: 2px; content: ''; }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.nav-toggle { display: none; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; color: var(--navy); background: #fff; }
.user-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 12px; }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--teal); border-radius: 50%; font-size: 12px; font-weight: 700; }
.avatar-small { width: 24px; height: 24px; font-size: 10px; }.avatar-xl { width: 68px; height: 68px; font-size: 24px; background: var(--navy); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 18px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 600; transition: transform .2s ease, background .2s ease, border .2s ease; }
.btn:hover { transform: translateY(-2px); }.btn-primary { color: #fff; background: var(--teal); }.btn-primary:hover { background: var(--teal-dark); }.btn-outline { color: var(--navy); background: transparent; border-color: var(--line); }.btn-outline:hover { border-color: var(--teal); color: var(--teal); }.btn-soft { color: var(--navy); background: var(--mint); }.btn-ghost { color: var(--ink-soft); background: transparent; }.btn-danger { color: #fff; background: var(--danger); }.btn-small { min-height: 34px; padding: 6px 12px; font-size: 11px; }.btn-block { width: 100%; }
.hero-section { position: relative; overflow: hidden; padding: 90px 0 82px; background: var(--sand); }.hero-section::before { position: absolute; top: -250px; left: -200px; width: 650px; height: 650px; border: 1px solid rgba(8,127,140,.1); border-radius: 50%; content: ''; }.hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }.hero-copy { max-width: 570px; }.eyebrow { display: inline-block; margin-bottom: 12px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .5px; }.hero-copy h1 { max-width: 540px; margin: 0 0 22px; color: var(--navy); font-size: clamp(38px, 5vw, 64px); line-height: 1.15; letter-spacing: -2px; }.hero-copy h1 em { color: var(--teal); font-style: normal; }.hero-copy p { max-width: 500px; margin: 0 0 30px; color: var(--ink-soft); font-size: 17px; }.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }.trust-line { display: flex; align-items: center; gap: 8px; margin-top: 34px; color: #66777c; font-size: 11px; }.pulse-dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 5px rgba(30,128,100,.1); }.trust-separator { width: 1px; height: 14px; margin-inline: 4px; background: #cad2d1; }
.hero-visual { position: relative; min-height: 450px; }.visual-orbit { position: absolute; border: 1px solid rgba(8,127,140,.18); border-radius: 50%; }.orbit-one { top: 20px; right: -20px; width: 420px; height: 420px; }.orbit-two { top: 65px; right: 25px; width: 330px; height: 330px; border-color: rgba(197,139,42,.25); }.hero-card { position: absolute; border: 1px solid rgba(255,255,255,.65); border-radius: 16px; box-shadow: var(--shadow); }.hero-card-main { top: 52px; right: 58px; width: 320px; padding: 26px; background: rgba(255,255,255,.88); }.card-topline { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 11px; }.live-indicator { color: var(--success); }.live-indicator::before { display: inline-block; width: 6px; height: 6px; margin-left: 5px; background: var(--success); border-radius: 50%; content: ''; }.impact-number { margin-top: 20px; color: var(--navy); font-size: 57px; font-weight: 700; line-height: 1; }.impact-label { margin-top: 8px; color: var(--ink-soft); font-size: 12px; }.mini-chart { display: flex; align-items: end; gap: 10px; height: 120px; margin-top: 26px; padding: 10px 4px 0; border-bottom: 1px solid var(--line); }.mini-chart span { flex: 1; background: linear-gradient(180deg, var(--teal), #a7d5d0); border-radius: 4px 4px 0 0; }.chart-labels { display: flex; justify-content: space-between; margin-top: 8px; color: #92a0a2; font-size: 10px; }.hero-card-float { right: 0; bottom: 55px; display: flex; align-items: center; gap: 10px; width: 245px; padding: 14px 16px; background: var(--navy); color: #fff; }.hero-card-float strong, .hero-card-float small { display: block; }.hero-card-float strong { font-size: 12px; }.hero-card-float small { color: #a7c6ca; font-size: 10px; }.float-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--navy); background: #d4edeb; border-radius: 50%; }.arrow-circle { display: grid; place-items: center; width: 24px; height: 24px; margin-right: auto; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 11px; }.hero-card-stat { bottom: 5px; left: 30px; display: grid; gap: 0; padding: 15px 20px; background: var(--gold); color: #fff; }.hero-card-stat strong { font-size: 30px; line-height: 1; }.hero-card-stat span { font-size: 11px; }
.stats-section { background: var(--navy); color: #fff; }.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.stats-grid > div { display: grid; gap: 2px; padding: 22px 28px; border-left: 1px solid rgba(255,255,255,.13); }.stats-grid > div:last-child { border-left: 0; }.stats-grid strong { font-size: 29px; }.stats-grid span { color: #a8c4c7; font-size: 11px; }
.section { padding: 82px 0; }.section-tinted, .news-strip { background: #f6f8f6; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }.section-heading h2 { margin: 0; color: var(--navy); font-size: clamp(25px, 3vw, 36px); line-height: 1.25; }.section-heading > p { max-width: 340px; margin: 0; color: var(--ink-soft); font-size: 13px; }.heading-compact { align-items: center; margin-bottom: 20px; }.heading-compact h2 { font-size: 24px; }.text-link, .feature-link, .news-card a { color: var(--teal); font-size: 12px; font-weight: 600; }.lead { max-width: 440px; margin: 18px 0 25px; color: var(--ink-soft); font-size: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.feature-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 285px; padding: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.feature-card-dark { color: #fff; background: var(--navy); border-color: var(--navy); }.feature-card-dark h3, .feature-card-dark .feature-link { color: #fff; }.feature-card-dark p { color: #a9c8c9; }.feature-number { position: absolute; top: 22px; left: 25px; color: rgba(8,127,140,.45); font-size: 12px; font-weight: 700; }.feature-card-dark .feature-number { color: rgba(255,255,255,.28); }.feature-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 35px; color: var(--teal); background: var(--mint); border-radius: 9px; font-size: 19px; }.feature-card h3 { margin: 0 0 8px; font-size: 21px; }.feature-card p { margin: 0; color: var(--ink-soft); font-size: 12px; }.feature-link { margin-top: 25px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.project-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }.project-cover { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 168px; padding: 18px; overflow: hidden; color: #fff; }.project-cover::before, .project-cover::after { position: absolute; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; content: ''; }.project-cover::before { right: -35px; top: -70px; width: 210px; height: 210px; }.project-cover::after { left: 18px; bottom: -120px; width: 180px; height: 180px; }.project-cover span { position: relative; z-index: 1; padding: 3px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; background: rgba(0,0,0,.1); font-size: 10px; }.project-cover strong { position: relative; z-index: 1; font-size: 54px; line-height: .8; opacity: .5; }.project-cover-0 { background: linear-gradient(135deg, #0b6876, #59aaa5); }.project-cover-1 { background: linear-gradient(135deg, #203f59, #7b9bad); }.project-cover-2 { background: linear-gradient(135deg, #936e28, #dab96e); }.project-cover-3 { background: linear-gradient(135deg, #553d62, #a890b6); }.project-body { padding: 20px; }.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #789096; font-size: 10px; }.project-body h2, .project-body h3 { margin: 10px 0 6px; color: var(--navy); font-size: 18px; }.project-body p { min-height: 44px; margin: 0; color: var(--ink-soft); font-size: 12px; }.project-owner { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink-soft); font-size: 11px; }.card-arrow { display: grid; place-items: center; width: 25px; height: 25px; margin-right: auto; color: var(--teal); border: 1px solid var(--line); border-radius: 50%; }.split-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }.event-list { display: grid; gap: 10px; }.event-row { display: grid; grid-template-columns: 58px 1fr 28px; align-items: center; gap: 15px; padding: 17px; border-bottom: 1px solid var(--line); }.event-row:hover { background: #fafcfb; }.date-block { display: grid; place-items: center; width: 54px; height: 58px; color: #fff; background: var(--teal); border-radius: 8px; line-height: 1.1; }.date-block strong { font-size: 21px; }.date-block span { font-size: 9px; }.event-row h3 { margin: 4px 0 1px; font-size: 14px; }.event-row p { margin: 0; color: var(--ink-soft); font-size: 10px; }.tag { display: inline-block; color: var(--teal); font-size: 10px; }.row-arrow { color: var(--teal); }.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.news-card { padding: 25px; border-top: 3px solid var(--teal); background: #fff; }.news-date { color: #899b9c; font-size: 10px; }.news-card h3 { margin: 13px 0 8px; font-size: 17px; }.news-card p { min-height: 45px; margin: 0 0 20px; color: var(--ink-soft); font-size: 12px; }
.page-hero { padding: 62px 0 55px; background: var(--sand); }.page-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.page-hero h1 { margin: 0 0 10px; color: var(--navy); font-size: clamp(34px, 5vw, 52px); line-height: 1.15; }.page-hero p { margin: 0; color: var(--ink-soft); }.page-hero-stat { display: grid; min-width: 115px; padding: 18px; color: #fff; background: var(--navy); border-radius: 14px; text-align: center; }.page-hero-stat strong { font-size: 30px; line-height: 1; }.page-hero-stat span { color: #a8c4c7; font-size: 10px; }.filter-bar { display: flex; gap: 10px; margin-bottom: 30px; }.search-field { display: flex; flex: 1; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.search-field span { color: var(--teal); font-size: 21px; }.search-field input { flex: 1; border: 0; outline: 0; }.filter-bar select { min-width: 180px; }.filter-bar input, .filter-bar select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }.project-grid-large .project-body { min-height: 205px; }.empty-state { display: grid; grid-column: 1 / -1; justify-items: center; gap: 3px; padding: 48px 20px; color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 14px; background: #fbfcfb; text-align: center; }.empty-state strong { color: var(--navy); }
.event-page-list { display: grid; gap: 16px; }.event-card { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 24px; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.event-card:hover { box-shadow: var(--shadow); }.event-date-large { display: grid; place-items: center; align-content: center; min-height: 95px; color: var(--teal); background: var(--mint); border-radius: 10px; line-height: 1.1; }.event-date-large strong { font-size: 34px; }.event-date-large span { font-size: 11px; }.event-content h2 { margin: 7px 0 5px; font-size: 20px; }.event-content p { margin: 0; color: var(--ink-soft); font-size: 12px; }.event-details { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 14px; color: #71888b; font-size: 10px; }.event-action { min-width: 105px; text-align: center; }.status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; font-size: 10px; }.status-success { color: var(--success); background: #e6f4ef; }.status-pending { color: #9c741f; background: #fff4d7; }.status-published { color: var(--success); background: #e6f4ef; }.status-pending, .status-rejected { color: #a17822; background: #fff4d7; }.status-rejected { color: var(--danger); background: #fdeaea; }
.page-hero-clubs { background: #e9f3ef; }.club-orbit, .competition-mark { display: grid; place-items: center; width: 110px; height: 110px; color: var(--teal); border: 1px solid rgba(8,127,140,.3); border-radius: 50%; font-size: 65px; }.club-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.club-card { padding: 25px; border: 1px solid var(--line); border-top: 4px solid var(--club-color); border-radius: var(--radius); background: #fff; }.club-symbol { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 25px; color: var(--club-color); background: color-mix(in srgb, var(--club-color) 13%, white); border-radius: 10px; }.club-card h2 { margin: 9px 0 7px; font-size: 20px; }.club-card p { min-height: 65px; margin: 0; color: var(--ink-soft); font-size: 12px; }.club-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--line); color: #74888b; font-size: 10px; }.news-list { display: grid; gap: 16px; max-width: 900px; }.news-full-card { display: grid; grid-template-columns: 95px 1fr; gap: 25px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.news-date-box { display: grid; place-items: center; align-content: center; height: 100px; color: var(--teal); background: var(--mint); border-radius: 10px; line-height: 1.1; }.news-date-box strong { font-size: 32px; }.news-date-box span { font-size: 11px; }.news-full-card h2 { margin: 2px 0 8px; font-size: 23px; }.news-full-card p { margin: 0 0 16px; color: var(--ink-soft); font-size: 13px; }
.page-hero-competition { background: var(--navy); color: #fff; }.page-hero-competition h1 { color: #fff; }.page-hero-competition p { color: #a8c4c7; }.competition-mark { color: var(--gold); border-color: rgba(197,139,42,.6); }.competition-list { display: grid; gap: 16px; max-width: 900px; margin: auto; }.competition-card { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 20px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.competition-icon { display: grid; place-items: center; width: 58px; height: 58px; color: var(--navy); background: #f4ead3; border-radius: 50%; font-size: 28px; }.competition-card h2 { margin: 5px 0; font-size: 19px; }.competition-card p { margin: 0 0 8px; color: var(--ink-soft); font-size: 12px; }.competition-layout { min-height: 380px; }.quiz-wrap { max-width: 760px; margin: auto; }.back-link { display: inline-block; margin-bottom: 25px; color: var(--teal); font-size: 12px; }.quiz-wrap h2 { margin: 0 0 7px; font-size: 30px; }.quiz-wrap > p { margin: 0 0 24px; color: var(--ink-soft); }.quiz-form { display: grid; gap: 15px; }.question-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; }.question-card legend { width: 100%; padding: 0; color: var(--navy); font-size: 15px; font-weight: 600; }.question-card legend span { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-left: 8px; color: #fff; background: var(--teal); border-radius: 50%; font-size: 11px; }.question-card label { display: inline-flex; align-items: center; gap: 8px; margin: 18px 20px 0 0; color: var(--ink-soft); font-size: 13px; }.result-card { padding: 30px; margin-top: 25px; background: var(--mint); border-radius: 14px; text-align: center; }.result-card span, .result-card p { display: block; color: var(--ink-soft); font-size: 12px; }.result-card strong { display: block; color: var(--teal); font-size: 50px; line-height: 1.3; }.login-callout { padding: 28px; margin-top: 25px; background: var(--sand); border-radius: 14px; }.login-callout p { color: var(--ink-soft); }
.auth-section { min-height: calc(100vh - 80px); padding: 70px 20px; background: var(--sand); }.auth-card { display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; margin: auto; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }.auth-intro { padding: 60px; color: #fff; background: var(--navy); }.auth-intro h1 { margin: 0 0 20px; font-size: 35px; line-height: 1.25; }.auth-intro p { color: #aeccce; font-size: 13px; }.auth-intro .eyebrow { color: #83cfca; }.auth-intro-alt { background: var(--teal); }.auth-intro-alt .eyebrow { color: #c6eeee; }.auth-benefits { display: grid; gap: 12px; margin-top: 35px; color: #e1f4f1; font-size: 12px; }.auth-form-wrap { padding: 55px 50px; }.auth-form-wrap h2 { margin: 0 0 22px; color: var(--navy); font-size: 25px; }.auth-form-wrap form { display: grid; gap: 8px; }.auth-form-wrap label { color: var(--ink-soft); font-size: 12px; font-weight: 600; }.auth-form-wrap input, .auth-form-wrap textarea, .auth-form-wrap select { width: 100%; min-height: 43px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; outline-color: var(--teal); background: #fff; }.auth-form-wrap .btn { margin-top: 15px; }.form-foot { margin: 22px 0 0; color: var(--ink-soft); font-size: 12px; text-align: center; }.form-foot a { color: var(--teal); font-weight: 600; }.demo-box { display: grid; gap: 3px; padding: 12px 15px; margin-top: 22px; color: var(--ink-soft); background: #f7faf8; border-right: 3px solid var(--gold); font-size: 10px; }.demo-box strong { color: var(--navy); }.check-row { display: flex !important; align-items: flex-start; gap: 8px; margin-top: 10px; font-weight: 400 !important; }.check-row input { width: 16px; min-height: 16px; margin-top: 4px; }.check-row a { color: var(--teal); }
.dashboard-hero { padding: 55px 0; color: #fff; background: var(--navy); }.dashboard-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.profile-summary { display: flex; align-items: center; gap: 18px; }.profile-summary h1 { margin: 0 0 3px; font-size: 31px; }.profile-summary p { margin: 0; color: #a8c4c7; font-size: 12px; }.profile-summary .eyebrow { color: #82cfcb; margin-bottom: 2px; }.profile-score { min-width: 150px; padding: 18px; border: 1px solid rgba(255,255,255,.17); border-radius: 13px; text-align: center; }.profile-score span, .profile-score small { display: block; color: #a8c4c7; font-size: 10px; }.profile-score strong { display: block; color: #fff; font-size: 36px; line-height: 1.25; }.dashboard-grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: 35px; }.dashboard-projects { display: grid; gap: 12px; }.dashboard-project { display: grid; grid-template-columns: 86px 1fr; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.project-thumb { display: grid; place-items: center; height: 80px; color: #fff; border-radius: 8px; }.project-thumb strong { font-size: 34px; opacity: .5; }.dashboard-project h3 { margin: 5px 0 2px; font-size: 16px; }.dashboard-project p { margin: 0; color: var(--ink-soft); font-size: 11px; }.dashboard-side { display: grid; align-content: start; gap: 16px; }.side-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.side-card-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }.side-card h3 { margin: 0; font-size: 15px; }.side-card-head a { color: var(--teal); font-size: 10px; }.side-list-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf1f0; }.side-list-item:last-child { border: 0; }.side-list-item strong, .side-list-item small { display: block; }.side-list-item strong { font-size: 11px; }.side-list-item small { color: var(--ink-soft); font-size: 10px; }.mini-date { min-width: 37px; color: var(--teal); font-size: 10px; }.club-mini { display: grid; place-items: center; width: 27px; height: 27px; color: var(--teal); background: var(--mint); border-radius: 7px; }.muted { color: #879a9b; font-size: 11px; }
.admin-hero { background: #e8f2ef; }.admin-badge { padding: 8px 13px; color: var(--teal); background: #fff; border: 1px solid #c3dfd9; border-radius: 999px; font-size: 11px; }.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px; }.admin-stat { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.admin-stat strong, .admin-stat span { display: block; }.admin-stat strong { color: var(--teal); font-size: 30px; line-height: 1.2; }.admin-stat span { color: var(--ink-soft); font-size: 11px; }.admin-columns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }.admin-table-card { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }.review-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }.review-row:last-child { border-bottom: 0; }.review-row h3 { margin: 3px 0; font-size: 14px; }.review-row p { margin: 0; color: var(--ink-soft); font-size: 10px; }.review-actions { display: flex; gap: 7px; }.review-row-compact { align-items: center; }.policy-content { max-width: 820px; color: var(--ink-soft); }.policy-content h2 { margin-top: 35px; color: var(--navy); }.policy-content li { margin: 9px 0; }.policy-note { padding: 16px; color: #795b1f; background: #fff4d7; border-right: 4px solid var(--gold); border-radius: 8px; font-size: 12px; }.faq-list { display: grid; gap: 10px; max-width: 820px; }.faq-list details { padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.faq-list summary { color: var(--navy); cursor: pointer; font-weight: 600; }.faq-list p { margin: 14px 0 0; color: var(--ink-soft); font-size: 13px; }
.site-footer { padding: 50px 0 22px; color: #b5cdce; background: var(--navy); }.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; }.brand-footer strong { color: #fff; }.brand-footer small { color: #a8c4c7; }.site-footer p { max-width: 280px; margin: 16px 0 0; color: #8eafb2; font-size: 12px; }.site-footer h3 { margin: 0 0 12px; color: #fff; font-size: 13px; }.site-footer a { display: block; margin: 6px 0; color: #9fbdc0; font-size: 11px; }.site-footer a:hover { color: #fff; }.footer-bottom { display: flex; justify-content: space-between; padding-top: 25px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.12); color: #7f9fa2; font-size: 10px; }
.alert { padding: 12px 15px; margin: 14px 0; border-radius: 8px; font-size: 12px; }.alert-success { color: var(--success); background: #e6f4ef; }.alert-error { color: var(--danger); background: #fdeaea; }
.modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px; background: rgba(10,35,45,.55); }.modal.is-open { display: grid; }.modal-card { width: min(100%, 560px); max-height: 90vh; overflow: auto; padding: 28px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }.modal-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 20px; }.modal-head h2 { margin: 0; font-size: 24px; }.modal-card form { display: grid; gap: 8px; }.modal-card label { color: var(--ink-soft); font-size: 11px; font-weight: 600; }.modal-card input, .modal-card textarea, .modal-card select { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; outline-color: var(--teal); }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.icon-button { display: grid; place-items: center; width: 33px; height: 33px; padding: 0; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 20px; }
.assistant-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: #fff; background: var(--teal); border: 0; border-radius: 999px; box-shadow: 0 10px 25px rgba(8,127,140,.25); font-size: 12px; font-weight: 600; }.assistant-launcher span:first-child { display: grid; place-items: center; width: 22px; height: 22px; color: var(--teal); background: #d9f0ed; border-radius: 50%; }.assistant-panel { position: fixed; right: 24px; bottom: 80px; z-index: 40; display: flex; flex-direction: column; width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100vh - 110px)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 25px 70px rgba(13,47,59,.2); opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease; }.assistant-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }.assistant-head { display: flex; align-items: start; justify-content: space-between; padding: 18px; color: #fff; background: var(--navy); }.assistant-head h2 { margin: 0; font-size: 19px; }.assistant-head .eyebrow { margin: 0; color: #84cfcb; }.assistant-head .icon-button { color: #fff; border-color: rgba(255,255,255,.3); background: transparent; }.assistant-notice { padding: 10px 16px; color: #795b1f; background: #fff7e5; font-size: 10px; }.assistant-messages { flex: 1; overflow: auto; padding: 15px; }.assistant-message { width: fit-content; max-width: 88%; padding: 10px 12px; margin-bottom: 10px; border-radius: 11px; font-size: 12px; white-space: pre-line; }.assistant-message-bot { color: var(--ink); background: #eef5f3; border-bottom-right-radius: 3px; }.assistant-message-user { margin-right: auto; color: #fff; background: var(--teal); border-bottom-left-radius: 3px; }.assistant-message.error { color: var(--danger); background: #fdeaea; }.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 10px; }.assistant-suggestions button, .assistant-action { padding: 6px 9px; color: var(--teal); border: 1px solid #b7d9d4; border-radius: 999px; background: #f8fdfc; font-size: 10px; }.assistant-action { display: block; width: fit-content; margin: -4px 0 10px; }.assistant-confirm { display: grid; gap: 8px; padding: 10px; margin: -2px 0 12px; border: 1px solid #f0d99f; border-radius: 10px; background: #fff9ec; }.assistant-confirm span { color: #795b1f; font-size: 10px; }.assistant-form { display: flex; gap: 7px; padding: 12px; border-top: 1px solid var(--line); }.assistant-form input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; outline-color: var(--teal); font-size: 12px; }.assistant-form .btn { min-height: 38px; padding: 7px 12px; }
.assistant-auth-card { display: grid; gap: 7px; padding: 12px; margin: -2px 0 12px; border: 1px solid #b9d9c0; border-radius: 10px; background: #f4fbf5; }.assistant-auth-card strong { color: var(--navy); font-size: 12px; }.assistant-auth-card small { color: var(--ink-soft); font-size: 10px; line-height: 1.6; }.assistant-auth-form { display: grid; gap: 7px; }.assistant-auth-form input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #d2e3d5; border-radius: 7px; outline-color: var(--teal); font: inherit; font-size: 11px; }.assistant-auth-form .btn { margin-top: 2px; }
.monitor-page { padding: 34px 0 70px; }.monitor-page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 25px; }.monitor-page-head h1 { margin: 7px 0 8px; color: var(--navy); font-size: clamp(28px, 3vw, 40px); }.monitor-page-head p { max-width: 700px; margin: 0; color: var(--ink-soft); font-size: 13px; }.monitor-live-status { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 8px; min-width: 145px; padding: 11px 14px; color: var(--teal); border: 1px solid #c9dfcf; border-radius: 10px; background: #f1f8f2; font-size: 11px; font-weight: 700; }.monitor-live-status small { grid-column: 2; color: #8b9e91; font-size: 9px; font-weight: 400; direction: ltr; text-align: right; }.monitor-pulse { width: 9px; height: 9px; border-radius: 50%; background: #4eb36b; box-shadow: 0 0 0 5px rgba(78,179,107,.13); }.monitor-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; }.monitor-metric { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: 13px; background: #fff; box-shadow: 0 9px 22px rgba(23,69,50,.04); }.monitor-metric span { color: var(--ink-soft); font-size: 11px; }.monitor-metric strong { color: var(--navy); font-size: 32px; line-height: 1; }.monitor-metric small { color: #9aaa9d; font-size: 9px; }.monitor-metric-green { border-top-color: #4b9b65; }.monitor-metric-gold { border-top-color: var(--gold); }.monitor-metric-navy { border-top-color: var(--navy); }.monitor-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }.monitor-columns-bottom { align-items: start; }.monitor-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 9px 22px rgba(23,69,50,.035); }.monitor-card-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding-bottom: 15px; margin-bottom: 12px; border-bottom: 1px solid #edf2ed; }.monitor-card-head h2 { margin: 5px 0 0; color: var(--navy); font-size: 20px; }.monitor-card-head .eyebrow { margin: 0; }.monitor-count { display: grid; place-items: center; min-width: 30px; height: 30px; color: #fff; border-radius: 50%; background: var(--teal); font-size: 12px; font-weight: 700; }.monitor-alert-list { display: grid; gap: 9px; }.monitor-alert { display: flex; align-items: start; gap: 10px; padding: 11px; border: 1px solid #e5ece6; border-right: 3px solid #8aa895; border-radius: 9px; background: #fbfdfb; }.monitor-alert-warning { border-right-color: var(--gold); background: #fffaf0; }.monitor-alert-critical { border-right-color: var(--danger); background: #fff6f6; }.monitor-alert-mark { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; color: #fff; border-radius: 50%; background: #739882; font-size: 11px; font-weight: 700; }.monitor-alert-warning .monitor-alert-mark { background: var(--gold); }.monitor-alert-critical .monitor-alert-mark { background: var(--danger); }.monitor-alert strong { display: block; color: var(--navy); font-size: 12px; }.monitor-alert p { margin: 3px 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }.monitor-alert small { color: #9aaa9d; font-size: 9px; }.monitor-empty { padding: 22px 8px; color: #94a399; font-size: 11px; text-align: center; }.monitor-assistant-card { background: #f4faf5; border-color: #c8dfce; }.monitor-ai-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; border-radius: 10px; background: var(--teal); font-size: 18px; }.monitor-assistant-intro { margin: 0 0 12px; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }.monitor-assistant-messages { display: grid; gap: 8px; max-height: 205px; overflow: auto; padding: 3px; }.monitor-assistant-message { width: fit-content; max-width: 94%; padding: 9px 11px; color: var(--ink); border-radius: 9px; background: #e5f2e8; font-size: 11px; white-space: pre-line; }.monitor-assistant-message-user { margin-right: auto; color: #fff; background: var(--teal); }.monitor-assistant-form { display: flex; gap: 7px; padding-top: 12px; margin-top: 12px; border-top: 1px solid #dceadf; }.monitor-assistant-form input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid #cfe1d2; border-radius: 8px; outline-color: var(--teal); font: inherit; font-size: 11px; }.monitor-room-list { display: grid; gap: 10px; }.monitor-room { display: grid; grid-template-columns: minmax(220px, 1fr) 155px auto; align-items: center; gap: 16px; padding: 15px; border: 1px solid #e3ebe4; border-radius: 11px; background: #fcfefc; }.monitor-room-main { min-width: 0; }.monitor-room-top { display: flex; align-items: center; gap: 7px; }.monitor-room-main h3 { margin: 8px 0 4px; color: var(--navy); font-size: 15px; }.monitor-room-main p { margin: 0; color: var(--ink-soft); font-size: 10px; }.monitor-room-occupancy { display: grid; gap: 5px; color: #91a096; font-size: 10px; }.monitor-room-occupancy strong { color: var(--navy); font-size: 15px; }.monitor-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #e5eee6; }.monitor-progress i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }.monitor-room-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }.monitor-command-list { display: grid; gap: 3px; }.monitor-command-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf2ed; }.monitor-command-row:last-child { border-bottom: 0; }.monitor-command-icon { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; border-radius: 50%; background: var(--teal); font-size: 11px; }.monitor-command-row strong, .monitor-command-row small { display: block; }.monitor-command-row strong { color: var(--navy); font-size: 11px; }.monitor-command-row small { margin-top: 3px; color: #8d9d92; font-size: 9px; }.monitor-guidance-card { color: #fff; background: var(--navy); }.monitor-guidance-card h2 { margin: 7px 0 18px; color: #fff; font-size: 20px; }.monitor-guidance-card .eyebrow { color: #94d0a4; }.monitor-guidance-card ul { display: grid; gap: 10px; padding: 0 17px 0 0; margin: 0; color: #c1d7c8; font-size: 11px; line-height: 1.6; }.monitor-assistant-confirm { display: grid; gap: 8px; padding: 10px; border: 1px solid #e8ce86; border-radius: 9px; background: #fff8e7; }.monitor-assistant-confirm span { color: #765a1e; font-size: 10px; line-height: 1.6; }.monitor-assistant-confirm .btn { width: fit-content; }
@media (max-width: 900px) { .main-nav { gap: 12px; }.hero-grid { gap: 30px; }.hero-card-main { right: 20px; }.hero-card-float { right: -5px; }.feature-grid, .club-grid { grid-template-columns: repeat(2, 1fr); }.project-grid { grid-template-columns: repeat(2, 1fr); }.split-section { gap: 35px; }.dashboard-grid { grid-template-columns: 1fr; }.admin-columns { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .container { width: min(calc(100% - 28px), var(--max)); }.site-header .nav-wrap { flex-wrap: wrap; min-height: 70px; gap: 10px; }.nav-toggle { display: block; margin-right: auto; order: 2; }.nav-actions { order: 3; }.main-nav { display: none; order: 4; width: 100%; padding: 10px 0; border-top: 1px solid var(--line); }.main-nav.is-open { display: grid; grid-template-columns: repeat(2, 1fr); }.main-nav a { padding: 7px 0; }.main-nav a:hover::after { display: none; }.nav-actions .user-chip { display: none; }.nav-actions .btn-primary { display: none; }.hero-section { padding: 55px 0 40px; }.hero-grid, .auth-card { grid-template-columns: 1fr; }.hero-copy h1 { font-size: 42px; }.hero-visual { min-height: 390px; transform: scale(.9); transform-origin: top center; margin-bottom: -35px; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.stats-grid > div:nth-child(2) { border-left: 0; }.section { padding: 55px 0; }.section-heading { align-items: start; flex-direction: column; gap: 10px; margin-bottom: 22px; }.feature-grid, .project-grid, .club-grid, .news-grid { grid-template-columns: 1fr; }.split-section { grid-template-columns: 1fr; }.page-hero { padding: 42px 0; }.page-hero-inner { align-items: start; flex-direction: column; }.filter-bar { flex-wrap: wrap; }.filter-bar .search-field, .filter-bar select, .filter-bar .btn { width: 100%; }.event-card { grid-template-columns: 64px 1fr; gap: 16px; }.event-date-large { min-height: 72px; }.event-action { grid-column: 2; text-align: right; }.competition-card, .news-full-card { grid-template-columns: 1fr; }.competition-card .competition-icon { width: 45px; height: 45px; }.auth-section { padding: 25px 14px; }.auth-intro, .auth-form-wrap { padding: 32px 25px; }.auth-intro h1 { font-size: 29px; }.dashboard-hero-inner { align-items: start; flex-direction: column; }.profile-score { width: 100%; }.admin-stats { grid-template-columns: repeat(2, 1fr); }.footer-grid { grid-template-columns: 1fr 1fr; gap: 25px; }.footer-grid > div:first-child { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; gap: 5px; }.assistant-launcher { right: 14px; bottom: 14px; }.assistant-panel { right: 14px; bottom: 68px; } }
.monitor-page { padding-inline: 14px; }
@media (max-width: 1000px) { .monitor-metrics { grid-template-columns: repeat(2, 1fr); }.monitor-room { grid-template-columns: 1fr 135px; }.monitor-room-actions { grid-column: 1 / -1; justify-content: start; } }
@media (max-width: 700px) { .monitor-page { padding: 24px 14px 50px; }.monitor-page-head { align-items: start; flex-direction: column; }.monitor-live-status { width: 100%; }.monitor-columns, .monitor-columns-bottom { grid-template-columns: 1fr; }.monitor-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }.monitor-metric { padding: 14px; }.monitor-metric strong { font-size: 25px; }.monitor-room { grid-template-columns: 1fr; gap: 12px; }.monitor-room-actions { grid-column: auto; }.monitor-room-occupancy { max-width: 230px; } }

.workshop-hero { background: linear-gradient(135deg, #e7f2e9, #f5f8f4); }.workshop-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; align-items: start; }.workshop-list { display: grid; gap: 15px; }.workshop-card, .workshop-submit-card, .join-competition-card, .live-room { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 30px rgba(23,69,50,.05); }.workshop-card-top, .workshop-card-foot, .live-room-head, .competition-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.workshop-card h3, .workshop-submit-card h2 { margin: 10px 0 5px; color: var(--navy); }.workshop-card p, .workshop-submit-card > p { margin: 0; color: var(--ink-soft); font-size: 12px; }.workshop-card-foot { padding-top: 15px; margin-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }.workshop-form, .admin-form, .join-competition-form { display: grid; gap: 9px; }.workshop-form label, .admin-form label, .join-competition-form label { display: grid; gap: 4px; color: var(--ink-soft); font-size: 11px; font-weight: 600; }.workshop-form input, .workshop-form textarea, .admin-form input, .admin-form textarea, .admin-form select, .join-competition-form input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; outline-color: var(--teal); color: var(--ink); background: #fff; }.workshop-form .btn { margin-top: 7px; }.my-proposals { padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--line); }.my-proposals h3, .form-subtitle { margin: 0 0 10px; color: var(--navy); font-size: 15px; }.proposal-mini { display: grid; gap: 5px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 11px; }.proposal-mini small { color: var(--ink-soft); }.status-live { color: #1d7244; background: #e5f5e9; }.status-finished { color: #52685b; background: #edf1ed; }.admin-columns-wide { grid-template-columns: 1.35fr .95fr; margin-bottom: 18px; }.review-row-stack { display: grid; align-items: stretch; gap: 12px; }.review-form { display: grid; gap: 8px; }.review-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; resize: vertical; outline-color: var(--teal); font-size: 11px; }.review-meta { display: block; margin-top: 8px; color: #84958a; font-size: 10px; }.admin-create-card { margin: 18px 0; }.admin-form .btn { margin-top: 8px; }.question-builder { display: grid; grid-template-columns: 2fr 1fr 1fr .6fr; gap: 8px; padding: 10px; border: 1px solid #e2ebe4; border-radius: 9px; background: #f8fbf8; }.admin-checklist { display: grid; gap: 13px; padding: 0 20px; margin: 0; color: var(--ink-soft); font-size: 12px; }.admin-checklist li::marker { color: var(--teal); }.competition-detail { max-width: 920px; }.competition-detail-head { align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.competition-detail-head h2 { margin: 7px 0; color: var(--navy); font-size: 30px; }.competition-detail-head p { margin: 0; color: var(--ink-soft); font-size: 13px; }.competition-rule-badge { display: grid; min-width: 115px; padding: 12px; color: #fff; background: var(--navy); border-radius: 12px; text-align: center; }.competition-rule-badge strong { font-size: 32px; line-height: 1.1; }.competition-rule-badge span { color: #bbd6c2; font-size: 10px; }.competition-facts { display: flex; flex-wrap: wrap; gap: 18px; padding: 16px 0; color: var(--ink-soft); font-size: 11px; }.join-competition-card { display: grid; gap: 18px; margin-top: 20px; background: var(--mint); }.join-competition-card h3 { margin: 5px 0; color: var(--navy); font-size: 20px; }.join-competition-card p { margin: 0; color: var(--ink-soft); font-size: 12px; }.live-room { margin-top: 20px; background: #f9fcf9; }.live-room-head h3 { margin: 5px 0 0; color: var(--navy); }.room-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }.room-stats > div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center; }.room-stats strong, .room-stats span { display: block; }.room-stats strong { color: var(--teal); font-size: 24px; line-height: 1.2; }.room-stats span { color: var(--ink-soft); font-size: 10px; }.room-columns { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }.room-question { min-height: 145px; padding: 20px; border: 1px solid #cfe4d3; border-radius: 12px; background: #fff; }.room-question h3 { margin: 9px 0 0; color: var(--navy); font-size: 20px; line-height: 1.5; }.answer-saved { color: var(--success) !important; font-size: 12px; }.room-answer-form { display: grid; gap: 10px; padding: 15px 0; }.room-answer-form label { display: inline-flex; align-items: center; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); background: #fff; cursor: pointer; }.room-answer-form label:hover { border-color: var(--teal); }.room-answer-form [data-room-options] { display: grid; gap: 8px; }.room-leaderboard { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.room-leaderboard h3 { margin: 0; font-size: 17px; }.leader-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 7px; align-items: center; padding: 10px 0; border-bottom: 1px solid #edf1ed; font-size: 11px; }.leader-row:last-child { border-bottom: 0; }.leader-row strong { color: var(--teal); }.leader-row b { color: var(--navy); font-size: 10px; white-space: nowrap; }.room-participants { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }.room-participants h3 { margin: 0 0 9px; color: var(--navy); font-size: 14px; }.room-participants [data-room-participants] { display: flex; flex-wrap: wrap; gap: 6px; }.participant-chip { display: inline-flex; padding: 5px 8px; color: var(--ink-soft); border: 1px solid #d5e5d8; border-radius: 999px; background: #fff; font-size: 10px; }
@media (max-width: 900px) { .workshop-layout, .room-columns, .admin-columns-wide { grid-template-columns: 1fr; }.question-builder { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .competition-detail-head, .workshop-card-foot, .live-room-head { align-items: start; flex-direction: column; }.room-stats { grid-template-columns: 1fr 1fr 1fr; }.room-stats strong { font-size: 19px; }.question-builder { grid-template-columns: 1fr; }.join-competition-card { padding: 18px; } }
.room-answer-form select, .room-answer-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; outline-color: var(--teal); color: var(--ink); background: #fff; }
.team-invite-note { padding: 10px 13px; margin-top: 4px; color: var(--ink-soft); border-right: 3px solid var(--teal); border-radius: 7px; background: var(--mint); font-size: 11px; }.team-invite-note b { color: var(--navy); letter-spacing: 1px; }


/* إضافات بصرية موزعة على الصفحة مع الحفاظ على خلفيات الأقسام الأصلية */
.home-layer { position: relative; isolation: isolate; overflow: hidden; }
.home-layer::before, .home-layer::after { position: absolute; z-index: 0; content: ''; pointer-events: none; }
.home-layer > .container { position: relative; z-index: 1; }
.home-layer-stats::before { top: -210px; right: -135px; width: 470px; height: 470px; border: 1px solid rgba(168, 220, 174, .2); border-radius: 50%; box-shadow: 0 0 0 22px rgba(168, 220, 174, .045), 0 0 0 62px rgba(197, 139, 42, .05); }
.home-layer-stats::after { inset: 0; opacity: .22; background: repeating-linear-gradient(154deg, transparent 0 34px, rgba(214, 238, 217, .12) 35px 36px); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.home-layer-features::before { top: -95px; left: -155px; width: 390px; height: 270px; border: 1px solid rgba(47, 111, 78, .13); border-radius: 48% 52% 46% 54%; transform: rotate(-19deg); }
.home-layer-features::after { right: -130px; bottom: -170px; width: 430px; height: 330px; border: 1px solid rgba(197, 139, 42, .14); border-radius: 50%; background: repeating-linear-gradient(132deg, transparent 0 25px, rgba(47, 111, 78, .05) 26px 27px); transform: rotate(12deg); }
.home-layer-projects::before { inset: 0; opacity: .32; background-image: radial-gradient(rgba(47, 111, 78, .16) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(120deg, #000, transparent 58%); }
.home-layer-projects::after { top: 35px; right: -105px; width: 300px; height: 300px; border: 1px solid rgba(197, 139, 42, .16); border-radius: 50%; box-shadow: 0 0 0 25px rgba(197, 139, 42, .04), 0 0 0 55px rgba(47, 111, 78, .04); }
.home-layer-events::before { top: -130px; right: 8%; width: 540px; height: 240px; border: 1px solid rgba(47, 111, 78, .11); border-radius: 50%; transform: rotate(-7deg); }
.home-layer-events::after { inset: 0; opacity: .2; background: repeating-linear-gradient(-27deg, transparent 0 44px, rgba(47, 111, 78, .08) 45px 46px); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.home-layer-news::before { left: -100px; bottom: -190px; width: 460px; height: 460px; border: 1px solid rgba(197, 139, 42, .17); border-radius: 50%; box-shadow: 0 0 0 24px rgba(197, 139, 42, .045), 0 0 0 65px rgba(47, 111, 78, .045); }
.home-layer-news::after { inset: 0; opacity: .13; background: repeating-linear-gradient(148deg, transparent 0 28px, rgba(214, 238, 217, .22) 29px 30px); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
@media (max-width: 700px) { .home-layer-stats::before { right: -230px; }.home-layer-features::after { right: -260px; }.home-layer-projects::after { right: -190px; }.home-layer-events::before { right: -210px; }.home-layer-news::before { left: -270px; } }

/* ملفات الإنجاز، المعرفة، النقاط والتقارير */
.nav-notification-link { display: inline-flex; align-items: center; gap: 5px; }.nav-notification-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; color: #fff; border-radius: 999px; background: var(--teal); font-size: 9px; }
.talent-hero { background: linear-gradient(135deg, #e8f3eb, #f8faf8); }.talent-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.talent-card { display: flex; flex-direction: column; gap: 13px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(23,69,50,.04); }.talent-card-head { display: flex; align-items: center; gap: 11px; }.talent-card-head .avatar-xl { width: 54px; height: 54px; font-size: 20px; }.talent-card-head h2 { margin: 3px 0 0; color: var(--navy); font-size: 17px; }.talent-card-head p { margin: 0; color: var(--ink-soft); font-size: 10px; }.talent-stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; color: var(--ink-soft); border-radius: 9px; background: var(--mint); font-size: 10px; }.talent-stats span { padding-left: 8px; border-left: 1px solid #c9dfcf; }.talent-stats span:last-child { border-left: 0; }.talent-about { flex: 1; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.8; }
.profile-hero { background: linear-gradient(135deg, #e8f3eb, #f7faf7); }.profile-hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; }.profile-identity { display: flex; align-items: center; gap: 18px; }.profile-identity h1 { margin: 2px 0 4px; }.profile-identity p { max-width: 620px; margin: 0; color: var(--ink-soft); }.profile-open-badge { display: inline-flex; padding: 4px 9px; margin-top: 10px; color: var(--success); border-radius: 999px; background: #e4f4e8; font-size: 10px; }.profile-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; align-items: start; }.profile-layout main, .profile-side { display: grid; gap: 20px; }.profile-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.profile-stat { display: grid; gap: 2px; padding: 16px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.profile-stat strong { color: var(--teal); font-size: 26px; line-height: 1.2; }.profile-stat span { color: var(--ink-soft); font-size: 10px; }.profile-stat-highlight { background: var(--navy); border-color: var(--navy); }.profile-stat-highlight strong, .profile-stat-highlight span { color: #fff; }.profile-card { padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 28px rgba(23,69,50,.045); }.profile-card h2 { color: var(--navy); }.profile-about { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 2; }.profile-facts, .profile-links { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 18px; color: var(--ink-soft); font-size: 11px; }.profile-links { gap: 7px; }.profile-project-list { display: grid; gap: 9px; }.profile-project-row { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid #e4ece5; border-radius: 11px; background: #fbfdfb; }.profile-project-row .project-thumb { display: grid; place-items: center; height: 68px; border-radius: 9px; color: #fff; }.profile-project-row h3 { margin: 4px 0; color: var(--navy); font-size: 15px; }.profile-project-row p { margin: 0; color: var(--ink-soft); font-size: 11px; }.profile-project-row small { display: block; margin-top: 5px; color: #81988a; font-size: 10px; }.stage-pill { display: inline-flex; padding: 3px 7px; color: var(--teal); border: 1px solid #c8dfcd; border-radius: 999px; background: #eff8f0; font-size: 9px; white-space: nowrap; }.profile-form { display: grid; gap: 10px; }.profile-form label, .profile-form .check-row { display: grid; gap: 5px; color: var(--ink-soft); font-size: 11px; font-weight: 600; }.profile-form input, .profile-form textarea, .profile-form select { width: 100%; padding: 10px 11px; border: 1px solid #d7e3d9; border-radius: 8px; outline-color: var(--teal); color: var(--ink); background: #fff; font-weight: 400; }.profile-form textarea { resize: vertical; }.check-row { display: flex !important; align-items: center; grid-template-columns: auto 1fr; font-weight: 400 !important; }.check-row input { width: 16px !important; }.badge-list { display: grid; gap: 9px; }.badge-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e1ece2; border-radius: 10px; background: #f9fcf9; }.badge-item > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--gold); border-radius: 9px; background: #fff4d4; font-size: 18px; }.badge-item div { display: grid; gap: 1px; }.badge-item strong { color: var(--navy); font-size: 11px; }.badge-item small { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.project-journey-section { padding-top: 65px; padding-bottom: 65px; }.project-journey-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.journey-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.journey-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.journey-card h3 { margin: 4px 0 0; color: var(--navy); font-size: 17px; }.journey-stage-form, .milestone-form { display: flex; gap: 7px; margin-top: 15px; }.journey-stage-form select, .milestone-form input { min-width: 0; flex: 1; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; outline-color: var(--teal); background: #fff; color: var(--ink); font-size: 11px; }.milestone-list { display: grid; gap: 7px; padding: 12px 0 3px; margin-top: 12px; border-top: 1px solid #edf2ed; }.milestone-row { display: flex; align-items: center; gap: 8px; }.milestone-row > div { display: grid; gap: 1px; }.milestone-row strong { color: var(--navy); font-size: 11px; }.milestone-row small { color: var(--ink-soft); font-size: 9px; }.milestone-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #bdcbc1; }.milestone-completed { background: var(--success); }.milestone-in_progress { background: var(--gold); }.milestone-blocked { background: var(--danger); }.milestone-form { align-items: center; }.milestone-form input[type=date] { flex: 0 0 132px; }.milestone-form .btn { white-space: nowrap; }
.narrow-content { max-width: 900px; }.notification-list { display: grid; gap: 10px; }.notification-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 13px; align-items: start; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.notification-row.is-unread { border-right: 4px solid var(--teal); background: #f5fbf5; }.notification-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--teal); border-radius: 50%; background: var(--mint); font-weight: 700; }.notification-row .card-meta { justify-content: start; }.notification-row .card-meta strong { color: var(--navy); font-size: 13px; }.notification-row p { margin: 5px 0 4px; color: var(--ink-soft); font-size: 11px; }.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }.article-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.article-body { color: var(--ink-soft); font-size: 15px; line-height: 2.1; }.article-meta { display: block; margin-top: 20px; color: #87998d; font-size: 10px; }.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }.tag-chip { padding: 4px 8px; color: var(--teal); border-radius: 999px; background: var(--mint); font-size: 10px; }.knowledge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.knowledge-card { display: flex; flex-direction: column; min-height: 220px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.knowledge-card h2 { margin: 12px 0 6px; color: var(--navy); font-size: 18px; }.knowledge-card p { flex: 1; margin: 0 0 18px; color: var(--ink-soft); font-size: 12px; }.report-hero { background: linear-gradient(135deg, #e8f3eb, #f5f8f4); }.report-year-form { display: flex; align-items: end; gap: 8px; }.report-year-form label { display: grid; gap: 4px; color: var(--ink-soft); font-size: 10px; }.report-year-form select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }.report-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 20px; }.report-metric { display: grid; gap: 3px; padding: 21px; border-radius: 14px; color: #fff; }.report-metric span, .report-metric small { font-size: 10px; opacity: .85; }.report-metric strong { font-size: 33px; line-height: 1.2; }.report-metric-green { background: var(--teal); }.report-metric-gold { color: var(--navy); background: #ead28b; }.report-metric-navy { background: var(--navy); }.report-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: start; }.report-leaderboard { display: grid; }.report-leader { display: grid; grid-template-columns: 25px 26px 1fr auto; gap: 9px; align-items: center; padding: 11px 0; border-bottom: 1px solid #edf2ed; }.report-leader:last-child { border-bottom: 0; }.report-leader > strong { color: var(--teal); font-size: 12px; }.report-leader div { display: grid; gap: 1px; }.report-leader b { color: var(--navy); font-size: 12px; }.report-leader small { color: var(--ink-soft); font-size: 9px; }.report-leader em { color: var(--gold); font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }.report-note p { color: var(--ink-soft); font-size: 12px; line-height: 1.9; }
@media (max-width: 900px) { .profile-layout, .article-layout, .report-layout { grid-template-columns: 1fr; }.profile-stat-grid { grid-template-columns: repeat(3,1fr); }.project-journey-grid, .knowledge-grid, .talent-grid { grid-template-columns: repeat(2,1fr); }.report-metrics { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 650px) { .profile-hero-grid, .profile-identity, .report-year-form { align-items: start; flex-direction: column; }.profile-stat-grid { grid-template-columns: repeat(2,1fr); }.project-journey-grid, .knowledge-grid, .talent-grid { grid-template-columns: 1fr; }.notification-row { grid-template-columns: 30px 1fr; }.notification-row > form { grid-column: 2; }.report-metrics { grid-template-columns: 1fr 1fr; }.journey-stage-form, .milestone-form { flex-wrap: wrap; }.milestone-form input[type=date] { flex: 1; } }

/* مركز التحكم: شريط جانبي أيمن ثابت ومساحة تحرير مريحة */
.admin-body { min-height: 100vh; background: #f5f8f5; }.admin-shell { min-height: 100vh; direction: rtl; }.admin-sidebar { position: fixed; inset: 0 0 0 auto; z-index: 60; display: flex; flex-direction: column; width: 274px; padding: 22px 15px 16px; overflow-y: auto; color: #d9ebdf; background: #123b2b; box-shadow: -8px 0 35px rgba(18,59,43,.1); }.admin-sidebar-brand { display: flex; align-items: start; justify-content: space-between; padding: 0 9px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }.admin-sidebar .brand { color: #fff; }.admin-sidebar .brand small { color: #9ec4ae; }.admin-sidebar .brand-mark { background: #d6f0dd; }.admin-sidebar .brand-mark span { background: var(--teal); }.admin-sidebar-close { display: none; color: #c8dfd0; border: 0; background: transparent; font-size: 24px; }.admin-user-card { display: flex; align-items: center; gap: 10px; padding: 17px 10px 15px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1); }.admin-user-card strong, .admin-user-card small { display: block; }.admin-user-card strong { color: #fff; font-size: 12px; }.admin-user-card small { margin-top: 3px; color: #9ec4ae; font-size: 10px; }.admin-nav { display: grid; gap: 3px; }.admin-nav-label { padding: 15px 12px 5px; color: #76a78b; font-size: 10px; font-weight: 700; }.admin-nav-item { display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 8px 11px; color: #c6ded0; border-radius: 8px; font-size: 11px; transition: background .2s ease, color .2s ease, transform .2s ease; }.admin-nav-item:hover { color: #fff; background: rgba(255,255,255,.1); transform: translateX(-2px); }.admin-nav-item.is-active { color: #fff; background: #2f6f4e; box-shadow: 0 7px 17px rgba(0,0,0,.11); }.admin-nav-icon { display: grid; place-items: center; width: 22px; color: #a4cfb2; font-size: 15px; }.admin-nav-item.is-active .admin-nav-icon { color: #fff; }.nav-arrow { margin-right: auto; color: #9fceb0; }.nav-badge { min-width: 20px; padding: 2px 5px; margin-right: auto; color: #7a5b19; border-radius: 999px; background: #f6d779; font-size: 9px; text-align: center; }.nav-badge-live { color: #fff; background: #51a972; }.admin-sidebar-foot { display: grid; gap: 8px; padding: 16px 10px 0; margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); }.admin-sidebar-foot a { color: #9ec4ae; font-size: 10px; }.admin-main { min-height: 100vh; margin-right: 274px; }.admin-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 34px; border-bottom: 1px solid #e2ebe4; background: rgba(255,255,255,.9); }.admin-breadcrumb { display: flex; align-items: center; gap: 10px; color: #8b9e91; font-size: 11px; }.admin-breadcrumb strong { color: var(--navy); }.admin-breadcrumb b { color: #bdcbc1; }.admin-top-actions { display: flex; align-items: center; gap: 16px; }.admin-site-link { color: var(--teal); font-size: 11px; font-weight: 600; }.admin-top-user { padding-right: 16px; color: var(--ink-soft); border-right: 1px solid var(--line); font-size: 11px; }.admin-menu-button { display: none; padding: 7px 10px; color: var(--navy); border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 11px; }.admin-content { width: min(100% - 68px, 1250px); padding: 34px 0 70px; margin: 0 auto; }.admin-page-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 10px 0 28px; }.admin-page-head h1 { margin: 7px 0 8px; color: var(--navy); font-size: clamp(26px, 3vw, 38px); }.admin-page-head p { max-width: 650px; margin: 0; color: var(--ink-soft); font-size: 13px; }.admin-breadcrumb-inline { display: flex; gap: 9px; color: var(--ink-soft); font-size: 11px; }.admin-breadcrumb-inline a { color: var(--teal); }.cms-notice { display: flex; align-items: center; gap: 13px; padding: 14px 17px; margin-bottom: 20px; border: 1px solid #eadcae; border-right: 4px solid var(--gold); border-radius: 10px; color: #735d22; background: #fffaf0; font-size: 11px; }.cms-notice strong { color: var(--navy); white-space: nowrap; }.cms-notice-green { border-color: #c9dfd0; border-right-color: var(--teal); color: var(--ink-soft); background: #eef7ef; }.cms-page-list { display: grid; gap: 13px; }.cms-page-card { display: flex; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(23,69,50,.035); }.cms-page-card-featured { border-color: #b8d8bf; box-shadow: 0 10px 28px rgba(47,111,78,.09); }.cms-page-card-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; color: #fff; border-radius: 13px; background: var(--teal); font-size: 24px; }.cms-page-card-body { flex: 1; min-width: 0; }.cms-page-card-body h2 { margin: 9px 0 5px; color: var(--navy); font-size: 18px; }.cms-page-card-body p { margin: 0 0 7px; color: var(--ink-soft); font-size: 11px; }.cms-page-card-body small { color: #8b9e91; font-size: 10px; }.cms-page-card-actions { display: flex; gap: 7px; }.cms-roadmap { padding: 25px; margin-top: 22px; border-radius: 15px; color: #fff; background: var(--navy); }.cms-roadmap h2 { margin: 6px 0 20px; font-size: 22px; }.cms-roadmap .eyebrow { color: #94d0a4; }.cms-roadmap-grid, .permission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.cms-roadmap-grid > div, .permission-grid > div { display: grid; gap: 6px; padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06); }.cms-roadmap-grid strong, .permission-grid strong { color: #fff; font-size: 13px; }.cms-roadmap-grid span, .permission-grid span { color: #bdd3c3; font-size: 11px; line-height: 1.7; }.cms-editor-form { display: grid; gap: 17px; }.cms-editor-card { padding: 23px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(23,69,50,.035); }.cms-card-title { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #edf2ed; }.cms-card-title h2 { margin: 5px 0 0; color: var(--navy); font-size: 20px; }.cms-card-title .eyebrow { margin: 0; }.editor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.editor-grid-four { grid-template-columns: repeat(4, 1fr); }.cms-editor-card label, .cms-record-form label, .cms-save-bar label { display: grid; gap: 5px; margin-bottom: 12px; color: var(--ink-soft); font-size: 11px; font-weight: 600; }.cms-editor-card input, .cms-editor-card textarea, .cms-editor-card select, .cms-record-form input, .cms-record-form textarea, .cms-record-form select, .cms-save-bar input { width: 100%; padding: 10px 11px; border: 1px solid #d8e4da; border-radius: 8px; outline-color: var(--teal); color: var(--ink); background: #fff; font: inherit; font-weight: 400; }.cms-editor-card input[type="color"], .cms-record-form input[type="color"] { width: 62px; height: 42px; padding: 4px; cursor: pointer; }.cms-editor-card textarea, .cms-record-form textarea { resize: vertical; line-height: 1.7; }.cms-editor-card label small { color: #8d9d92; font-weight: 400; }.field-help { display: block; color: #8d9d92; font-size: 10px; }.section-drag { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 7px; color: var(--teal); border: 1px solid #cbe0cf; border-radius: 6px; background: #f2f8f2; }.visibility-toggle { display: flex !important; align-items: center; gap: 7px; margin: 0 !important; white-space: nowrap; }.visibility-toggle input, .check-row input { width: 16px !important; height: 16px; padding: 0 !important; }.editor-repeat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.editor-repeat-card { padding: 14px; border: 1px solid #dbe8dd; border-radius: 10px; background: #f8fbf8; }.editor-repeat-card > strong { display: block; margin-bottom: 13px; color: var(--navy); font-size: 12px; }.editor-repeat-card .editor-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.editor-repeat-card label { margin-bottom: 8px; }.cms-save-bar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 17px 20px; border: 1px solid #b9d9c0; border-radius: 13px; background: #edf7ee; }.cms-save-bar label { flex: 1; margin: 0; }.cms-save-bar > div { display: flex; gap: 8px; }.revision-card { margin-top: 22px; }.revision-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #edf2ed; }.revision-row:last-child { border-bottom: 0; }.revision-row > div { display: grid; gap: 3px; }.revision-row strong { color: var(--navy); font-size: 12px; }.revision-row span, .revision-row small { color: var(--ink-soft); font-size: 10px; }.record-tabs { display: flex; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.record-tabs a { padding: 8px 13px; color: var(--ink-soft); border-radius: 7px; font-size: 11px; }.record-tabs a.is-active { color: #fff; background: var(--teal); }.cms-record-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 18px; align-items: start; }.cms-record-form { display: grid; gap: 2px; }.record-form-card { position: sticky; top: 90px; }.record-list-card { min-width: 0; }.record-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #edf2ed; }.record-row:last-child { border-bottom: 0; }.record-row-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; color: var(--teal); border-radius: 9px; background: var(--mint); font-size: 18px; }.record-row-body { flex: 1; min-width: 0; }.record-row-body h3 { margin: 6px 0 3px; color: var(--navy); font-size: 14px; }.record-row-body p { margin: 0; color: var(--ink-soft); font-size: 10px; }.record-row-body small { display: block; margin-top: 4px; color: #8b9e91; font-size: 10px; }.record-row-actions { display: flex; gap: 6px; }.settings-lock { padding: 7px 12px; color: var(--teal); border: 1px solid #b8d8bf; border-radius: 999px; background: #eff8f0; font-size: 10px; }.settings-card { max-width: 820px; }.color-preview { display: block; width: 62px; height: 42px; border-radius: 8px; border: 1px solid #d8e4da; }.settings-permissions { margin-top: 18px; color: #fff; background: var(--navy); }.settings-permissions .cms-card-title { border-color: rgba(255,255,255,.14); }.settings-permissions h2 { color: #fff; }.settings-permissions .eyebrow { color: #94d0a4; }.preview-banner { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 16px; color: #654e18; background: #fff1b8; font-size: 11px; }.preview-banner a { color: var(--navy); font-weight: 700; }
@media (max-width: 1100px) { .admin-sidebar { width: 245px; }.admin-main { margin-right: 245px; }.admin-content { width: min(100% - 42px, 1250px); }.editor-repeat-grid { grid-template-columns: 1fr 1fr; }.cms-record-layout { grid-template-columns: 1fr; }.record-form-card { position: static; }.editor-grid-four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .admin-sidebar { width: min(290px, 86vw); transform: translateX(100%); transition: transform .25s ease; }.admin-sidebar.is-open { transform: translateX(0); }.admin-sidebar-close { display: block; }.admin-main { margin-right: 0; }.admin-topbar { padding: 0 16px; }.admin-menu-button { display: inline-flex; align-items: center; gap: 6px; }.admin-top-user { display: none; }.admin-content { width: min(100% - 28px, 1250px); padding-top: 22px; }.admin-page-head { align-items: start; flex-direction: column; }.cms-page-card { align-items: start; flex-wrap: wrap; }.cms-page-card-body { min-width: calc(100% - 72px); }.cms-page-card-actions { width: 100%; margin-right: 70px; }.cms-notice { align-items: start; flex-direction: column; gap: 5px; }.cms-roadmap-grid, .permission-grid, .editor-repeat-grid { grid-template-columns: 1fr; }.cms-save-bar { align-items: stretch; flex-direction: column; }.cms-save-bar > div { flex-wrap: wrap; }.record-tabs { width: 100%; }.record-tabs a { flex: 1; text-align: center; }.record-row { align-items: start; flex-wrap: wrap; }.record-row-actions { width: 100%; margin-right: 48px; }.editor-grid, .editor-grid-four { grid-template-columns: 1fr; }.cms-card-title { align-items: start; flex-direction: column; }.visibility-toggle { flex-direction: row !important; }.preview-banner { align-items: start; flex-direction: column; gap: 5px; } }