:root{
    --bg:#ffffff;
    --surface:#ffffff;
    --surface-2:#f2f5ff;
    --text:#000000;
    --muted:#3a3a3a;
    --primary:#1C3164;
    --primary-2:#3E53A1;
    --accent:#E84141;
    --border:#1C3164;
    --shadow:0 18px 45px rgba(28, 49, 100, 0.14);
    --radius:22px;
}

:root[data-theme="dark"]{
    --bg:#0f1528;
    --surface:#141c33;
    --surface-2:#1a2440;
    --text:#ffffff;
    --muted:#d2d8ea;
    --primary:#3E53A1;
    --primary-2:#1C3164;
    --accent:#E84141;
    --border:rgba(255,255,255,0.16);
    --shadow:0 18px 45px rgba(0, 0, 0, 0.35);
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 16%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 55%, var(--bg)) 0%, var(--bg) 100%);
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:url('/LiSurvey/linlogo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:min(72vw, 820px);
    opacity:0.12;
    filter:drop-shadow(0 0 1px rgba(28, 49, 100, 0.35)) drop-shadow(0 0 28px rgba(28, 49, 100, 0.12));
    pointer-events:none;
    z-index:0;
}

body > *{
    position:relative;
    z-index:1;
}

a{color:inherit;text-decoration:none}
.button{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 18px;border-radius:14px;border:1px solid transparent;
    font-weight:700;cursor:pointer;
}
.button.primary{background:var(--primary);color:#fff}
.button.secondary{background:rgba(255,255,255,0.7);border-color:var(--border)}
.theme-toggle{
    min-width:124px;
}

.topbar{
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 28px;gap:16px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{
    width:46px;
    height:46px;
    border-radius:0;
    object-fit:contain;
    display:block;
    background:transparent;
}
.brand-subtitle{color:var(--muted);font-size:.92rem}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap}

.admin-action-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    justify-content:center;
    max-width:1100px;
    margin:0 auto;
    justify-items:center;
}

.admin-action-card{
    display:block;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:transform 0.15s ease, box-shadow 0.15s ease;
    width:100%;
    max-width:340px;
}

.admin-action-card:hover{
    transform:translateY(-2px);
}

.admin-action-card h2{
    margin:0 0 10px;
}

.admin-action-card p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.survey-shell{padding:24px 28px 40px}
.survey-layout{
    position:relative;
}
.hero-card,.survey-card{
    max-width:1400px;margin:0 auto;background:rgba(255,250,243,0.88);
    border:1px solid rgba(221,204,184,0.8);border-radius:28px;box-shadow:var(--shadow);
    padding:32px;
}
.survey-layout{
    width:min(70vw, 1400px);
    margin:0 auto;
}
.hero-card{
    display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start;
}
.hero-copy h1,.survey-card h1{margin:0 0 12px;font-size:clamp(2rem,4vw,3.8rem);line-height:1.02}
.eyebrow{
    margin:0 0 12px;text-transform:uppercase;letter-spacing:.18em;
    color:var(--accent);font-size:.78rem;font-weight:800;
}

.eyebrow.normal-case{
    text-transform:none;
    letter-spacing:0;
}
.lead{color:var(--muted);font-size:1.08rem;line-height:1.65;max-width:62ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.survey-code-badge{
    display:inline-block;margin-top:16px;padding:10px 14px;border-radius:999px;
    background:var(--surface-2);font-weight:700;color:var(--text)
}

.survey-response-form{
    display:grid;
    gap:18px;
    margin-top:24px;
}

.survey-question-card{
    padding:20px;
    border-radius:22px;
    border:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow);
}

.survey-brand-main{
    width:50%;
    max-width:50vw;
    margin:0 auto 18px;
    pointer-events:none;
    opacity:1;
    transition:opacity 0.12s linear;
}

.survey-brand-main-image{
    width:100%;
    height:auto;
    display:block;
}

.survey-brand-corner{
    position:fixed;
    top:18px;
    right:18px;
    width:10vw;
    max-width:10vw;
    pointer-events:none;
    z-index:0;
    opacity:0;
    transition:opacity 0.12s linear;
}

