*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;background:#f6f7fb;color:#172033}a{color:inherit;text-decoration:none}:root{--primary:#4f46e5;--sidebar:260px;--radius:18px;--shadow:0 12px 40px rgba(31,41,55,.08)}body{overflow-x:hidden}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:20px 14px;background:linear-gradient(180deg,#111827,#192235);color:#fff;z-index:40}.brand{display:flex;align-items:center;gap:12px;padding:6px 10px 22px;font-size:20px;font-weight:800}.brand img{width:42px;height:42px;object-fit:contain}.brand-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--primary);box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 35%,transparent)}.sidebar nav{display:flex;flex-direction:column;gap:6px}.sidebar nav a{display:flex;gap:12px;align-items:center;padding:12px 13px;border-radius:12px;color:#cbd5e1;transition:.2s}.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}.sidebar nav i{width:22px;text-align:center}.nav-label{font-size:11px;letter-spacing:.13em;color:#64748b;padding:20px 13px 5px}.app-shell{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}.topbar{height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid #e8ebf2;position:sticky;top:0;z-index:30}.page-kicker{font-size:10px;color:var(--primary);font-weight:800;letter-spacing:.18em;margin-bottom:3px}.top-user{display:flex;align-items:center;gap:10px}.top-user small{display:block;color:#6b7280;font-size:11px;margin-top:2px}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,white);color:var(--primary);font-weight:800}.icon-btn{border:0;background:#fff;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.05)}.sidebar-toggle{display:none}.content{padding:28px;max-width:1500px;width:100%;margin:0 auto;flex:1}.footer{text-align:center;color:#8a93a3;font-size:12px;padding:0 20px 28px}.footer a,.public-footer a{color:var(--primary);font-weight:700}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card,.card{background:#fff;border:1px solid #edf0f5;border-radius:var(--radius);box-shadow:var(--shadow)}.stat-card{padding:22px;position:relative;overflow:hidden;transition:.2s}.stat-card:hover{transform:translateY(-3px)}.stat-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 11%,white);color:var(--primary);font-size:18px;margin-bottom:16px}.stat-card strong{font-size:28px}.stat-card p{margin:6px 0 0;color:#778092;font-size:13px}.card{padding:22px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.card-head h2,.card-head h3{margin:0;font-size:17px}.muted{color:#788295}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 15px;font:600 13px Inter;cursor:pointer;transition:.18s;background:#edf0f6;color:#293349}.btn:hover{transform:translateY(-1px);filter:brightness(.98)}.btn-primary{background:var(--primary);color:#fff}.btn-danger{background:#fee2e2;color:#b91c1c}.btn-success{background:#dcfce7;color:#166534}.btn-outline{background:#fff;border:1px solid #dce2ec}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.toolbar-actions{display:flex;flex-wrap:wrap;gap:8px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:700;color:#4b5563}.input,.select,.textarea{width:100%;border:1px solid #dce2ea;background:#fff;border-radius:12px;padding:11px 12px;font:14px Inter;color:#1f2937;outline:none;transition:.16s}.textarea{min-height:110px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}.help{font-size:11px;color:#8a94a5}.table-wrap{overflow:auto;border:1px solid #edf0f5;border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}.table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#7c8798;background:#f9fafc;text-align:left;padding:12px;border-bottom:1px solid #e9edf3}.table td{padding:13px 12px;border-bottom:1px solid #eef1f5;font-size:13px;vertical-align:middle}.table tr:last-child td{border-bottom:0}.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#eef2ff;color:#4338ca}.badge.active{background:#dcfce7;color:#166534}.badge.draft{background:#f3f4f6;color:#4b5563}.badge.closed{background:#fee2e2;color:#991b1b}.alert{display:flex;align-items:center;gap:9px;margin-bottom:16px;padding:13px 15px;border-radius:12px;font-size:13px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.alert.success{background:#ecfdf5;color:#166534;border-color:#bbf7d0}.empty{text-align:center;padding:42px 20px;color:#788295}.empty i{font-size:36px;color:#cbd5e1;margin-bottom:12px}.survey-card{padding:20px}.survey-meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}.survey-title{font-size:17px;font-weight:800}.survey-desc{color:#697386;font-size:13px;line-height:1.6;min-height:42px}.actions{display:flex;flex-wrap:wrap;gap:7px}.question-card{padding:18px;border:1px solid #e7ebf1;border-radius:15px;background:#fff;margin-bottom:12px}.question-card .q-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.question-card h4{margin:0 0 5px}.option-row{display:flex;gap:8px;margin-top:8px}.builder-add{border:2px dashed #d9dfeb;border-radius:16px;padding:18px;text-align:center;background:#fafbfc}.public-shell{min-height:100vh;background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--primary) 13%,white),transparent 32%),#f5f7fb}.public-content{max-width:860px;margin:0 auto;padding:34px 18px 100px}.public-brand{text-align:center;margin-bottom:22px}.public-brand .logo{width:64px;height:64px;border-radius:20px;background:var(--primary);color:#fff;display:grid;place-items:center;margin:0 auto 12px;font-size:27px;box-shadow:0 14px 30px color-mix(in srgb,var(--primary) 25%,transparent)}.survey-hero{padding:28px;border-top:5px solid var(--primary)}.survey-hero h1{margin:0 0 10px;font-size:26px}.survey-section{margin-top:18px}.survey-section>h3{margin:0 0 14px}.respond-q{padding:18px 0;border-bottom:1px solid #edf0f5}.respond-q:last-child{border-bottom:0}.respond-q label.q-label{display:block;font-weight:700;margin-bottom:10px}.required{color:#dc2626}.choice{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px}.choice:hover{background:#f8fafc}.scale{display:flex;flex-wrap:wrap;gap:8px}.scale label{flex:1;min-width:72px;text-align:center;border:1px solid #e2e8f0;border-radius:12px;padding:10px;cursor:pointer}.scale input{display:block;margin:0 auto 6px}.public-footer{text-align:center;padding:20px;color:#8992a1;font-size:12px}.mobile-nav{display:none}.login-wrap{max-width:1040px;margin:6vh auto;display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(31,41,55,.13)}.login-art{background:linear-gradient(140deg,#111827,color-mix(in srgb,var(--primary) 58%,#111827));color:#fff;padding:54px;display:flex;flex-direction:column;justify-content:space-between;min-height:600px}.login-art .big-icon{width:72px;height:72px;border-radius:22px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:30px}.login-art h1{font-size:42px;line-height:1.05;margin:20px 0 16px}.login-art p{color:#d7deea;line-height:1.7}.login-panel{padding:54px;display:flex;align-items:center}.login-panel>div{width:100%}.chart-box{position:relative;min-height:280px}.color-grid{display:flex;flex-wrap:wrap;gap:9px}.color-choice input{display:none}.color-dot{width:38px;height:38px;border-radius:12px;display:block;border:3px solid #fff;box-shadow:0 0 0 1px #dfe3ea;cursor:pointer}.color-choice input:checked+.color-dot{box-shadow:0 0 0 3px #111827}.pagination{display:flex;gap:6px;justify-content:flex-end;margin-top:15px}.pagination a,.pagination span{padding:7px 10px;border:1px solid #e0e5ed;border-radius:9px;font-size:12px;background:#fff}.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){:root{--sidebar:250px}.sidebar{transform:translateX(-100%);transition:.22s}.sidebar.open{transform:translateX(0)}.app-shell{margin-left:0}.sidebar-toggle{display:grid}.topbar{padding:0 16px;height:68px}.top-user>div{display:none}.content{padding:18px 14px 96px}.grid-4,.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:8px;right:8px;bottom:8px;height:68px;background:rgba(17,24,39,.96);border-radius:20px;z-index:50;box-shadow:0 16px 40px rgba(0,0,0,.3);padding:7px}.mobile-nav a{color:#aeb8c8;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;gap:4px}.mobile-nav i{font-size:18px}.mobile-nav .mobile-create{width:56px;height:56px;border-radius:18px;background:var(--primary);color:#fff;justify-self:center;margin-top:-18px;box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 40%,transparent)}.footer{padding-bottom:86px}.login-wrap{margin:0;min-height:100vh;grid-template-columns:1fr;border-radius:0}.login-art{display:none}.login-panel{padding:32px 22px}.survey-hero{padding:22px}.survey-hero h1{font-size:22px}}@media(max-width:520px){.grid-4{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px}.stat-card strong{font-size:22px}.stat-icon{width:38px;height:38px;margin-bottom:11px}.card{padding:16px}.topbar strong{font-size:14px}.toolbar{align-items:stretch}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1}.scale label{min-width:60px}.public-content{padding:18px 12px 80px}}
/* ============================================================
E-ANGKET FORM BUILDER v1.1
Google-Forms-inspired interaction, without copying branding.
============================================================ */
.builder-page{max-width:1120px;margin:0 auto}.builder-sticky-toolbar{position:sticky;top:88px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-4px 0 18px;padding:14px 16px;border:1px solid rgba(226,232,240,.9);border-radius:16px;background:rgba(246,247,251,.92);backdrop-filter:blur(14px)}.builder-sticky-toolbar h2{margin:2px 0 3px;font-size:21px;line-height:1.25}.gf-section{position:relative;margin:18px 0 24px;background:#fff;border:1px solid #e9edf4;border-radius:18px;box-shadow:0 12px 38px rgba(31,41,55,.07);overflow:visible}.gf-section-accent{height:7px;border-radius:18px 18px 0 0;background:var(--primary)}.gf-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 16px;border-bottom:1px solid #edf1f6}.gf-section-edit{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:7px;flex:1}.gf-section-title{grid-column:1/2;width:100%;border:0;border-bottom:1px solid transparent;padding:3px 2px 6px;font:800 18px Inter;color:#172033;outline:none;background:transparent}.gf-section-title:focus{border-bottom-color:var(--primary)}.gf-section-description{grid-column:1/2;width:100%;border:0;border-bottom:1px solid transparent;padding:2px;font:13px/1.55 Inter;color:#697386;outline:none;resize:none;background:transparent;overflow:hidden}.gf-section-description:focus{border-bottom-color:#cbd5e1}.gf-section-save{grid-column:2/3;grid-row:1/3;align-self:center;white-space:nowrap}.gf-icon-danger{width:38px;height:38px;border:0;border-radius:11px;background:#fff1f2;color:#dc2626;cursor:pointer;transition:.16s}.gf-icon-danger:hover{background:#fee2e2;transform:translateY(-1px)}.gf-question-list{padding:14px 16px 0}.gf-question-card{position:relative;margin:0 0 14px;padding:20px 20px 14px;border:1px solid #e6eaf1;border-left:5px solid transparent;border-radius:15px;background:#fff;box-shadow:0 3px 12px rgba(31,41,55,.025);transition:border-color .16s,box-shadow .16s,transform .16s}.gf-question-card:hover{box-shadow:0 8px 22px rgba(31,41,55,.06)}.gf-question-card.is-active,.gf-question-card:focus-within{border-left-color:var(--primary);box-shadow:0 10px 30px rgba(31,41,55,.08)}.gf-drag-handle{position:absolute;top:7px;left:50%;transform:translateX(-50%);color:#aab3c2;font-size:16px}.gf-question-main-row{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:18px;align-items:start;margin-top:6px}.gf-question-input-wrap{min-width:0}.gf-question-title-input{display:block;width:100%;min-height:46px;border:0;border-bottom:2px solid #e6eaf0;padding:10px 9px 7px;background:#fafbfc;font:600 15px/1.4 Inter;color:#172033;outline:none;resize:none;overflow:hidden}.gf-question-title-input:focus{border-bottom-color:var(--primary);background:#f8f9ff}.gf-type-select-wrap{position:relative}.gf-type-select-wrap>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#687386;pointer-events:none}.gf-type-select{width:100%;height:46px;border:1px solid #dce2ea;border-radius:10px;padding:0 34px 0 39px;background:#fff;font:500 13px Inter;color:#263247;outline:none}.gf-type-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent)}.gf-config-panel{margin-top:17px;padding:14px 15px;border:1px solid #edf0f4;border-radius:12px;background:#fbfcfd}.gf-config-panel[hidden],.gf-weight[hidden]{display:none!important}.gf-config-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.gf-config-label-row strong{font-size:12px;color:#475569}.gf-options{display:flex;flex-direction:column;gap:7px}.gf-option-row{display:grid;grid-template-columns:25px minmax(0,1fr) 112px 32px;gap:8px;align-items:center}.gf-option-marker{display:grid;place-items:center;color:#8f9aac}.gf-option-text{width:100%;height:38px;border:0;border-bottom:1px solid #dfe4eb;background:transparent;padding:4px 5px;font:13px Inter;color:#253047;outline:none}.gf-option-text:focus{border-bottom-color:var(--primary)}.gf-score-wrap{height:36px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px;border:1px solid #e1e6ee;border-radius:9px;padding:0 7px;background:#fff}.gf-score-wrap span{font-size:10px;color:#8a94a5}.gf-option-score{width:100%;border:0;outline:none;text-align:right;font:12px Inter;background:transparent;color:#334155}.gf-mini-btn{width:30px;height:30px;border:0;border-radius:9px;background:transparent;color:#8b95a5;cursor:pointer}.gf-mini-btn:hover{background:#f1f5f9;color:#dc2626}.gf-add-option{margin:10px 0 0 33px;border:0;background:transparent;color:var(--primary);font:700 12px Inter;cursor:pointer}.gf-add-option:hover{text-decoration:underline}.gf-range-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.gf-live-preview{margin-top:16px;padding:14px 16px;border-radius:12px;background:linear-gradient(180deg,#f8fafc,#fff);border:1px dashed #d9e0e9}.gf-preview-kicker{margin-bottom:12px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8a94a5}.gf-preview-kicker i{margin-right:5px}.gf-preview-short{max-width:330px;border-bottom:1px solid #aeb7c5;padding:7px 0;color:#98a1af;font-size:12px}.gf-preview-paragraph{max-width:520px;border-bottom:1px solid #aeb7c5;padding:7px 0 24px;color:#98a1af;font-size:12px}.gf-preview-choice{display:flex;align-items:center;gap:9px;min-height:34px;font-size:12px;color:#455166}.gf-preview-choice .radio,.gf-preview-likert .radio,.gf-preview-rating .radio{width:17px;height:17px;border:2px solid #9ba6b5;border-radius:50%;display:inline-block;flex:0 0 auto}.gf-preview-choice .box{width:17px;height:17px;border:2px solid #9ba6b5;border-radius:3px;display:inline-block}.gf-preview-select{max-width:360px;height:42px;display:flex;align-items:center;justify-content:space-between;border:1px solid #dce2ea;border-radius:10px;padding:0 12px;color:#7d8796;font-size:12px;background:#fff}.gf-preview-option-note{margin-top:6px;font-size:10px;color:#9aa4b2}.gf-preview-likert,.gf-preview-rating{display:flex;align-items:stretch;gap:7px;overflow-x:auto;padding:2px 1px 5px}.gf-preview-likert label,.gf-preview-rating label{min-width:86px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #e2e7ee;border-radius:10px;padding:9px 7px;background:#fff;text-align:center}.gf-preview-likert small{font-size:10px;line-height:1.25;color:#536074}.gf-preview-rating label{min-width:56px}.gf-preview-rating b{font-size:12px;color:#475569}.gf-preview-number,.gf-preview-date{display:flex;align-items:center;gap:10px;max-width:380px;min-height:42px;border-bottom:1px solid #c8d0db;color:#7d8796;font-size:12px}.gf-preview-number .help{margin-left:auto}.gf-question-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px;padding-top:13px;border-top:1px solid #edf0f4}.gf-footer-left,.gf-footer-right{display:flex;align-items:center;gap:8px}.gf-tool-button{width:38px;height:38px;border:0;border-radius:10px;background:#f6f8fb;color:#566175;cursor:pointer}.gf-tool-button:hover{background:#eef2f7}.gf-tool-button.danger:hover{background:#fff1f2;color:#dc2626}.gf-weight{display:flex;align-items:center;gap:7px}.gf-weight label{font-size:11px;color:#6b7280}.gf-weight input{width:64px;height:34px;border:1px solid #dce2ea;border-radius:8px;text-align:center;font:12px Inter}.gf-divider{width:1px;height:30px;background:#e5e7eb}.gf-switch-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4b5563}.gf-switch{position:relative;width:42px;height:24px}.gf-switch input{position:absolute;opacity:0;pointer-events:none}.gf-switch span{position:absolute;inset:0;border-radius:999px;background:#d7dce4;transition:.18s}.gf-switch span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}.gf-switch input:checked+span{background:var(--primary)}.gf-switch input:checked+span:before{transform:translateX(18px)}.gf-new-question{margin:2px 16px 18px}.gf-new-question>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border:2px dashed #d9e0e9;border-radius:14px;background:#fbfcfe;color:#475569;font-weight:800;font-size:13px;cursor:pointer;list-style:none}.gf-new-question>summary::-webkit-details-marker{display:none}.gf-new-question>summary:hover{border-color:color-mix(in srgb,var(--primary) 45%,#d9e0e9);color:var(--primary);background:color-mix(in srgb,var(--primary) 4%,white)}.gf-new-question[open]>summary{margin-bottom:12px}.gf-new-question .gf-question-card{border-left-color:var(--primary)}.gf-add-section-card{padding:18px;background:#fff;border:1px solid #e9edf4;border-radius:17px;box-shadow:0 10px 28px rgba(31,41,55,.05)}.gf-add-section-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}.gf-add-section-grid label{display:block;margin-bottom:6px;font-size:11px;font-weight:700;color:#596477}
/* Public respondent controls */
.public-section-description{margin:-6px 0 8px;color:#788295;font-size:12px;line-height:1.55}.likert-public{display:grid;grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:8px}.likert-public label{display:flex;min-height:78px;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:1px solid #e0e6ee;border-radius:12px;padding:9px;text-align:center;cursor:pointer;background:#fff;transition:.15s}.likert-public label:hover{border-color:color-mix(in srgb,var(--primary) 55%,#e0e6ee);background:color-mix(in srgb,var(--primary) 3%,white)}.likert-public input{accent-color:var(--primary)}.rating-public{display:flex;flex-wrap:wrap;gap:8px}.rating-public label{min-width:54px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e0e6ee;border-radius:11px;padding:9px 10px;cursor:pointer}.rating-public input{accent-color:var(--primary)}.choice input,.scale input{accent-color:var(--primary)}.form-warning{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:12px}
@media(max-width:900px){.builder-sticky-toolbar{top:78px}.gf-question-main-row{grid-template-columns:1fr}.gf-section-edit{grid-template-columns:1fr}.gf-section-title,.gf-section-description,.gf-section-save{grid-column:1;grid-row:auto}.gf-section-save{justify-self:start}.gf-question-footer{align-items:flex-start;flex-direction:column}.gf-footer-right{width:100%;justify-content:flex-end}.gf-add-section-grid{grid-template-columns:1fr}.gf-add-section-grid .btn{width:100%}}
@media(max-width:620px){.builder-sticky-toolbar{position:static;padding:0 0 14px;background:transparent;border:0;border-radius:0;backdrop-filter:none;align-items:stretch;flex-direction:column}.builder-sticky-toolbar .toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.gf-section{border-radius:14px}.gf-section-header{padding:16px 14px 13px}.gf-section-title{font-size:16px}.gf-question-list{padding:10px 8px 0}.gf-question-card{padding:18px 12px 12px;border-radius:12px}.gf-option-row{grid-template-columns:22px minmax(0,1fr) 82px 30px}.gf-score-wrap span{display:none}.gf-config-label-row{align-items:flex-start;flex-direction:column}.gf-range-grid{grid-template-columns:1fr 1fr}.gf-footer-left{flex-wrap:wrap}.gf-footer-left .btn{width:100%}.gf-footer-right{justify-content:space-between;flex-wrap:wrap}.gf-weight{order:2}.gf-divider{display:none}.gf-new-question{margin:2px 8px 14px}.likert-public{grid-template-columns:1fr 1fr}.rating-public label{min-width:48px;flex:1}.gf-preview-likert label{min-width:78px}}
/* E-Angket Builder v1.3 */
.gf-preview-scale-info{display:inline-flex;align-items:center;margin-bottom:10px;padding:5px 9px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:10px;font-weight:700}
/* =========================================================
E-Angket v1.4 - Survey appearance + section wizard
========================================================= */
.survey-appearance-card{margin:0 0 20px;padding:22px;background:#fff;border:1px solid #e7ebf2;border-radius:18px;box-shadow:0 10px 30px rgba(31,41,55,.05)}
.survey-appearance-copy{margin-bottom:18px}.survey-appearance-copy h3{margin:2px 0 7px;font-size:18px}.survey-appearance-copy p{margin:0;max-width:760px;color:#748094;font-size:12px;line-height:1.65}
.survey-appearance-form{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:22px;align-items:start}.survey-header-editor,.survey-theme-editor{min-width:0}
.survey-header-preview{position:relative;overflow:hidden;aspect-ratio:5/1;min-height:120px;border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--survey-theme) 18%,white),color-mix(in srgb,var(--survey-theme) 4%,white));border:1px solid color-mix(in srgb,var(--survey-theme) 18%,#e5e7eb)}
.survey-header-preview img{width:100%;height:100%;display:block;object-fit:cover}.survey-header-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:color-mix(in srgb,var(--survey-theme) 72%,#334155)}.survey-header-placeholder i{font-size:25px}.survey-header-placeholder span{font-size:13px;font-weight:800}.survey-header-placeholder small{font-size:10px;color:#7b8798}
.survey-upload-button{margin-top:11px;display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px dashed #cfd7e4;border-radius:12px;background:#fafbfc;cursor:pointer;transition:.16s}.survey-upload-button:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 3%,white)}.survey-upload-button>i{font-size:18px;color:var(--primary)}.survey-upload-button span{display:flex;flex-direction:column;gap:2px}.survey-upload-button strong{font-size:12px}.survey-upload-button small{font-size:10px;color:#8691a2}.survey-upload-button input{position:absolute;opacity:0;pointer-events:none}.survey-remove-header{display:flex;align-items:center;gap:7px;margin-top:9px;color:#64748b;font-size:11px}
.survey-theme-editor>label{display:block;margin-bottom:8px;font-size:12px;font-weight:800;color:#475569}.survey-color-control{display:grid;grid-template-columns:54px 1fr;gap:8px}.survey-color-picker{width:54px;height:44px;padding:3px;border:1px solid #dce2ea;border-radius:11px;background:#fff;cursor:pointer}.survey-color-hex{height:44px;font-weight:700;text-transform:uppercase}.survey-color-presets{display:flex;flex-wrap:wrap;gap:8px;margin:11px 0}.survey-color-preset{width:29px;height:29px;border-radius:9px;border:3px solid #fff;background:var(--preset);box-shadow:0 0 0 1px #d9dee7;cursor:pointer;transition:.15s}.survey-color-preset:hover{transform:translateY(-2px);box-shadow:0 0 0 2px #334155}.survey-theme-mini-preview{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px;border-radius:12px;background:color-mix(in srgb,var(--survey-theme) 6%,white);border:1px solid color-mix(in srgb,var(--survey-theme) 15%,#e5e7eb)}.survey-theme-dot{width:31px;height:31px;border-radius:10px;background:var(--survey-theme);box-shadow:0 6px 16px color-mix(in srgb,var(--survey-theme) 25%,transparent)}.survey-theme-mini-preview div{display:flex;flex-direction:column;gap:2px}.survey-theme-mini-preview strong{font-size:11px;color:#334155}.survey-theme-mini-preview small{font-size:9px;line-height:1.45;color:#7a8595}.survey-appearance-save{width:100%;margin-top:12px}
.gf-question-card.is-duplicated-focus{animation:duplicateFocus 1.6s ease both;border-left-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent),0 14px 34px rgba(31,41,55,.10)}
@keyframes duplicateFocus{0%{transform:translateY(0);background:#fff}25%{transform:translateY(-2px);background:color-mix(in srgb,var(--primary) 4%,white)}100%{transform:translateY(0);background:#fff}}
.public-content{max-width:960px}.survey-public-shell{width:100%;--primary:var(--survey-accent);padding-bottom:8px}.survey-public-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.survey-public-brandmark{display:inline-flex;align-items:center;gap:9px;font-size:13px}.survey-public-brandmark>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--survey-accent);color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--survey-accent) 25%,transparent)}.survey-public-brandmark img{width:36px;height:36px;object-fit:contain}.survey-preview-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;color:#64748b;font-size:10px;font-weight:800}
.survey-professional-hero{overflow:hidden;margin-bottom:14px;background:#fff;border:1px solid #e7ebf1;border-radius:22px;box-shadow:0 18px 46px rgba(31,41,55,.08)}.survey-hero-image{aspect-ratio:5/1;min-height:145px;background:#eef2ff}.survey-hero-image img{display:block;width:100%;height:100%;object-fit:cover}.survey-hero-fallback{position:relative;overflow:hidden;height:150px;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--survey-accent) 88%,#111827),color-mix(in srgb,var(--survey-accent) 58%,#0f172a));color:#fff}.survey-hero-fallback>i{position:relative;z-index:2;font-size:42px;opacity:.95}.survey-hero-pattern{position:absolute;inset:-60px;background:radial-gradient(circle at 15% 30%,rgba(255,255,255,.22),transparent 18%),radial-gradient(circle at 78% 35%,rgba(255,255,255,.14),transparent 16%),linear-gradient(120deg,transparent 40%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.08) 52%,transparent 52%);transform:rotate(-3deg)}.survey-hero-body{padding:26px 28px 28px;border-top:5px solid var(--survey-accent)}.survey-hero-body .survey-meta{margin:0 0 12px}.survey-soft-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--survey-accent) 9%,white);color:color-mix(in srgb,var(--survey-accent) 78%,#111827);font-size:10px;font-weight:800}.survey-hero-body h1{margin:0 0 12px;font-size:28px;line-height:1.2;letter-spacing:-.02em}.survey-description{color:#6f7b8d;font-size:13px;line-height:1.8}.survey-purpose{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:13px 14px;border-radius:13px;background:color-mix(in srgb,var(--survey-accent) 5%,white);border:1px solid color-mix(in srgb,var(--survey-accent) 13%,#e5e7eb)}.survey-purpose>i{margin-top:2px;color:var(--survey-accent)}.survey-purpose div{display:flex;flex-direction:column;gap:3px}.survey-purpose strong{font-size:11px}.survey-purpose span{color:#64748b;font-size:11px;line-height:1.55}
.survey-progress-panel{position:sticky;top:10px;z-index:12;margin:0 0 14px;padding:13px 15px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid #e5eaf0;border-radius:15px;box-shadow:0 8px 24px rgba(31,41,55,.07)}.survey-progress-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.survey-progress-copy>div{display:flex;align-items:center;gap:9px}.survey-progress-label{font-size:10px;font-weight:800;color:#657084;text-transform:uppercase;letter-spacing:.05em}.survey-progress-copy strong{font-size:12px;color:var(--survey-accent)}.survey-progress-copy>span{font-size:10px;font-weight:700;color:#7b8697}.survey-progress-track{height:7px;overflow:hidden;border-radius:999px;background:#edf1f5}.survey-progress-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--survey-accent),color-mix(in srgb,var(--survey-accent) 70%,white));transition:width .25s ease}
.survey-wizard-form{margin:0}.survey-page{padding:0;overflow:hidden;border-radius:20px;box-shadow:0 14px 38px rgba(31,41,55,.07)}.survey-page[hidden]{display:none!important}.survey-page.is-active{animation:surveyPageIn .25s ease both}@keyframes surveyPageIn{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:none}}
.survey-section-head{display:flex;gap:15px;padding:22px 24px;background:linear-gradient(180deg,color-mix(in srgb,var(--survey-accent) 5%,white),#fff);border-bottom:1px solid #edf0f5}.survey-section-number{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:var(--survey-accent);color:#fff;font-size:12px;font-weight:900;box-shadow:0 8px 20px color-mix(in srgb,var(--survey-accent) 22%,transparent)}.survey-section-head>div:last-child>span{display:block;margin-bottom:3px;color:#8a94a4;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.survey-section-head h2{margin:0;font-size:20px}.survey-section-head p{margin:7px 0 0;color:#748094;font-size:11px;line-height:1.6}.survey-identity-panel{margin:20px 22px 4px;padding:17px;border:1px solid color-mix(in srgb,var(--survey-accent) 14%,#e5e7eb);border-radius:15px;background:color-mix(in srgb,var(--survey-accent) 3%,white)}.survey-mini-heading{display:flex;align-items:flex-start;gap:9px;margin-bottom:13px}.survey-mini-heading>i{margin-top:2px;color:var(--survey-accent)}.survey-mini-heading div{display:flex;flex-direction:column;gap:2px}.survey-mini-heading strong{font-size:12px}.survey-mini-heading span{font-size:10px;color:#7b8697}.survey-optional{margin-left:5px;color:#9aa4b2;font-size:9px;font-weight:600}
.survey-question-stack{padding:5px 22px 12px}.survey-question-block{padding:20px 3px;border-bottom:1px solid #edf0f4}.survey-question-block:last-child{border-bottom:0}.survey-question-label-row{margin-bottom:13px}.survey-question-label-row .q-label{display:flex!important;align-items:flex-start;gap:9px;margin:0!important;font-size:13px;line-height:1.5}.survey-q-number{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:10px;font-weight:800}.survey-question-control{padding-left:33px}.survey-answer-input,.survey-answer-textarea{max-width:100%}.survey-choice-list{display:flex;flex-direction:column;gap:5px}.survey-choice-inline{flex-direction:row;flex-wrap:wrap}.survey-choice{border:1px solid transparent}.survey-choice:has(input:checked){background:color-mix(in srgb,var(--survey-accent) 5%,white);border-color:color-mix(in srgb,var(--survey-accent) 18%,#e2e8f0)}.survey-choice input{accent-color:var(--survey-accent)}.likert-scale-caption{margin-bottom:8px}.likert-scale-caption span{display:inline-flex;padding:4px 8px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:9px;font-weight:800}.likert-public label:has(input:checked),.rating-public label:has(input:checked){border-color:var(--survey-accent);background:color-mix(in srgb,var(--survey-accent) 6%,white);box-shadow:0 0 0 2px color-mix(in srgb,var(--survey-accent) 10%,transparent)}.survey-question-error{margin:9px 0 0 33px;color:#b91c1c;font-size:10px;font-weight:700}.survey-question-block.is-invalid{margin-left:-8px;margin-right:-8px;padding-left:11px;padding-right:11px;border-radius:12px;background:#fff7f7}.survey-progress-field.is-invalid .input,.field.is-invalid .input{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.08)}
.survey-wizard-nav{display:flex;align-items:center;gap:9px;margin-top:14px}.survey-nav-spacer{flex:1}.survey-nav-primary,.survey-nav-secondary{min-height:44px;padding-left:18px;padding-right:18px}.survey-nav-primary{background:var(--survey-accent)}.survey-nav-secondary{background:#fff;border:1px solid #dce2ea}.survey-required-note{text-align:right;margin-top:10px;color:#8a94a5;font-size:9px}.survey-empty-page{text-align:center;padding:55px 20px}.survey-empty-page i{font-size:35px;color:#cbd5e1}.survey-empty-page h3{margin:10px 0 5px}.survey-empty-page p{margin:0;color:#94a3b8;font-size:12px}.survey-error{margin-top:0}
@media(max-width:900px){.survey-appearance-form{grid-template-columns:1fr}.survey-header-preview{min-height:105px}.survey-hero-body h1{font-size:24px}}
@media(max-width:620px){.public-content{padding:18px 10px 90px}.survey-public-brand{padding:0 4px}.survey-professional-hero{border-radius:16px}.survey-hero-image{min-height:105px;aspect-ratio:3.6/1}.survey-hero-fallback{height:110px}.survey-hero-body{padding:20px 17px 21px}.survey-hero-body h1{font-size:21px}.survey-description{font-size:12px}.survey-progress-panel{top:7px;border-radius:13px}.survey-page{border-radius:16px}.survey-section-head{padding:18px 15px}.survey-section-number{width:37px;height:37px;border-radius:11px}.survey-section-head h2{font-size:17px}.survey-identity-panel{margin:14px 12px 2px;padding:14px}.survey-question-stack{padding:4px 12px 9px}.survey-question-block{padding:18px 0}.survey-question-control{padding-left:0;margin-top:11px}.survey-question-label-row .q-label{font-size:12px}.survey-question-error{margin-left:0}.likert-public{grid-template-columns:1fr}.rating-public{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.rating-public label{min-width:0}.survey-wizard-nav{position:sticky;bottom:8px;z-index:10;padding:8px;border-radius:14px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(31,41,55,.10)}.survey-nav-primary,.survey-nav-secondary{padding:10px 12px;font-size:11px}.survey-required-note{padding-right:4px}.survey-appearance-card{padding:16px}.survey-color-control{grid-template-columns:50px 1fr}}