:root{--survey-primary:#3157a4;--survey-secondary:#20a6a1;--survey-accent:#f3a33c;--survey-border:#dce5f3;--survey-bg:#f6f8fc;--survey-text:#14233d}
.survey-page{min-height:100vh;background:linear-gradient(180deg,#eef4fb 0,#f8fafc 220px,#f6f8fc 100%);padding:34px 12px 60px;color:var(--survey-text)}
.survey-shell{max-width:980px;margin:0 auto}
.survey-hero{background:#fff;border:1px solid var(--survey-border);border-radius:24px;padding:26px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;align-items:center;box-shadow:0 14px 35px rgba(49,87,164,.08);margin-bottom:22px}
.survey-logo{width:72px;height:72px;border-radius:20px;background:#edf3ff;display:grid;place-items:center}.survey-logo img{max-width:52px;max-height:52px}
.survey-hero h1{font-size:28px;margin:0 0 6px;font-weight:900}.survey-hero p{margin:0;color:#72809a;line-height:1.8}
.survey-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.survey-meta span{padding:6px 12px;border:1px solid #dbe5f4;border-radius:999px;background:#f8faff;font-size:12px;font-weight:800;color:#3157a4}
.survey-progress-wrap{position:sticky;top:10px;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:1px solid var(--survey-border);border-radius:16px;padding:12px 16px;margin-bottom:18px;box-shadow:0 8px 24px rgba(49,87,164,.06)}
.survey-progress-label{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:800;margin-bottom:8px}.survey-progress{height:8px;border-radius:999px;background:#e8edf6;overflow:hidden}.survey-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--survey-primary),var(--survey-secondary));width:0;transition:width .2s ease}
.survey-question{background:#fff;border:1px solid var(--survey-border);border-radius:22px;padding:22px;margin-bottom:16px;box-shadow:0 8px 24px rgba(30,62,110,.045)}
.survey-question-head{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;margin-bottom:18px}.survey-number{width:42px;height:42px;border-radius:14px;background:#eaf0ff;color:var(--survey-primary);display:grid;place-items:center;font-size:17px;font-weight:900}.survey-question h2{font-size:18px;line-height:1.8;margin:2px 0 0;font-weight:850}
.survey-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.survey-option-card{position:relative;display:block;min-height:88px}.survey-option-card input{position:absolute;opacity:0;pointer-events:none}.survey-option-content{height:100%;border:2px solid #e3eaf5;border-radius:16px;padding:15px 16px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;align-items:center;background:#fbfcff;cursor:pointer;transition:.16s ease;line-height:1.65;font-weight:700}.survey-option-mark{width:26px;height:26px;border:2px solid #b8c6dc;border-radius:50%;display:grid;place-items:center}.survey-option-mark::after{content:"";width:12px;height:12px;border-radius:50%;background:#fff;transform:scale(0);transition:.15s ease}.survey-option-card:hover .survey-option-content{border-color:#9eb4df;background:#f5f8ff;transform:translateY(-1px)}.survey-option-card input:checked+.survey-option-content{border-color:var(--survey-primary);background:#eef3ff;color:#1f4184;box-shadow:0 0 0 3px rgba(49,87,164,.08)}.survey-option-card input:checked+.survey-option-content .survey-option-mark{border-color:var(--survey-primary);background:var(--survey-primary)}.survey-option-card input:checked+.survey-option-content .survey-option-mark::after{transform:scale(1)}.survey-option-card input:focus-visible+.survey-option-content{outline:3px solid rgba(32,166,161,.25);outline-offset:2px}
.survey-scale{grid-template-columns:repeat(5,minmax(0,1fr))}.survey-scale .survey-option-content{display:flex;flex-direction:column;justify-content:center;text-align:center;padding:12px 8px;min-height:82px}.survey-scale .survey-option-mark{width:24px;height:24px}
.survey-domain{display:inline-flex;padding:5px 10px;border-radius:999px;background:#eaf8f7;color:#087b77;font-size:11px;font-weight:900;margin-bottom:9px}
.survey-comment{background:#fff;border:1px solid var(--survey-border);border-radius:20px;padding:20px;margin:18px 0}.survey-comment textarea{min-height:120px}
.survey-submit{border:0;border-radius:16px;min-height:58px;background:linear-gradient(135deg,var(--survey-primary),#23478d);font-weight:900;font-size:18px;box-shadow:0 12px 24px rgba(49,87,164,.22)}
.survey-privacy{display:flex;gap:10px;align-items:flex-start;margin:16px 0;padding:14px 16px;border-radius:14px;background:#eef9f8;color:#176b68;font-size:13px;line-height:1.8}
.survey-access-card{max-width:560px;margin:70px auto;background:#fff;border:1px solid var(--survey-border);border-radius:24px;padding:30px;box-shadow:0 18px 40px rgba(49,87,164,.09)}
@media(max-width:700px){.survey-page{padding-top:16px}.survey-hero{grid-template-columns:1fr;text-align:center;padding:20px}.survey-logo{margin:auto}.survey-hero h1{font-size:23px}.survey-options,.survey-scale{grid-template-columns:1fr}.survey-scale .survey-option-content{flex-direction:row;justify-content:flex-start;text-align:right;min-height:60px}.survey-question{padding:16px}.survey-question-head{grid-template-columns:38px minmax(0,1fr)}.survey-number{width:36px;height:36px}.survey-question h2{font-size:16px}}

/* v0.9.5.0: clearer question and answer framing */
.survey-question-text small{display:block;color:#8a97ac;font-size:12px;font-weight:800;margin-bottom:3px}
.survey-answer-frame{border:1px solid #dce5f3;border-radius:18px;background:#f8faff;padding:16px}
.survey-answer-title{font-size:12px;font-weight:900;color:#52647f;margin-bottom:11px}
.survey-four-options{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.survey-four-options .survey-option-card{min-height:84px}
.survey-four-options .survey-option-content{min-height:84px}
@media(max-width:700px){.survey-answer-frame{padding:12px}.survey-four-options{grid-template-columns:1fr}.survey-four-options .survey-option-card,.survey-four-options .survey-option-content{min-height:66px}}

/* =========================================================
   مركز الاستبانات الموحد
   ========================================================= */
.survey-hub-head,
.survey-hub-toolbar,
.survey-config-heading,
.survey-config-actions,
.survey-hub-report-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.survey-hub-head {
    padding: 1.5rem 1.75rem;
    margin-bottom: 1rem;
    border-radius: 1.35rem;
    background: linear-gradient(135deg, #234c98, #237e9b);
    color: #fff;
    box-shadow: 0 18px 40px rgba(34, 73, 145, .16);
}

.survey-hub-head h2,
.survey-create-intro h2,
.survey-config-type h2 { margin: .25rem 0 .35rem; font-weight: 800; }
.survey-hub-head p { margin: 0; color: rgba(255,255,255,.82); }
.survey-hub-kicker { color: #18a49c; font-size: .82rem; font-weight: 800; }
.survey-hub-head .survey-hub-kicker { color: #b9fff5; }
.survey-hub-create { background: #fff; color: #244d97; border-color: #fff; font-weight: 800; }
.survey-hub-create:hover { background: #edf5ff; color: #173b7c; border-color: #edf5ff; }

.survey-hub-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.survey-hub-metric {
    background: #fff;
    border: 1px solid #dde6f3;
    border-radius: 1.2rem;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 10px 30px rgba(28, 58, 105, .06);
}
.survey-hub-metric span,
.survey-hub-metric small { display: block; color: #75839c; }
.survey-hub-metric strong { display: block; margin: .35rem 0; color: #16386f; font-size: 1.8rem; }

.survey-hub-toolbar {
    padding: .75rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #e0e8f3;
    border-radius: 1rem;
}
.survey-hub-tabs,
.survey-hub-type-filter { display: flex; gap: .35rem; flex-wrap: wrap; }
.survey-hub-tabs a,
.survey-hub-type-filter a {
    padding: .55rem .9rem;
    border-radius: .75rem;
    color: #52627d;
    text-decoration: none;
    font-weight: 700;
}
.survey-hub-tabs a.active,
.survey-hub-type-filter a.active { color: #fff; background: #315fb1; }

.survey-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.survey-campaign-card {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #dce5f1;
    border-radius: 1.25rem;
    box-shadow: 0 12px 32px rgba(25, 55, 102, .06);
}
.survey-campaign-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: #e0a231;
}
.survey-campaign-card.is-active::before { background: #1c9d68; }
.survey-campaign-card.is-closed::before { background: #8090a7; }
.survey-campaign-card.is-cancelled::before { background: #d94d59; }
.survey-campaign-top { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .8rem; }
.survey-type-icon,
.survey-type-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: #edf3ff;
    color: #315fb1;
    font-size: 1.35rem;
    flex: 0 0 auto;
}
.survey-type-label { color: #168d86; font-size: .78rem; font-weight: 800; }
.survey-campaign-title h3 { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 800; color: #183866; }
.survey-state-badge { padding: .35rem .65rem; border-radius: 999px; background: #fff4da; color: #956300; font-size: .75rem; font-weight: 800; }
.is-active .survey-state-badge { background: #e5f7ef; color: #11734b; }
.is-closed .survey-state-badge { background: #edf0f4; color: #607087; }
.is-cancelled .survey-state-badge { background: #fdebed; color: #a22d39; }
.survey-context-line { display: flex; gap: .45rem; flex-wrap: wrap; margin: 1rem 0; }
.survey-context-line span { background: #f3f6fa; border-radius: .6rem; padding: .35rem .55rem; color: #5e6d84; font-size: .8rem; }
.survey-participation { padding: .9rem; background: #f9fbfe; border: 1px solid #e4ebf4; border-radius: .9rem; }
.survey-participation-head,
.survey-participation-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.survey-participation-head { color: #52627b; }
.survey-participation-head strong { color: #16386f; }
.survey-participation-bar { height: .55rem; margin: .65rem 0; background: #e5ebf3; border-radius: 999px; overflow: hidden; }
.survey-participation-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #315fb1, #1aa29a); }
.survey-participation-foot { color: #7c899e; font-size: .75rem; }
.survey-campaign-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .9rem 0; }
.survey-campaign-dates span { padding: .65rem .75rem; border: 1px solid #e4ebf4; border-radius: .8rem; color: #334b70; }
.survey-campaign-dates small { display: block; color: #8a96aa; margin-bottom: .15rem; }
.survey-campaign-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.survey-hub-empty { padding: 4rem 1rem; text-align: center; background: #fff; border: 1px dashed #cdd9e9; border-radius: 1.3rem; }
.survey-hub-empty-icon { font-size: 2.8rem; color: #7990b3; }
.survey-hub-empty h3 { margin-top: 1rem; color: #173765; }
.survey-hub-empty p { color: #76859b; }
.survey-hub-report-shortcut { margin-top: 1rem; padding: 1rem 1.2rem; background: #f1f8f7; border: 1px solid #cfe8e5; border-radius: 1rem; }
.survey-hub-report-shortcut strong,
.survey-hub-report-shortcut span { display: block; }
.survey-hub-report-shortcut span { color: #6f7e91; font-size: .85rem; margin-top: .2rem; }

.survey-create-intro { padding: 1.25rem 0 1rem; }
.survey-create-intro p,
.survey-config-type p { color: #74829a; margin: 0; }
.survey-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.survey-type-choice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 2px solid #e0e8f3;
    border-radius: 1.25rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.survey-type-choice:hover { transform: translateY(-3px); border-color: #7598d5; box-shadow: 0 16px 35px rgba(34, 70, 127, .1); }
.survey-type-choice h3 { margin: 0 0 .35rem; color: #183866; font-size: 1.15rem; font-weight: 800; }
.survey-type-choice p { margin: 0 0 .45rem; color: #687890; }
.survey-type-choice small { color: #168d86; font-weight: 700; }
.survey-type-arrow { color: #315fb1; font-size: 1.45rem; }
.survey-future-note { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 1rem; background: #f6f8fb; color: #65758d; }
.survey-future-note strong { color: #315fb1; }

.survey-config-heading { margin-bottom: 1rem; }
.survey-back-link { color: #315fb1; text-decoration: none; font-weight: 800; }
.survey-config-type { display: flex; align-items: center; gap: .9rem; flex: 1; }
.survey-config-type small { color: #168d86; font-weight: 800; }
.survey-config-type h2 { font-size: 1.15rem; }
.survey-config-form { display: grid; gap: 1rem; }
.survey-config-section { background: #fff; border: 1px solid #dde6f2; border-radius: 1.2rem; padding: 1.25rem; }
.survey-config-section-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.survey-config-section-head > span { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .75rem; background: #315fb1; color: #fff; font-weight: 800; }
.survey-config-section-head h3 { margin: 0; color: #183866; font-size: 1.05rem; font-weight: 800; }
.survey-config-section-head p { margin: .15rem 0 0; color: #7b889c; font-size: .85rem; }
.survey-class-picker { margin-top: 1rem; border: 1px solid #dce5f1; border-radius: 1rem; overflow: hidden; }
.survey-class-picker-empty { padding: 1.5rem; color: #7d8ba0; text-align: center; background: #f8fafc; }
.survey-class-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem; background: #f4f7fb; border-bottom: 1px solid #e0e7f1; }
.survey-class-picker-head strong,
.survey-class-picker-head small { display: block; }
.survey-class-picker-head small { color: #7e8a9d; margin-top: .15rem; }
.survey-class-picker-head label { display: flex; align-items: center; gap: .45rem; color: #315fb1; font-weight: 800; }
.survey-class-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 1rem; }
.survey-class-option { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .65rem; padding: .85rem; border: 1px solid #dce5f1; border-radius: .85rem; cursor: pointer; }
.survey-class-option input { position: absolute; opacity: 0; pointer-events: none; }
.survey-class-check { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border: 2px solid #b9c6d8; border-radius: .5rem; color: transparent; }
.survey-class-option:has(input:checked) { border-color: #5d84c7; background: #f1f6ff; }
.survey-class-option input:checked + .survey-class-check { color: #fff; background: #315fb1; border-color: #315fb1; }
.survey-class-option strong,
.survey-class-option small { display: block; }
.survey-class-option small { color: #7a879a; margin-top: .15rem; }
.survey-privacy-choice { display: grid; grid-template-columns: auto auto 1fr; gap: .8rem; align-items: center; padding: 1rem; border: 1px solid #dfe7f1; border-radius: 1rem; cursor: pointer; }
.survey-privacy-choice input { width: 1.15rem; height: 1.15rem; }
.survey-privacy-choice-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: #edf3ff; color: #315fb1; }
.survey-privacy-choice strong,
.survey-privacy-choice small { display: block; }
.survey-privacy-choice small { color: #758399; margin-top: .15rem; }
.survey-config-actions { padding: .5rem 0; }

@media (max-width: 991.98px) {
    .survey-hub-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .survey-hub-grid,
    .survey-type-grid { grid-template-columns: 1fr; }
    .survey-class-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .survey-hub-metrics { grid-template-columns: 1fr 1fr; }
    .survey-hub-head { padding: 1.15rem; }
    .survey-hub-toolbar { align-items: stretch; }
    .survey-hub-tabs,
    .survey-hub-type-filter { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
    .survey-hub-tabs a,
    .survey-hub-type-filter a { white-space: nowrap; }
    .survey-class-list { grid-template-columns: 1fr; }
    .survey-campaign-actions { grid-template-columns: 1fr; }
    .survey-config-heading { align-items: flex-start; }
}