.survey-brand-corner-image{
    width:100%;
    height:auto;
    display:block;
}

.survey-question-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:16px;
}

.survey-question-head h2{
    margin:0;
    font-size:1.2rem;
}

.survey-question-required{
    padding:6px 10px;
    border-radius:999px;
    background:var(--text);
    color:var(--surface);
    font-size:.82rem;
    font-weight:700;
    white-space:nowrap;
}

.survey-question-explanation{
    margin:0 0 14px;
    color:var(--muted);
    line-height:1.65;
    background:color-mix(in srgb, var(--surface-2) 68%, transparent);
    border-left:4px solid var(--primary);
    padding:12px 14px;
    border-radius:12px;
}

.survey-response-form input[type="text"],
.survey-response-form textarea,
.survey-response-form select{
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font:inherit;
}

.survey-options{
    display:grid;
    gap:10px;
}

.survey-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface-2);
}

.survey-option input{
    margin:0;
}

.survey-privacy-consent{
    align-items:flex-start;
}

.survey-privacy-consent input{
    margin-top:4px;
}

.survey-form-actions{
    display:flex;
    justify-content:flex-end;
}

.notice-card{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:40vh;
    gap:10px;
}

.notice-card > *{
    max-width:62ch;
}

.notice-card .eyebrow{
    font-size:1.05rem;
}

.notice-card h1{
    line-height:1.05;
}
.footer{padding:22px 28px;color:var(--muted)}
.footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.footer-links{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.footer-links a{
    color:var(--primary);
    text-decoration:underline;
    text-underline-offset:3px;
}

.admin-shell{
    padding:24px 28px 40px;
    display:grid;
    gap:22px;
}

.admin-auth-card{
    max-width:560px;
    margin:0 auto;
    background:rgba(255,250,243,0.88);
    border:1px solid rgba(221,204,184,0.8);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:32px;
}

.auth-form,
.admin-grid-form{
    display:grid;
    gap:12px;
}

.question-edit-grid{
    grid-template-columns: 1fr;
}

.question-edit-grid > label,
.question-edit-grid > input,
.question-edit-grid > select,
.question-edit-grid > textarea,
.question-edit-grid > button,
.question-edit-grid > div{
    grid-column: 1;
}

.question-edit-grid > div{
    display:none;
}

.auth-form input,
.admin-grid-form input,
.admin-grid-form select,
.admin-grid-form textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
}

.admin-grid-form textarea{
    resize:vertical;
}

.data-table{
    width:100%;
    min-width:100%;
    border-collapse:collapse;
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.data-table th,
.data-table td{
    padding:12px 10px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
    white-space:nowrap;
}

.table-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}

.table-form{
    margin:0;
}

.button.small{
    padding:8px 12px;
    border-radius:12px;
    font-size:.9rem;
}

.status-toggle{
    min-width:118px;
}

.status-toggle.is-active{
    background:var(--primary);
    color:#fff;
    border:1px solid var(--primary);
}

.status-toggle.is-inactive{
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
}

.message{
    max-width:1100px;
    margin:0 auto;
    padding:14px 16px;
    border-radius:16px;
}

.message.success{
    background:color-mix(in srgb, var(--accent) 14%, var(--surface));
    color:var(--text);
    border:1px solid var(--accent);
}

.message.error{
    background:color-mix(in srgb, var(--accent) 18%, var(--surface));
    color:var(--text);
    border:1px solid var(--accent);
}

.overlay-dialog{
    width:90vw;
    max-width:90vw;
    border:none;
    border-radius:28px;
    padding:20px;
    background:var(--surface);
    color:var(--text);
    box-shadow:var(--shadow);
}

.overlay-dialog::backdrop{
    background:rgba(0,0,0,0.6);
}

.overlay-dialog-header{
    display:flex;
    justify-content:flex-end;
    margin-bottom:12px;
}

.overlay-frame{
    width:100%;
    min-height:78vh;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
}

.response-overlay-dialog{
    width:80vw;
    max-width:80vw;
}

.response-overlay-content{
    display:grid;
    gap:16px;
    max-height:70vh;
    overflow:auto;
    padding:6px 2px 18px;
}

.response-overlay-meta,
.response-overlay-item{
    padding:16px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface-2);
}

.response-overlay-item h3{
    margin:0 0 10px;
    font-size:1.05rem;
}

.response-overlay-item p{
    margin:0;
    line-height:1.6;
}

.response-overlay-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap;
}

.overlay-content{
    padding:0;
}

.overlay-content .survey-card{
    max-width:100%;
}

.question-list-item{
    padding:18px;
    border-radius:20px;
    border:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow);
    margin-top:16px;
}

.question-list-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}

.question-list-head h3{
    margin:0;
    font-size:1.2rem;
}

.question-list-meta{
    margin:0 0 8px;
    color:var(--muted);
    font-size:.9rem;
}

.question-list-explanation{
    margin:14px 0 0;
    color:var(--muted);
    line-height:1.6;
}

.question-list-options{
    margin:12px 0 0;
    padding-left:20px;
    color:var(--text);
}

.admin-shell .data-table{
    min-width:1400px;
}

.survey-list-card{
    width:min(1500px, 100%);
    max-width:1500px;
}

.survey-dashboard-card{
    width:min(1400px, 100%);
    max-width:1400px;
    margin:0 auto;
    background:rgba(255,250,243,0.88);
    border:1px solid rgba(221,204,184,0.8);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:32px;
}

.survey-dashboard-table{
    width:100%;
    min-width:0;
}

.survey-dashboard-table th,
.survey-dashboard-table td{
    white-space:normal;
}

.survey-list-table{
    width:100%;
    min-width:1400px;
}

.topbar .button.secondary{
    background:var(--surface);
}

.survey-start-form{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:end;
}

.survey-start-form > div{
    min-width:240px;
    flex:1;
}

label{
    display:block;
    margin-bottom:6px;
    font-weight:700;
}

input,
textarea,
select,
button{
    max-width:100%;
}

.hero-card,
.survey-card,
.admin-auth-card{
    color:var(--text);
}

.data-table th{
    color:var(--primary);
}

:root[data-theme="dark"] .button.secondary{
    background:var(--surface);
    color:var(--text);
}

:root[data-theme="dark"] .message.success,
:root[data-theme="dark"] .message.error{
    color:#fff;
}

@media (max-width: 860px){
    .hero-card{grid-template-columns:1fr}
    .topbar{flex-direction:column;align-items:flex-start}
    .admin-action-grid{grid-template-columns:1fr}
    .survey-question-head{flex-direction:column}
    .survey-form-actions{justify-content:stretch}
    .survey-form-actions .button{width:100%}
}

@media (max-width: 640px){
    .topbar{
        padding:14px 16px;
    }

    .brand{
        width:100%;
    }

    .topbar-actions{
        width:100%;
    }

    .topbar-actions .button{
        flex:1 1 0;
    }

    .survey-shell,
    .admin-shell{
        padding:18px 16px 32px;
    }

    .hero-card,
    .survey-card,
    .admin-auth-card{
        padding:20px;
        border-radius:22px;
    }

    .survey-start-form{
        flex-direction:column;
        align-items:stretch;
    }

    .survey-start-form > div{
        min-width:0;
    }

    .survey-question-head{
        gap:10px;
    }

    .question-list-head{
        flex-direction:column;
    }

    .question-edit-grid{
        grid-template-columns:1fr;
    }

    .question-edit-grid > button{
        grid-column:auto;
    }

    .survey-form-actions .button{
        width:100%;
    }

    .button{
        width:auto;
    }

    .survey-layout .survey-card{
        max-width:100%;
    }

    .survey-brand-main{
        width:50vw;
        max-width:50vw;
        top:12px;
    }

    .survey-brand-corner{
        width:14vw;
        max-width:14vw;
        top:12px;
        right:12px;
    }
}