:root{--pink:#ff4fa3;--yellow:#ffbf2f;--peach:#ff8f70;--purple:#8b5cf6;--ink:#22223b;--muted:#72738a;--line:#e8e3ef;--accent:#ff4fa3;--accent2:#ffbf2f;--soft-theme:#fff7df;--page-bg:linear-gradient(135deg,#fff8ed,#fff1f8 55%,#f8f2ff)}
*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",Inter,Arial,sans-serif;color:var(--ink);background:#fff8ed}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}input,textarea,select{width:100%;border:1px solid #ddd5e7;border-radius:18px;padding:14px 16px;background:#fff;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}textarea{min-height:100px;resize:vertical}form{margin:0}.btn{border:0;border-radius:999px;padding:13px 22px;font-weight:900;cursor:pointer;display:inline-flex;justify-content:center;align-items:center}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;box-shadow:0 14px 32px color-mix(in srgb,var(--accent) 26%,transparent)}.btn.pink{background:#fff;color:var(--accent);border:2px solid var(--accent)}.btn.outline{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn.wide{width:100%}
.main-header,.builder-header{min-height:72px;background:#fffdf8ee;backdrop-filter:blur(16px);border-bottom:1px solid #f3dfca;display:flex;align-items:center;justify-content:space-between;padding:14px 42px;position:sticky;top:0;z-index:10;gap:18px}.logo{display:flex;align-items:center;gap:12px;font-size:22px}.logo-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--accent2),var(--accent));display:grid;place-items:center;color:#fff;font-weight:1000}.builder-title{font-weight:950}.builder-title span{color:var(--muted);font-weight:650;margin-left:8px}.builder-nav,nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.builder-nav button,.builder-nav a{border:0;background:#fff;border-radius:999px;padding:10px 15px;font-weight:850;box-shadow:0 5px 14px rgba(0,0,0,.05);cursor:pointer}.builder-nav .publish-btn{background:var(--accent);color:#fff}.builder-nav .response-btn{border:1px solid color-mix(in srgb,var(--accent) 35%,white);color:var(--accent)}.nav-cta{background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px}
.home-wrap{min-height:100vh;background:radial-gradient(circle at top left,#fff1ad 0,transparent 32%),radial-gradient(circle at 85% 10%,#ffd6e9 0,transparent 28%),linear-gradient(135deg,#fffaf2,#fff1f8 52%,#f3f7ff)}.home-hero{max-width:1240px;margin:auto;padding:90px 28px;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}.badge-soft{display:inline-flex;background:#fff;border:1px solid #ffe0ab;border-radius:999px;color:#9b5b00;font-weight:800;padding:9px 14px}.home-hero h1{font-size:56px;line-height:1.06;margin:24px 0 18px;letter-spacing:-2px}.home-hero p{font-size:19px;color:var(--muted);line-height:1.75;max-width:680px}.hero-actions{display:flex;gap:14px;margin-top:24px}.hero-benefits{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.hero-benefits span{background:#fff;border:1px solid #ffe0c2;border-radius:999px;padding:9px 14px;font-weight:800;color:#7a4f00}.hero-preview{min-height:420px;border-radius:36px;background:linear-gradient(135deg,#fff,#fff5da);box-shadow:0 28px 80px #b5723624;padding:34px;position:relative;overflow:hidden}.hero-preview:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:#ffd6e9;right:-60px;top:-40px}.preview-top{height:18px;width:75%;border-radius:999px;background:#ffbf2f;margin-bottom:30px}.preview-card{position:relative;background:white;border-radius:28px;padding:30px;box-shadow:0 20px 50px #0001}.preview-badge{display:inline-flex;background:#fff0f7;color:var(--accent);border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px}.preview-card h3{font-size:30px}.fake-line{height:14px;border-radius:999px;background:#eee0ef}.w80{width:80%}.fake-option{height:48px;border:1px solid var(--line);border-radius:18px;margin-top:20px}.fake-option.small{width:70%}.preview-card button{border:0;border-radius:999px;background:var(--pink);color:#fff;padding:12px 20px;margin-top:22px}.template-section,.recent-section{max-width:1240px;margin:auto;padding:20px 28px 64px}.section-title{margin-bottom:24px}.section-title h2{font-size:34px;margin:0 0 8px}.section-title p{color:var(--muted)}.section-title.inline{display:flex;justify-content:space-between;align-items:center}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.template-card{min-height:190px;border-radius:28px;padding:24px;box-shadow:0 18px 46px #c77a551c;position:relative;overflow:hidden}.template-card:after{content:"";position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;border-radius:50%;background:#ffffff75}.template-card span{font-weight:900}.template-card h3{font-size:25px}.template-card p{color:#3f3f55}.t-pink{background:linear-gradient(135deg,#ffd6e9,#fff)}.t-yellow{background:linear-gradient(135deg,#fff0a6,#fff)}.t-mint{background:linear-gradient(135deg,#d5fff4,#fff)}.t-purple{background:linear-gradient(135deg,#e8ddff,#fff)}.forms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}.form-tile{background:#fff;border:1px solid #f1e0d2;border-radius:26px;overflow:hidden;box-shadow:0 20px 50px #8c5a2d12;transition:.2s}.form-tile:hover{transform:translateY(-4px)}.tile-cover{height:100px;background:linear-gradient(135deg,#fff0a6,#ffd6e9)}.quiz-cover{background:linear-gradient(135deg,#ffd6e9,#e8ddff)}.tile-body{padding:20px}.tile-body h3{margin:0 0 20px}.tile-body p,.tile-body small{color:var(--muted)}
.create-page{min-height:100vh;background:radial-gradient(circle at top left,#fff0a6,transparent 35%),radial-gradient(circle at bottom right,#ffd6e9,transparent 35%),#fffaf2;display:grid;place-items:center;padding:40px}.floating-back{position:fixed;left:30px;top:30px;font-weight:900}.create-panel{width:min(760px,94vw);background:#fff;border:1px solid #ffe0c2;border-radius:34px;padding:40px;box-shadow:0 30px 90px #8e4b371e;display:flex;flex-direction:column;gap:13px}.create-panel h1{font-size:44px;margin:10px 0 0}.create-panel p{color:var(--muted)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.switch-card,.switch-mini{display:flex;align-items:center;gap:10px;background:var(--soft-theme);border:1px solid color-mix(in srgb,var(--accent2) 35%,white);border-radius:18px;padding:14px;font-weight:800}.switch-card input,.switch-mini input{width:auto}
.builder-layout{min-height:calc(100vh - 72px);background:var(--page-bg);display:grid;grid-template-columns:190px 1fr;padding:32px;gap:28px}.builder-side{position:sticky;top:104px;height:max-content;background:#fff;border:1px solid color-mix(in srgb,var(--accent2) 30%,white);border-radius:28px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px #b47c4a18}.builder-side button,.builder-side a{border:0;background:var(--soft-theme);border-radius:18px;padding:13px;text-align:left;font-weight:900;color:var(--ink);cursor:pointer}.builder-side .side-main{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff}.builder-board{max-width:1080px;width:100%;margin:0 auto}.form-hero-card,.section-card,.add-section-card{background:#fff;border:1px solid color-mix(in srgb,var(--accent2) 30%,white);border-radius:34px;padding:32px;margin-bottom:24px;box-shadow:0 24px 70px #94552d14}.title-form{display:flex;flex-direction:column;gap:12px}.form-title-input{font-size:38px;font-weight:950;border:0;padding-left:0}.mini-btn{border:1px solid color-mix(in srgb,var(--accent) 50%,white);background:#fff;color:var(--accent);border-radius:999px;padding:10px 18px;font-weight:900;cursor:pointer}.meta-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.meta-pills span{background:var(--soft-theme);border-radius:999px;padding:8px 13px;font-weight:800;color:#7a4f00}
.section-editor{border:1px dashed color-mix(in srgb,var(--accent2) 45%,white);border-radius:24px;padding:16px;background:#fffdf7}.section-editor summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.section-editor summary::-webkit-details-marker{display:none}.section-editor strong{font-size:22px}.section-editor small{display:block;color:var(--muted);margin-top:4px}.section-editor summary span{background:color-mix(in srgb,var(--accent) 14%,white);color:var(--accent);border-radius:999px;padding:8px 14px;font-weight:900}.section-edit-form{display:flex;flex-direction:column;gap:12px;margin-top:18px}.article-preview{background:var(--soft-theme);border-radius:22px;padding:18px;margin:18px 0;color:#594a2f;line-height:1.6}
.question-card{position:relative;border:1px solid color-mix(in srgb,var(--accent) 16%,white);border-radius:30px;padding:24px;margin-top:20px;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--soft-theme) 24%,white));box-shadow:0 16px 48px rgba(43,36,56,.06)}.active-question{border-top:5px solid var(--accent)}.question-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.handle-dot{width:46px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,white)}.question-tools{display:flex;gap:10px;align-items:center}.tool-btn{width:38px;height:38px;border:0;border-radius:14px;background:#fff;color:#6b7280;box-shadow:0 8px 22px rgba(17,24,39,.08);cursor:pointer;font-size:17px;display:grid;place-items:center;padding:0;transition:.18s}.tool-btn:hover{transform:translateY(-2px);color:var(--accent);box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 15%,transparent)}.tool-btn.danger:hover{color:#dc2626;background:#fff1f2}.question-summary{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:4px 0 8px}.q-type{display:inline-flex;background:#e9fff8;color:#047857;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:1000}.question-summary h3{font-size:24px;line-height:1.35;margin:12px 0 6px}.question-summary p{font-size:15px;color:var(--muted);margin:0}.edit-btn{border:0;background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-weight:900;cursor:pointer;min-width:78px}.compact-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.compact-options span{background:color-mix(in srgb,var(--accent) 10%,white);border:1px solid color-mix(in srgb,var(--accent) 24%,white);border-radius:999px;padding:8px 12px}.compact-options b{color:var(--accent)}
.edit-box{display:none;margin-top:20px;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 18%,white);box-shadow:0 18px 44px rgba(43,36,56,.08);border-radius:28px;padding:24px}.edit-box.open{display:block}.edit-box-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.edit-box-header span{display:inline-flex;background:color-mix(in srgb,var(--accent) 10%,white);color:var(--accent);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;margin-bottom:8px}.edit-box-header strong{display:block;font-size:22px}.edit-box-header button{width:38px;height:38px;border:0;border-radius:50%;background:#fff1f2;color:#be123c;font-size:24px;cursor:pointer;display:grid;place-items:center;padding:0}.question-edit-form{display:flex;flex-direction:column;gap:12px}.question-line{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center}.question-line span{font-size:20px;font-weight:900}.question-line input,.subtitle-input,.answer-preview input,.answer-preview textarea,.answer-preview select{border-radius:16px;background:#fff;border:1px solid #e7dff0}.answer-preview textarea{width:100%;min-height:90px}.stars-preview{display:inline-flex;gap:6px;font-size:28px;color:var(--accent2);background:#fff;border:1px solid #e7dff0;border-radius:16px;padding:14px 18px}.control-grid{margin-top:12px;padding:18px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 18%,white),color-mix(in srgb,var(--accent) 9%,white));display:grid;grid-template-columns:minmax(180px,1.2fr) 110px auto auto auto auto;gap:14px;align-items:end}.control-grid label{font-size:13px;font-weight:900;color:#5f5d72}.control-grid>div{display:flex;flex-direction:column;gap:7px}.control-grid select,.control-grid input{height:46px;border-radius:15px}.switch-pill{min-height:46px;display:inline-flex;align-items:center;gap:9px;padding:0 14px;background:#fff;border:1px solid #eadff2;border-radius:999px;font-weight:800;white-space:nowrap}.switch-pill input{width:auto}.update-btn{min-height:46px}
.option-panel{margin-top:20px;padding:22px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--soft-theme) 70%,white),#fff);border:1px solid color-mix(in srgb,var(--accent2) 24%,white)}.option-title-row{display:flex;justify-content:space-between;margin-bottom:16px}.option-title-row strong{font-size:18px;font-weight:950}.option-title-row small{display:block;color:var(--muted);margin-top:4px}.option-edit-list{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}.option-edit-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;padding:14px;border:1px solid #eee2f3;border-radius:22px;background:#fff;box-shadow:0 10px 24px rgba(43,36,56,.04)}.option-update-form{display:grid;grid-template-columns:minmax(260px,1fr) 120px 115px 84px;gap:12px;align-items:end}.option-input-wrap,.option-score-wrap{display:flex;flex-direction:column;gap:7px}.option-input-wrap label,.option-score-wrap label{font-size:12px;font-weight:900;color:#6b647a}.option-update-form input,.add-option-form input{height:44px;border-radius:14px}.correct-check{height:44px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:999px;background:#fff7fb;border:1px solid #ffd5ea;color:#6b647a;font-weight:850;white-space:nowrap}.correct-check input{width:auto}.save-option-btn{height:44px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:950;cursor:pointer}.delete-option-btn{height:44px;border:0;border-radius:999px;background:#fff1f2;color:#be123c;font-weight:950;cursor:pointer;padding:0 16px}.add-option-form{display:grid;grid-template-columns:minmax(260px,1fr) 120px 115px 84px;gap:12px;align-items:end;padding-top:18px;border-top:1px dashed #eadff2}
.add-question-picker{margin-top:24px}.add-question-picker summary{list-style:none;display:inline-flex;align-items:center;gap:12px;cursor:pointer;color:var(--accent);font-size:20px;font-weight:950;padding:12px 4px}.add-question-picker summary::-webkit-details-marker{display:none}.add-question-picker summary span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}.question-type-grid{margin-top:16px;padding:24px;border-radius:30px;background:rgba(255,255,255,.74);border:1px solid color-mix(in srgb,var(--accent) 18%,white);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;box-shadow:0 18px 48px rgba(43,36,56,.06)}.question-type-grid button{width:100%;min-height:84px;border:1.5px solid color-mix(in srgb,var(--accent) 26%,white);background:#fff;border-radius:22px;display:flex;align-items:center;gap:14px;padding:16px;color:var(--ink);text-align:left;cursor:pointer}.question-type-grid button b{width:42px;height:42px;flex:0 0 42px;border-radius:15px;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);display:grid;place-items:center;font-size:20px}.question-type-grid button span{display:flex;flex-direction:column;gap:4px}.question-type-grid button strong{font-size:16px;font-weight:950}.question-type-grid button small{font-size:12px;color:var(--muted);font-weight:650}
.add-section-card{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;align-items:start}.add-section-card h2{margin-top:0}.add-section-card form{display:flex;flex-direction:column;gap:12px}.toast{position:fixed;left:50%;top:92px;transform:translateX(-50%);background:#161b2a;color:#fff;border-radius:999px;padding:14px 30px;font-weight:800;z-index:50;box-shadow:0 14px 34px #0003;transition:.25s}.toast.hide{opacity:0;transform:translateX(-50%) translateY(-10px);pointer-events:none}.slide-panel{position:fixed;right:-430px;top:72px;width:420px;height:calc(100vh - 72px);background:#fff;border-left:1px solid color-mix(in srgb,var(--accent2) 30%,white);box-shadow:-20px 0 60px #0001;padding:28px;z-index:30;transition:.25s;overflow:auto}.slide-panel.open{right:0}.close-x{float:right;border:0;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);width:36px;height:36px;border-radius:50%;font-size:22px}.panel-form,.theme-form{display:flex;flex-direction:column;gap:12px;margin-top:20px}.share-box{background:var(--soft-theme);border-radius:22px;padding:18px;margin-top:22px}.share-box a{display:block;margin-top:10px;color:var(--accent);font-weight:900}.theme-option{display:flex;gap:12px;align-items:center;border:1px solid #eee;border-radius:20px;padding:14px;cursor:pointer}.theme-option input{width:auto}.theme-option span{display:flex;flex-direction:column}.theme-option small{color:var(--muted);font-weight:500}.theme-option:before{content:"";width:42px;height:42px;border-radius:14px;flex:0 0 auto}.theme-option.candy:before{background:linear-gradient(135deg,#ff4fa3,#ffbf2f)}.theme-option.sunshine:before{background:linear-gradient(135deg,#f59e0b,#fb7185)}.theme-option.rose:before{background:linear-gradient(135deg,#e11d48,#f9a8d4)}.theme-option.mint:before{background:linear-gradient(135deg,#10b981,#22d3ee)}.theme-option.lavender:before{background:linear-gradient(135deg,#8b5cf6,#f472b6)}
.respondent-bg{min-height:100vh;background:var(--page-bg);padding:72px 0 42px}.timer-strip{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1100px,100% - 34px);height:50px;background:#fff;border-radius:0 0 24px 24px;box-shadow:0 10px 30px #0001;z-index:20;display:flex;align-items:center;gap:18px;padding:0 22px}.timer-progress{flex:1;height:8px;background:#eee;border-radius:999px;overflow:hidden}.timer-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}.timer-clock{font-size:20px}.respondent-shell{width:min(1080px,92vw);margin:auto;background:#fffefbcc;border:1px solid color-mix(in srgb,var(--accent2) 28%,white);border-radius:34px;box-shadow:0 30px 90px #8e4b3716;overflow:hidden}.respondent-header{background:linear-gradient(135deg,#fff,var(--soft-theme));padding:40px 56px;border-bottom:1px solid color-mix(in srgb,var(--accent2) 30%,white)}.respondent-header h1{font-size:40px;margin:0 0 10px}.respondent-header p{color:var(--muted);font-size:17px}.required-note{padding:18px 56px;font-weight:800}.required-note span,.question-head b{color:#be123c}.respondent-section{padding:8px 56px 16px}.article-box{background:var(--soft-theme);border:1px solid color-mix(in srgb,var(--accent2) 35%,white);border-radius:24px;padding:28px;margin:20px 0 34px;line-height:1.7;font-size:18px}.respondent-question{margin-bottom:36px}.question-head{background:color-mix(in srgb,var(--accent) 10%,white);border:1px solid color-mix(in srgb,var(--accent) 24%,white);border-radius:22px;padding:20px 24px;font-size:20px;font-weight:800;margin-bottom:20px}.question-head em{font-style:normal;color:var(--accent);margin-left:10px}.choice{display:flex;align-items:center;gap:14px;margin:18px 0;font-size:18px}.choice input{width:22px;height:22px}.respondent-question input:not([type=radio]):not([type=checkbox]),.respondent-question textarea,.respondent-question select{max-width:620px}.submit-wide{margin:8px 56px 48px}.thanks-card{text-align:center;padding:100px 30px}.thanks-card h1{font-size:40px}.error-box{background:#fff0f0;color:#b91c1c;padding:18px 56px}.responses-page{max-width:1100px;margin:40px auto;background:#fff;border-radius:28px;padding:34px;box-shadow:0 26px 80px #0001}.responses-page.small{max-width:780px}.responses-page table{width:100%;border-collapse:collapse;margin-top:20px}.responses-page th,.responses-page td{border-bottom:1px solid #eee;padding:14px;text-align:left}.answer-box{background:#fff7df;border-radius:18px;padding:18px;margin:14px 0}
@media(max-width:1200px){.control-grid{grid-template-columns:1fr 1fr}.option-update-form,.add-option-form{grid-template-columns:1fr 90px 100px 70px}}@media(max-width:1100px){.question-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:980px){.home-hero{grid-template-columns:1fr}.template-grid{grid-template-columns:1fr 1fr}.builder-layout{grid-template-columns:1fr;padding:18px}.builder-side{position:static}.slide-panel{width:100%;right:-100%}.two-col{grid-template-columns:1fr}.builder-header,.main-header{height:auto;flex-wrap:wrap;padding:16px}.respondent-header,.required-note,.respondent-section{padding-left:24px;padding-right:24px}.submit-wide{margin-left:24px}.home-hero h1{font-size:42px}.add-section-card{grid-template-columns:1fr}}@media(max-width:760px){.question-type-grid{grid-template-columns:1fr;padding:16px}.question-summary{flex-direction:column;align-items:flex-start}.control-grid{grid-template-columns:1fr}.switch-pill{justify-content:flex-start}.option-edit-row,.option-update-form,.add-option-form{grid-template-columns:1fr}}@media(max-width:640px){.template-grid{grid-template-columns:1fr}.hero-actions{flex-direction:column}.forms-grid{grid-template-columns:1fr}}


/* SCORE VISIBILITY + LIVE PREVIEW PATCH */
.preview-mini-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:18px;
}
.preview-mini-row span{
    background:#fff7df;
    border:1px solid #ffe0ab;
    color:#7a4f00;
    border-radius:999px;
    padding:7px 11px;
    font-size:12px;
    font-weight:900;
}
.preview-link-btn{
    display:inline-flex;
    margin-top:16px;
    border-radius:999px;
    padding:12px 20px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    font-weight:900;
}
.preview-badge{
    display:inline-flex;
    background:#fff0f7;
    color:var(--accent);
    border-radius:999px;
    padding:7px 12px;
    font-weight:900;
    font-size:12px;
}
.panel-help{
    color:var(--muted);
    line-height:1.6;
}
.preview-mode-banner{
    position:fixed;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    z-index:40;
    background:#1f2237;
    color:#fff;
    border-radius:999px;
    padding:10px 20px;
    font-weight:900;
    box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.respondent-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}
.respondent-meta span{
    background:#fff;
    border:1px solid color-mix(in srgb,var(--accent2) 35%,white);
    color:#7a4f00;
    border-radius:999px;
    padding:8px 12px;
    font-weight:850;
    font-size:13px;
}
.score-result-card{
    margin:28px auto 0;
    width:min(360px,90%);
    border-radius:28px;
    padding:24px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    box-shadow:0 18px 42px color-mix(in srgb,var(--accent) 28%,transparent);
}
.score-result-card span{
    display:block;
    font-weight:800;
    opacity:.9;
}
.score-result-card strong{
    display:block;
    font-size:42px;
    margin-top:8px;
}
.score-hidden-card{
    margin:24px auto 0;
    width:min(520px,90%);
    background:#fff7df;
    border:1px solid #ffe0ab;
    color:#7a4f00;
    border-radius:24px;
    padding:18px;
    font-weight:850;
}


/* FORM RAY - PUBLIC RATING FIX */
.rating-user{
    max-width:520px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:18px 20px;
    border:1px solid color-mix(in srgb,var(--accent) 28%,white);
    background:#fff;
    border-radius:24px;
    box-shadow:0 12px 30px rgba(43,36,56,.05);
}
.rating-star{
    border:0;
    background:transparent;
    color:color-mix(in srgb,var(--accent) 75%,#777);
    font-size:36px;
    line-height:1;
    cursor:pointer;
    transition:.15s;
    padding:2px;
}
.rating-star:hover,
.rating-star.active{
    color:var(--accent2);
    transform:translateY(-2px) scale(1.08);
    text-shadow:0 8px 18px color-mix(in srgb,var(--accent2) 35%,transparent);
}
.rating-value-text{
    margin-left:14px;
    font-weight:900;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 10%,white);
    border-radius:999px;
    padding:8px 12px;
}
@media(max-width:640px){
    .rating-user{
        flex-wrap:wrap;
    }
    .rating-star{
        font-size:30px;
    }
    .rating-value-text{
        width:100%;
        margin-left:0;
        text-align:center;
    }
}


/* FORM RAY - REMOVE CONFUSING PREVIEW FIELDS IN BUILDER */
.question-edit-form .subtitle-input,
.question-edit-form .answer-preview{
    display:none !important;
}

.question-edit-form .control-grid{
    margin-top:16px !important;
}

/* Editor dibuat lebih padat setelah subtitle dan answer preview dihapus */
.edit-box{
    padding:22px !important;
}

.question-line{
    margin-bottom:4px;
}


/* FORM RAY - EDIT QUESTION AS POPUP MODAL */
body.modal-open{
    overflow:hidden;
}

.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(20,18,36,.44);
    backdrop-filter:blur(8px);
    z-index:90;
    opacity:0;
    pointer-events:none;
    transition:.2s ease;
}

.modal-backdrop.show{
    opacity:1;
    pointer-events:auto;
}

.edit-box{
    display:none;
}

.edit-box.open{
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(980px, calc(100vw - 34px)) !important;
    max-height:88vh !important;
    overflow:auto !important;
    display:block !important;
    z-index:100 !important;
    margin:0 !important;
    padding:28px !important;
    border-radius:34px !important;
    background:
        radial-gradient(circle at top right, color-mix(in srgb,var(--accent) 10%,transparent), transparent 34%),
        #fff !important;
    box-shadow:0 32px 120px rgba(18,18,32,.34) !important;
    animation:formrayModalIn .18s ease-out;
}

@keyframes formrayModalIn{
    from{
        opacity:0;
        transform:translate(-50%,-46%) scale(.96);
    }
    to{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }
}

.edit-box-header{
    position:sticky;
    top:-28px;
    z-index:2;
    background:linear-gradient(180deg,#fff 78%,rgba(255,255,255,.88));
    padding:0 0 18px;
    margin-bottom:20px !important;
}

.edit-box-header button{
    width:44px !important;
    height:44px !important;
    font-size:26px !important;
    box-shadow:0 12px 26px rgba(190,18,60,.12);
}

.question-edit-form{
    background:color-mix(in srgb,var(--soft-theme) 28%,white);
    border:1px solid color-mix(in srgb,var(--accent) 12%,white);
    border-radius:26px;
    padding:20px;
}

.question-line{
    grid-template-columns:44px 1fr !important;
}

.question-line span{
    width:44px;
    height:44px;
    border-radius:14px;
    background:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 8px 20px rgba(43,36,56,.06);
}

.control-grid{
    margin-top:18px !important;
}

.option-panel{
    margin-top:18px !important;
}

.edit-btn{
    box-shadow:0 14px 34px rgba(31,34,55,.18);
}

@media(max-width:760px){
    .edit-box.open{
        width:calc(100vw - 20px) !important;
        max-height:92vh !important;
        padding:18px !important;
        border-radius:26px !important;
    }

    .edit-box-header{
        top:-18px;
    }

    .question-edit-form{
        padding:14px;
    }
}


/* FORM RAY - CORRECT OPTION AUTO POINTS UI */
.option-update-form{
    grid-template-columns:minmax(260px,1fr) 145px 115px 84px !important;
}

.add-option-form{
    grid-template-columns:minmax(260px,1fr) 185px 115px 84px !important;
}

.auto-score-badge{
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,white), color-mix(in srgb,var(--accent2) 18%,white));
    border:1px solid color-mix(in srgb,var(--accent) 22%,white);
    color:var(--accent);
    font-weight:950;
    white-space:nowrap;
    padding:0 14px;
}

.auto-score-badge.muted{
    color:#7a4f00;
    background:var(--soft-theme);
    border-color:color-mix(in srgb,var(--accent2) 35%,white);
    font-size:13px;
}

.option-score-wrap{
    display:none !important;
}

.option-title-row small{
    max-width:720px;
}

@media(max-width:1000px){
    .option-update-form,
    .add-option-form{
        grid-template-columns:1fr !important;
    }

    .auto-score-badge{
        justify-content:flex-start;
    }
}


/* FORM RAY - ALL SAVE + QUESTION/OPTION IMAGE INPUT */
.modal-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.all-save-btn{
    height:44px;
    border:0;
    border-radius:999px;
    padding:0 20px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 24%,transparent);
}
.all-save-btn:disabled{
    opacity:.7;
    cursor:not-allowed;
}
.image-upload-line,
.mini-image-upload{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border:1px dashed color-mix(in srgb,var(--accent) 32%,white);
    border-radius:18px;
    background:#fff;
    color:#6b647a;
    font-weight:850;
}
.image-upload-line input,
.mini-image-upload input{
    width:auto;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    font-size:13px;
}
.builder-image-preview,
.option-image-preview{
    margin-top:10px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #eee2f3;
    background:#fff;
    width:max-content;
    max-width:100%;
}
.builder-image-preview img{
    display:block;
    max-width:240px;
    max-height:160px;
    object-fit:cover;
}
.option-image-preview img{
    display:block;
    max-width:150px;
    max-height:100px;
    object-fit:cover;
}
.option-update-form{
    grid-template-columns:minmax(260px,1fr) 145px 115px 84px !important;
}
.add-option-form{
    grid-template-columns:minmax(260px,1fr) 185px 115px 84px !important;
}
.auto-score-badge{
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,white), color-mix(in srgb,var(--accent2) 18%,white));
    border:1px solid color-mix(in srgb,var(--accent) 22%,white);
    color:var(--accent);
    font-weight:950;
    white-space:nowrap;
    padding:0 14px;
}
.auto-score-badge.muted{
    color:#7a4f00;
    background:var(--soft-theme);
    border-color:color-mix(in srgb,var(--accent2) 35%,white);
    font-size:13px;
}
.public-question-image{
    margin:14px 0 18px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--accent) 20%,white);
    width:max-content;
    max-width:100%;
    background:#fff;
}
.public-question-image img{
    display:block;
    max-width:min(520px,100%);
    max-height:320px;
    object-fit:contain;
}
.public-option-image{
    display:block;
    margin-top:8px;
}
.public-option-image img{
    max-width:180px;
    max-height:120px;
    border-radius:16px;
    border:1px solid #e8e3ef;
    object-fit:cover;
}
.dropdown-option-images{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:12px;
}
.dropdown-option-images div{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:#fff;
    border:1px solid #e8e3ef;
    border-radius:16px;
    padding:10px;
    font-weight:800;
}
.dropdown-option-images img{
    width:140px;
    height:90px;
    border-radius:12px;
    object-fit:cover;
}
@media(max-width:1000px){
    .option-update-form,
    .add-option-form{
        grid-template-columns:1fr !important;
    }
    .auto-score-badge{
        justify-content:flex-start;
    }
}


/* FORM RAY - MOVE ALL SAVE TO BOTTOM UI */
.edit-box-header{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:18px !important;
}

.edit-box-header .all-save-btn{
    display:none !important;
}

.modal-close-btn,
.edit-box-header > button:not(.all-save-btn){
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    border:0 !important;
    border-radius:50% !important;
    background:#fff1f2 !important;
    color:#be123c !important;
    font-size:26px !important;
    cursor:pointer !important;
    display:grid !important;
    place-items:center !important;
    box-shadow:0 12px 26px rgba(190,18,60,.12) !important;
}

.modal-bottom-save{
    position:sticky;
    bottom:-28px;
    z-index:5;
    margin:22px -28px -28px;
    padding:18px 28px;
    background:linear-gradient(180deg, rgba(255,255,255,.86), #fff 42%);
    border-top:1px solid color-mix(in srgb,var(--accent) 16%,white);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    box-shadow:0 -18px 40px rgba(43,36,56,.08);
}

.modal-bottom-save strong{
    display:block;
    font-size:17px;
    font-weight:950;
    color:var(--ink);
}

.modal-bottom-save small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-weight:650;
    line-height:1.45;
}

.all-save-bottom-btn{
    min-width:170px;
    height:54px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    font-weight:1000;
    cursor:pointer;
    box-shadow:0 16px 36px color-mix(in srgb,var(--accent) 28%,transparent);
    transition:.18s ease;
}

.all-save-bottom-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 42px color-mix(in srgb,var(--accent) 34%,transparent);
}

.all-save-bottom-btn:disabled{
    opacity:.72;
    cursor:not-allowed;
    transform:none;
}

/* Biar tombol besar tidak muncul di pojok kanan atas lagi */
.modal-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.modal-actions .all-save-btn{
    display:none !important;
}

@media(max-width:760px){
    .modal-bottom-save{
        bottom:-18px;
        margin:20px -18px -18px;
        padding:16px 18px;
        flex-direction:column;
        align-items:stretch;
    }

    .all-save-bottom-btn{
        width:100%;
    }
}


/* FORM RAY - ADD OPTION WITHOUT RESET + LIVE IMAGE PREVIEW */
.draft-add-option-form{
    display:grid !important;
    grid-template-columns:minmax(260px,1fr) 185px 115px 84px;
    gap:12px;
    align-items:end;
    padding-top:18px;
    border-top:1px dashed #eadff2;
}

.draft-option-row{
    border:2px dashed color-mix(in srgb,var(--accent) 28%,white) !important;
    background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--accent2) 10%,white)) !important;
}

.draft-option-grid{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(260px,1fr) 145px 115px 100px;
    gap:12px;
    align-items:end;
    width:100%;
}

.live-image-preview{
    margin-top:10px;
    display:none;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid color-mix(in srgb,var(--accent) 20%,white);
    border-radius:18px;
    padding:10px;
    max-width:360px;
}

.live-image-preview:not(:empty){
    display:flex;
}

.live-image-preview img{
    width:120px;
    height:80px;
    object-fit:cover;
    border-radius:14px;
    border:1px solid #eee2f3;
}

.live-image-preview span{
    font-size:12px;
    font-weight:850;
    color:#6b647a;
    word-break:break-word;
}

.live-image-preview.small img{
    width:90px;
    height:64px;
}

.mini-image-upload,
.image-upload-line{
    cursor:pointer;
}

.add-option-btn{
    height:48px;
}

@media(max-width:1000px){
    .draft-add-option-form,
    .draft-option-grid{
        grid-template-columns:1fr !important;
    }
}


/* FORM RAY - FIX IMAGE DISPLAY IN USER PAGE */
.public-question-image{
    margin:14px 0 18px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--accent) 20%,white);
    width:max-content;
    max-width:100%;
    background:#fff;
}
.public-question-image img{
    display:block;
    max-width:min(520px,100%);
    max-height:320px;
    object-fit:contain;
}
.public-option-image{
    display:block;
    margin-top:8px;
}
.public-option-image img{
    max-width:180px;
    max-height:120px;
    border-radius:16px;
    border:1px solid #e8e3ef;
    object-fit:cover;
}
.dropdown-option-images{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:12px;
}
.dropdown-option-images div{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:#fff;
    border:1px solid #e8e3ef;
    border-radius:16px;
    padding:10px;
    font-weight:800;
}
.dropdown-option-images img{
    width:140px;
    height:90px;
    border-radius:12px;
    object-fit:cover;
}


/* FORM RAY - RESPONSE SCORE FIX UI */
.responses-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}
.back-link{
    display:inline-flex;
    margin-bottom:22px;
    color:var(--ink);
    font-weight:800;
}
.score-summary-card{
    min-width:150px;
    border-radius:24px;
    padding:16px 20px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    box-shadow:0 16px 38px color-mix(in srgb,var(--accent) 24%,transparent);
    text-align:center;
}
.score-summary-card span{
    display:block;
    font-size:12px;
    font-weight:850;
    opacity:.9;
}
.score-summary-card strong{
    display:block;
    font-size:28px;
    line-height:1.2;
    margin-top:4px;
}
.responses-table-wrap{
    overflow:auto;
}
.open-detail-link{
    color:var(--accent);
    font-weight:900;
}
.empty-response{
    padding:28px;
    text-align:center;
    color:var(--muted);
    font-weight:800;
}
.answer-text{
    background:#fff;
    border:1px solid #eee2f3;
    border-radius:18px;
    padding:14px 16px;
    color:var(--ink);
    line-height:1.6;
}
.pagination-wrap{
    margin-top:22px;
}
@media(max-width:760px){
    .responses-head{
        flex-direction:column;
    }
    .score-summary-card{
        width:100%;
    }
}


/* FORM RAY - DELETE UNUSED FORM CARD */
.form-tile-manage{
    position:relative;
    display:flex;
    flex-direction:column;
}

.form-tile-link{
    display:block;
    color:inherit;
}

.tile-actions{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 20px 20px;
    margin-top:auto;
}

.tile-actions form{
    margin:0;
}

.tile-open-btn,
.tile-delete-btn{
    height:38px;
    border-radius:999px;
    padding:0 15px;
    border:0;
    font-weight:950;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.tile-open-btn{
    background:var(--soft-theme);
    color:#7a4f00;
    border:1px solid color-mix(in srgb,var(--accent2) 35%,white);
}

.tile-open-btn.public{
    background:color-mix(in srgb,var(--accent) 10%,white);
    color:var(--accent);
    border-color:color-mix(in srgb,var(--accent) 28%,white);
}

.tile-delete-btn{
    background:#fff1f2;
    color:#be123c;
    border:1px solid #fecdd3;
}

.tile-delete-btn:hover{
    background:#be123c;
    color:#fff;
}

.form-tile-manage:hover .tile-delete-btn{
    box-shadow:0 10px 24px rgba(190,18,60,.12);
}

@media(max-width:640px){
    .tile-actions{
        flex-wrap:wrap;
    }

    .tile-open-btn,
    .tile-delete-btn{
        flex:1;
    }
}


/* FORM RAY - CLEAN USELESS BUTTONS + DELETE SECTION */
.question-tools{
    display:flex;
    align-items:center;
    gap:10px;
}

.question-tools .tool-btn:not(.danger){
    display:none !important;
}

.question-delete-btn,
.tool-btn.danger{
    width:auto !important;
    min-width:76px !important;
    height:38px !important;
    border-radius:999px !important;
    padding:0 16px !important;
    background:#fff1f2 !important;
    color:#be123c !important;
    border:1px solid #fecdd3 !important;
    font-size:13px !important;
    font-weight:950 !important;
    box-shadow:none !important;
}

.question-delete-btn:hover,
.tool-btn.danger:hover{
    background:#be123c !important;
    color:#fff !important;
}

.section-action-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.section-edit-pill{
    background:color-mix(in srgb,var(--accent) 14%,white);
    color:var(--accent);
    border-radius:999px;
    padding:8px 14px;
    font-weight:900;
}

.section-delete-form{
    margin:0;
}

.section-delete-btn{
    border:1px solid #fecdd3;
    background:#fff1f2;
    color:#be123c;
    border-radius:999px;
    height:38px;
    padding:0 16px;
    font-weight:950;
    cursor:pointer;
    transition:.18s ease;
}

.section-delete-btn:hover{
    background:#be123c;
    color:#fff;
    transform:translateY(-1px);
}

.section-editor summary{
    gap:14px;
}

@media(max-width:760px){
    .section-editor summary{
        flex-direction:column;
        align-items:flex-start !important;
    }

    .section-action-row{
        width:100%;
    }

    .section-edit-pill,
    .section-delete-btn{
        flex:1;
        text-align:center;
        justify-content:center;
    }
}


/* FORM RAY - RAPIHKAN DELETE QUESTION SEPERTI DELETE SECTION */
.question-card{
    position:relative;
}

/* Tool row hanya untuk tombol delete, dibuat rapi di kanan atas */
.question-head-row{
    position:absolute !important;
    top:24px !important;
    right:28px !important;
    z-index:4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
}

.question-head-row .handle-dot{
    display:none !important;
}

.question-tools{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
}

/* Sembunyikan tombol tidak kepakai, sisakan delete */
.question-tools .tool-btn:not(.danger){
    display:none !important;
}

.question-tools form{
    margin:0 !important;
}

/* Delete question dibuat sama feel-nya seperti Delete Section */
.question-delete-btn,
.question-tools .tool-btn.danger{
    width:auto !important;
    min-width:132px !important;
    height:46px !important;
    border-radius:999px !important;
    padding:0 22px !important;
    background:#fff1f2 !important;
    color:#be123c !important;
    border:1px solid #fecdd3 !important;
    font-size:15px !important;
    font-weight:950 !important;
    letter-spacing:.2px !important;
    box-shadow:0 12px 26px rgba(190,18,60,.08) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    transition:.18s ease !important;
}

.question-delete-btn:hover,
.question-tools .tool-btn.danger:hover{
    background:#be123c !important;
    color:#fff !important;
    border-color:#be123c !important;
    transform:translateY(-1px) !important;
    box-shadow:0 16px 32px rgba(190,18,60,.18) !important;
}

/* Biar tombol Edit dan Delete tidak tabrakan */
.question-summary{
    padding-right:170px !important;
}

.question-summary .edit-btn{
    margin-right:0 !important;
}

@media(max-width:760px){
    .question-head-row{
        position:static !important;
        justify-content:flex-end !important;
        margin-bottom:14px !important;
    }

    .question-summary{
        padding-right:0 !important;
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    .question-summary .edit-btn{
        width:100% !important;
        margin-top:12px !important;
    }

    .question-delete-btn,
    .question-tools .tool-btn.danger{
        width:100% !important;
        min-width:100% !important;
    }

    .question-tools,
    .question-tools form{
        width:100% !important;
    }
}


/* FORM RAY - SEJAJARKAN EDIT DAN DELETE QUESTION */
.question-card{
    position:relative;
}

/* Delete question di kanan atas, sejajar dengan tombol Edit */
.question-head-row{
    position:absolute !important;
    top:92px !important;
    right:28px !important;
    z-index:8 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
}

.question-head-row .handle-dot{
    display:none !important;
}

.question-tools{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}

.question-tools .tool-btn:not(.danger){
    display:none !important;
}

.question-tools form{
    margin:0 !important;
}

/* Tombol Delete dibuat sama tinggi dan style dengan Delete Section */
.question-delete-btn,
.question-tools .tool-btn.danger{
    width:auto !important;
    min-width:138px !important;
    height:54px !important;
    border-radius:999px !important;
    padding:0 26px !important;
    background:#fff1f2 !important;
    color:#be123c !important;
    border:1px solid #fecdd3 !important;
    font-size:16px !important;
    font-weight:950 !important;
    letter-spacing:.2px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    box-shadow:0 12px 28px rgba(190,18,60,.08) !important;
    transition:.18s ease !important;
}

.question-delete-btn:hover,
.question-tools .tool-btn.danger:hover{
    background:#be123c !important;
    color:#fff !important;
    border-color:#be123c !important;
    transform:translateY(-1px) !important;
}

/* Tombol Edit juga disejajarkan di kanan agar satu baris dengan Delete */
.question-summary{
    display:grid !important;
    grid-template-columns:1fr auto auto !important;
    align-items:center !important;
    column-gap:14px !important;
    padding-right:0 !important;
}

.question-summary .edit-btn{
    grid-column:2 !important;
    min-width:118px !important;
    height:54px !important;
    border-radius:999px !important;
    margin:0 156px 0 0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Supaya area judul tidak tertabrak tombol */
.question-summary > div:first-child{
    padding-right:24px !important;
}

/* Untuk card yang agak pendek, tambah ruang kanan rapi */
.question-card{
    min-height:250px;
}

@media(max-width:900px){
    .question-head-row{
        position:static !important;
        margin:0 0 12px !important;
        justify-content:flex-end !important;
    }

    .question-summary{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:14px !important;
    }

    .question-summary .edit-btn{
        width:100% !important;
        margin:0 !important;
    }

    .question-tools,
    .question-tools form,
    .question-delete-btn,
    .question-tools .tool-btn.danger{
        width:100% !important;
        min-width:100% !important;
    }
}


/* FORM RAY - FINAL ALIGN EDIT + DELETE QUESTION BUTTONS */
/* Paksa Edit dan Delete jadi satu garis kanan atas card pertanyaan */
.question-card{
    position:relative !important;
    min-height:250px !important;
}

/* Tombol Delete question */
.question-head-row{
    position:absolute !important;
    top:96px !important;
    right:28px !important;
    z-index:20 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.question-head-row .handle-dot{
    display:none !important;
}

.question-tools{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
}

.question-tools .tool-btn:not(.danger){
    display:none !important;
}

.question-tools form{
    margin:0 !important;
    padding:0 !important;
}

/* Delete dibuat sama ukuran dengan tombol Edit */
.question-delete-btn,
.question-tools .tool-btn.danger{
    min-width:132px !important;
    width:132px !important;
    height:54px !important;
    border-radius:999px !important;
    padding:0 22px !important;
    background:#fff1f2 !important;
    color:#be123c !important;
    border:1px solid #fecdd3 !important;
    font-size:16px !important;
    font-weight:950 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    box-shadow:0 12px 28px rgba(190,18,60,.08) !important;
    transition:.18s ease !important;
}

.question-delete-btn:hover,
.question-tools .tool-btn.danger:hover{
    background:#be123c !important;
    color:#fff !important;
    border-color:#be123c !important;
    transform:translateY(-1px) !important;
}

/* Tombol Edit dipindahkan absolute juga supaya benar-benar sejajar */
.question-summary{
    position:static !important;
    display:block !important;
    padding-right:320px !important;
}

.question-summary .edit-btn{
    position:absolute !important;
    top:96px !important;
    right:174px !important;
    z-index:21 !important;
    min-width:132px !important;
    width:132px !important;
    height:54px !important;
    margin:0 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Judul dan option tidak ketabrak tombol */
.question-summary > div:first-child{
    max-width:calc(100% - 330px) !important;
}

/* Mobile: tombol turun ke bawah, full width, tetap rapi */
@media(max-width:900px){
    .question-card{
        min-height:auto !important;
    }

    .question-head-row,
    .question-summary .edit-btn{
        position:static !important;
        top:auto !important;
        right:auto !important;
        width:100% !important;
        min-width:100% !important;
    }

    .question-summary{
        display:flex !important;
        flex-direction:column !important;
        gap:14px !important;
        padding-right:0 !important;
    }

    .question-summary > div:first-child{
        max-width:100% !important;
    }

    .question-summary .edit-btn{
        order:2 !important;
    }

    .question-head-row{
        order:3 !important;
        margin-top:14px !important;
    }

    .question-tools,
    .question-tools form,
    .question-delete-btn,
    .question-tools .tool-btn.danger{
        width:100% !important;
        min-width:100% !important;
    }
}


/* FORM RAY - EDIT QUESTION BUTTON SAME AS EDIT SECTION */
.question-summary .edit-btn,
.edit-btn{
    background:color-mix(in srgb,var(--accent) 14%,white) !important;
    color:var(--accent) !important;
    border:1px solid color-mix(in srgb,var(--accent) 22%,white) !important;
    box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 10%,transparent) !important;
    font-weight:950 !important;
}

.question-summary .edit-btn:hover,
.edit-btn:hover{
    background:color-mix(in srgb,var(--accent) 22%,white) !important;
    color:var(--accent) !important;
    border-color:color-mix(in srgb,var(--accent) 34%,white) !important;
    transform:translateY(-1px) !important;
}

/* Pastikan tombol Edit yang disejajarkan tetap pakai style pink, bukan hitam */
.question-summary .edit-btn{
    min-width:132px !important;
    width:132px !important;
    height:54px !important;
    border-radius:999px !important;
}


/* FORM RAY - SAFE DELETE FORM UI */
.form-tile-manage{position:relative;display:flex;flex-direction:column}
.form-tile-link{display:block;color:inherit}
.tile-actions{display:flex;align-items:center;gap:10px;padding:0 20px 20px;margin-top:auto}
.tile-actions form{margin:0}
.tile-open-btn,.tile-delete-btn{height:38px;border-radius:999px;padding:0 15px;border:0;font-weight:950;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tile-open-btn{background:var(--soft-theme);color:#7a4f00;border:1px solid color-mix(in srgb,var(--accent2) 35%,white)}
.tile-open-btn.public{background:color-mix(in srgb,var(--accent) 10%,white);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,white)}
.tile-delete-btn{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
.tile-delete-btn:hover{background:#be123c;color:#fff}


/* FORM RAY - PUBLIC SECTION STYLE LIKE MS FORMS */
.section-style-public{
    background:
        radial-gradient(circle at top left, color-mix(in srgb,var(--accent2) 18%,transparent), transparent 32%),
        radial-gradient(circle at top right, color-mix(in srgb,var(--accent) 14%,transparent), transparent 36%),
        var(--page-bg);
}

.section-public-shell{
    max-width:1180px;
    padding:0;
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--accent2) 22%,white);
    box-shadow:0 28px 80px rgba(43,36,56,.08);
}

.section-public-header{
    padding:44px 64px 32px;
    border-bottom:1px solid color-mix(in srgb,var(--accent2) 22%,white);
    background:linear-gradient(135deg,#fff, color-mix(in srgb,var(--accent2) 8%,white));
}

.public-section-block{
    background:#fff;
    border-bottom:1px solid #ece7ee;
}

.public-section-strip{
    min-height:58px;
    display:flex;
    align-items:center;
    padding:0 64px;
    background:#f3f3f4;
    color:#333746;
    font-size:17px;
    font-weight:650;
    border-bottom:1px solid #e9e9ec;
}

.public-section-content{
    padding:56px 84px 44px;
}

.public-section-content h2{
    font-size:30px;
    line-height:1.2;
    margin:0 0 46px;
    color:var(--ink);
    font-weight:950;
}

.section-article-box{
    margin:0 0 36px;
    border-radius:0;
    background:#f3f6fb;
    border:0;
    padding:28px;
    color:#243044;
}

.public-numbered-question{
    margin:0 0 54px;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
}

.public-question-title{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:22px;
    padding:0;
    background:transparent;
    border:0;
    color:var(--ink);
    font-weight:700;
    font-size:22px;
    line-height:1.45;
}

.public-question-title .question-number{
    min-width:30px;
    font-weight:800;
    color:var(--ink);
}

.public-question-title .question-text{
    font-weight:650;
}

.public-question-title b{
    color:#be123c;
    font-weight:900;
}

.public-question-title em{
    margin-left:8px;
    color:var(--accent);
    font-style:normal;
    font-weight:850;
}

.public-answer-area{
    padding-left:30px;
}

.public-answer-area input[type="text"],
.public-answer-area input[type="email"],
.public-answer-area input[type="number"],
.public-answer-area input[type="date"],
.public-answer-area input[type="time"],
.public-answer-area textarea,
.public-answer-area select{
    width:100%;
    max-width:760px;
    min-height:58px;
    border:0;
    border-radius:4px;
    background:#f4f4f5;
    padding:0 18px;
    font-size:17px;
    color:var(--ink);
    outline:none;
}

.public-answer-area textarea{
    padding:18px;
    min-height:130px;
}

.public-answer-area input:focus,
.public-answer-area textarea:focus,
.public-answer-area select:focus{
    box-shadow:inset 0 -3px 0 var(--accent);
    background:#f7f7f8;
}

.public-answer-area .choice{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:18px 0;
    font-size:19px;
    color:var(--ink);
    line-height:1.4;
}

.public-answer-area .choice input{
    width:24px;
    height:24px;
    margin-top:2px;
    accent-color:var(--accent);
}

.public-submit-wrap{
    padding:0 84px 56px;
}

.public-question-image{
    margin:0 0 22px 30px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e8e3ef;
    width:max-content;
    max-width:calc(100% - 30px);
    background:#fff;
}

.public-question-image img{
    display:block;
    max-width:min(520px,100%);
    max-height:320px;
    object-fit:contain;
}

.public-option-image{
    display:block;
    margin-top:8px;
}

.public-option-image img{
    max-width:180px;
    max-height:120px;
    border-radius:16px;
    border:1px solid #e8e3ef;
    object-fit:cover;
}

.dropdown-option-images{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:12px;
}

.dropdown-option-images div{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:#fff;
    border:1px solid #e8e3ef;
    border-radius:16px;
    padding:10px;
    font-weight:800;
}

.dropdown-option-images img{
    width:140px;
    height:90px;
    border-radius:12px;
    object-fit:cover;
}

@media(max-width:760px){
    .section-public-shell{
        border-radius:0;
        max-width:100%;
    }

    .section-public-header,
    .public-section-strip{
        padding-left:24px;
        padding-right:24px;
    }

    .public-section-content{
        padding:36px 24px;
    }

    .public-section-content h2{
        font-size:25px;
        margin-bottom:34px;
    }

    .public-question-title{
        font-size:19px;
    }

    .public-answer-area{
        padding-left:0;
    }

    .public-submit-wrap{
        padding:0 24px 40px;
    }

    .public-question-image{
        margin-left:0;
        max-width:100%;
    }
}


/* FORM RAY - RESPONSE SEARCH + DETECTED NAME UI */
.response-search-form{
    margin:24px 0 28px;
}

.response-search-box{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid color-mix(in srgb,var(--accent) 18%,white);
    border-radius:999px;
    padding:10px 12px 10px 18px;
    box-shadow:0 16px 42px rgba(43,36,56,.06);
}

.response-search-box span{
    font-size:18px;
}

.response-search-box input{
    flex:1;
    border:0;
    outline:0;
    min-height:44px;
    font-size:16px;
    color:var(--ink);
    background:transparent;
}

.response-search-box button,
.response-search-box a{
    height:44px;
    border:0;
    border-radius:999px;
    padding:0 18px;
    font-weight:950;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.response-search-box button{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
}

.response-search-box a{
    background:#fff1f2;
    color:#be123c;
    border:1px solid #fecdd3;
}

.response-email{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

@media(max-width:760px){
    .response-search-box{
        border-radius:24px;
        flex-wrap:wrap;
    }

    .response-search-box input{
        min-width:100%;
        order:2;
    }

    .response-search-box button,
    .response-search-box a{
        flex:1;
        order:3;
    }
}


/* FORM RAY - TIMER EXPIRED LOCK */
.expired-lock{
    position:fixed;
    inset:0;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(255,248,253,.78);
    backdrop-filter:blur(10px);
}

.expired-card{
    max-width:560px;
    width:100%;
    border-radius:34px;
    padding:42px;
    text-align:center;
    background:#fff;
    border:1px solid color-mix(in srgb,var(--accent) 20%,white);
    box-shadow:0 30px 100px rgba(43,36,56,.18);
}

.expired-card span{
    width:72px;
    height:72px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    font-size:32px;
    box-shadow:0 16px 38px color-mix(in srgb,var(--accent) 26%,transparent);
}

.expired-card h1{
    margin:0 0 10px;
    color:var(--ink);
    font-size:32px;
    line-height:1.2;
    font-weight:950;
}

.expired-card p{
    margin:0;
    color:var(--muted);
    font-size:17px;
    line-height:1.6;
}


/* FORM RAY - COUNTDOWN TIMER FIX */
.timer-progress span,
#timerProgress{
    display:block;
    height:100%;
    width:100%;
    transition:width .35s linear;
}

.timer-clock strong{
    min-width:64px;
    display:inline-block;
    text-align:left;
}


/* RAYFORM LOGO PATCH */
.logo{
    gap:12px !important;
    min-height:46px;
}

.brand-logo-img{
    display:block;
    height:34px;
    width:auto;
    max-width:190px;
    object-fit:contain;
}

.main-header .brand-logo-img{
    height:36px;
}

.logo-mark{
    display:none !important;
}

@media(max-width:640px){
    .brand-logo-img{
        height:30px;
        max-width:150px;
    }

    .main-header .brand-logo-img{
        height:31px;
    }
}


/* RAYFORM LOGO + CLOSED PAGE PATCH */
.logo svg,
.application-logo svg,
.auth-logo svg{
    display:none !important;
}

.logo{
    gap:12px !important;
    min-height:46px;
}

.brand-logo-img{
    display:block;
    height:34px;
    width:auto;
    max-width:190px;
    object-fit:contain;
}

.main-header .brand-logo-img{
    height:36px;
}

.logo-mark{
    display:none !important;
}

.closed-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    background:var(--page-bg);
}

.closed-form-card{
    width:min(680px,100%);
    background:#fff;
    border:1px solid color-mix(in srgb,var(--accent) 18%,white);
    border-radius:36px;
    padding:46px;
    text-align:center;
    box-shadow:0 30px 90px rgba(43,36,56,.12);
}

.closed-logo{
    display:block;
    height:40px;
    width:auto;
    margin:0 auto 24px;
}

.closed-icon{
    width:76px;
    height:76px;
    margin:0 auto 18px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:34px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:0 18px 40px color-mix(in srgb,var(--accent) 28%,transparent);
}

.closed-form-card h1{
    margin:0 0 12px;
    font-size:34px;
    font-weight:950;
    color:var(--ink);
}

.closed-form-card p{
    margin:0 auto;
    max-width:520px;
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
}

@media(max-width:640px){
    .brand-logo-img{
        height:30px;
        max-width:150px;
    }

    .main-header .brand-logo-img{
        height:31px;
    }

    .closed-form-card{
        padding:34px 22px;
        border-radius:28px;
    }
}



/* =========================================================
   RAYFORM BLUE THEME PATCH
   Primary  : #0165FE
   Secondary: #0A2449
   Note: template cards/kotak kebutuhan tetap pakai warna aslinya.
========================================================= */

:root{
    --rf-primary:#0165FE;
    --rf-secondary:#0A2449;
    --rf-sky:#EAF4FF;
    --rf-soft:#F5FAFF;
    --rf-border:#CFE2FF;
    --rf-muted:#64748B;
}

.theme-scope{
    --accent:#0165FE;
    --accent2:#20D2FF;
    --ink:#0A2449;
    --muted:#64748B;
    --soft-theme:#EAF4FF;
    --page-bg:
        radial-gradient(circle at 10% 10%, rgba(1,101,254,.16), transparent 26%),
        radial-gradient(circle at 88% 4%, rgba(32,210,255,.18), transparent 24%),
        linear-gradient(135deg,#F7FBFF 0%,#EEF6FF 46%,#FFFFFF 100%);
}

/* Global page background */
body{
    color:var(--rf-secondary);
    background:
        radial-gradient(circle at top left, rgba(1,101,254,.12), transparent 28%),
        radial-gradient(circle at top right, rgba(32,210,255,.14), transparent 28%),
        linear-gradient(135deg,#F7FBFF,#FFFFFF 48%,#EEF6FF) !important;
}

/* Header lebih clean dan premium */
.main-header{
    background:rgba(255,255,255,.86) !important;
    border-bottom:1px solid rgba(1,101,254,.12) !important;
    backdrop-filter:blur(18px) !important;
    box-shadow:0 12px 40px rgba(10,36,73,.06) !important;
}

.main-header nav a{
    color:var(--rf-secondary) !important;
    font-weight:900 !important;
}

.main-header nav a:hover{
    color:var(--rf-primary) !important;
}

.nav-cta,
.btn.primary,
.preview-link-btn,
.submit-wide,
.response-search-box button{
    background:linear-gradient(135deg,#0165FE,#20D2FF) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 18px 38px rgba(1,101,254,.22) !important;
}

.btn.pink,
.btn.outline{
    background:#fff !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.22) !important;
    box-shadow:0 14px 34px rgba(10,36,73,.06) !important;
}

.btn.pink:hover,
.btn.outline:hover,
.nav-cta:hover{
    transform:translateY(-2px);
}

/* Home hero biru elegan */
.home-wrap{
    background:
        radial-gradient(circle at 8% 8%, rgba(1,101,254,.12), transparent 26%),
        radial-gradient(circle at 88% 14%, rgba(32,210,255,.13), transparent 30%),
        linear-gradient(135deg,#F7FBFF,#FFFFFF 50%,#EEF6FF) !important;
}

.home-hero{
    min-height:640px;
    align-items:center;
}

.badge-soft{
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.22) !important;
    background:rgba(255,255,255,.78) !important;
    box-shadow:0 14px 36px rgba(1,101,254,.10) !important;
}

.home-hero h1{
    color:var(--rf-secondary) !important;
    letter-spacing:-.055em;
}

.home-hero p,
.section-title p{
    color:var(--rf-muted) !important;
}

.hero-benefits span{
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.18) !important;
    background:rgba(255,255,255,.82) !important;
    box-shadow:0 12px 30px rgba(10,36,73,.06) !important;
}

.hero-preview{
    background:
        radial-gradient(circle at 90% 8%, rgba(32,210,255,.28), transparent 28%),
        linear-gradient(145deg,#EAF4FF,#FFFFFF 50%,#DCEBFF) !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 34px 80px rgba(10,36,73,.12) !important;
}

.preview-top{
    background:linear-gradient(90deg,#0165FE,#20D2FF) !important;
}

.preview-card{
    border:1px solid rgba(1,101,254,.12) !important;
    box-shadow:0 26px 70px rgba(10,36,73,.10) !important;
}

.preview-badge{
    color:#0165FE !important;
    background:#EAF4FF !important;
}

.preview-card h3{
    color:#0A2449 !important;
}

.fake-line{
    background:linear-gradient(90deg,rgba(1,101,254,.18),rgba(32,210,255,.20)) !important;
}

.preview-mini-row span{
    color:#0165FE !important;
    background:#EAF4FF !important;
    border:1px solid rgba(1,101,254,.15) !important;
}

/* JANGAN ubah warna template card/kotak kebutuhan */
.template-card.t-pink,
.template-card.t-yellow,
.template-card.t-mint,
.template-card.t-purple{
    color:inherit !important;
}

/* Recent form cards */
.recent-section .section-title h2,
.template-section .section-title h2{
    color:#0A2449 !important;
}

.form-tile{
    border:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 22px 60px rgba(10,36,73,.08) !important;
    overflow:hidden;
}

.form-tile:hover{
    transform:translateY(-5px);
    box-shadow:0 28px 72px rgba(10,36,73,.12) !important;
}

.tile-cover{
    background:
        radial-gradient(circle at 72% 34%, rgba(255,255,255,.54), transparent 35%),
        linear-gradient(135deg,#EAF4FF,#DDEBFF 55%,#CFE3FF) !important;
}

.tile-cover.quiz-cover{
    background:
        radial-gradient(circle at 72% 34%, rgba(255,255,255,.54), transparent 35%),
        linear-gradient(135deg,#DDEBFF,#BFD8FF 55%,#8DBBFF) !important;
}

.tile-body h3{
    color:#0A2449 !important;
}

.tile-body p,
.tile-body small{
    color:#64748B !important;
}

.tile-open-btn{
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.18) !important;
}

.tile-open-btn.public{
    background:#0165FE !important;
    color:#fff !important;
}

.tile-delete-btn{
    background:#FFF1F2 !important;
    color:#BE123C !important;
}

/* Builder page tone */
.builder-shell,
.builder-page,
.form-builder-page{
    background:
        radial-gradient(circle at top left, rgba(1,101,254,.11), transparent 28%),
        linear-gradient(135deg,#F7FBFF,#FFFFFF 55%,#EEF6FF) !important;
}

.builder-topbar,
.builder-header,
.form-topbar{
    background:rgba(255,255,255,.88) !important;
    border-bottom:1px solid rgba(1,101,254,.12) !important;
    box-shadow:0 12px 36px rgba(10,36,73,.06) !important;
}

.builder-card,
.title-card,
.section-editor,
.question-card{
    border-color:rgba(1,101,254,.16) !important;
    box-shadow:0 22px 62px rgba(10,36,73,.08) !important;
}

.title-card,
.section-editor,
.question-card{
    background:rgba(255,255,255,.92) !important;
}

.question-card{
    border-top:5px solid #0165FE !important;
}

.question-badge,
.type-badge,
.public-question-title em{
    background:#EAF4FF !important;
    color:#0165FE !important;
}

.add-question-main,
.add-question-toggle,
.add-question-picker summary{
    color:#0165FE !important;
}

.add-question-main .plus,
.add-new-question .plus,
.add-question-toggle .plus{
    background:linear-gradient(135deg,#0165FE,#20D2FF) !important;
    color:#fff !important;
}

.question-summary .edit-btn,
.edit-btn,
.section-edit-pill{
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.18) !important;
    box-shadow:0 12px 28px rgba(1,101,254,.10) !important;
}

.question-summary .edit-btn:hover,
.edit-btn:hover,
.section-edit-pill:hover{
    background:#DCEBFF !important;
    color:#0165FE !important;
}

.section-delete-btn,
.question-delete-btn,
.question-tools .tool-btn.danger,
.tile-delete-btn{
    background:#FFF1F2 !important;
    color:#BE123C !important;
    border:1px solid #FECDD3 !important;
}

.section-delete-btn:hover,
.question-delete-btn:hover,
.question-tools .tool-btn.danger:hover,
.tile-delete-btn:hover{
    background:#BE123C !important;
    color:#fff !important;
}

/* Modal edit question */
.edit-box{
    background:rgba(255,255,255,.96) !important;
}

.edit-box-header{
    background:
        linear-gradient(135deg,rgba(1,101,254,.08),rgba(32,210,255,.08)) !important;
}

.edit-box-header strong{
    color:#0A2449 !important;
}

.option-edit-panel,
.question-edit-panel,
.modal-bottom-save{
    border-color:rgba(1,101,254,.14) !important;
}

.all-save-bottom-btn,
.all-save-btn,
.mini-btn.add-option-btn{
    background:linear-gradient(135deg,#0165FE,#20D2FF) !important;
    color:#fff !important;
    box-shadow:0 16px 36px rgba(1,101,254,.22) !important;
}

/* Public/user form tetap ikut biru */
.section-style-public{
    background:
        radial-gradient(circle at top left, rgba(1,101,254,.14), transparent 28%),
        radial-gradient(circle at top right, rgba(32,210,255,.16), transparent 32%),
        linear-gradient(135deg,#F7FBFF,#EEF6FF 60%,#FFFFFF) !important;
}

.section-public-shell{
    border-color:rgba(1,101,254,.16) !important;
    box-shadow:0 28px 80px rgba(10,36,73,.10) !important;
}

.section-public-header{
    background:linear-gradient(135deg,#FFFFFF,#EAF4FF) !important;
}

.timer-progress span,
#timerProgress{
    background:linear-gradient(90deg,#0165FE,#20D2FF) !important;
}

/* Favicon/logo image size */
.brand-logo-img{
    height:36px !important;
    max-width:210px !important;
}

/* Mobile */
@media(max-width:760px){
    .home-hero{
        min-height:auto;
    }

    .brand-logo-img{
        height:30px !important;
        max-width:160px !important;
    }
}



/* =========================================================
   RAYFORM DEFAULT BLUE FULL DESIGN PATCH
   Primary   #0165FE
   Secondary #0A2449
   Background pages dibuat konsisten, cerah, estetik.
   User form default ikut biru, tapi style custom form tetap bisa override
   melalui .theme-scope inline variables dari builder.
========================================================= */

:root{
    --rf-primary:#0165FE;
    --rf-secondary:#0A2449;
    --rf-cyan:#24D3FF;
    --rf-soft:#F4F8FF;
    --rf-sky:#EAF4FF;
    --rf-line:#D7E7FF;
    --rf-muted:#64748B;
}

/* Background global: hapus nuansa kuning/pink lama */
html,
body{
    min-height:100%;
    color:#0A2449 !important;
    background:
        radial-gradient(circle at 10% -8%, rgba(1,101,254,.16), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(36,211,255,.16), transparent 32%),
        linear-gradient(135deg,#F7FBFF 0%,#FFFFFF 42%,#EEF6FF 100%) !important;
}

/* Semua wrapper utama yang sebelumnya kuning/pink dibuat blue glass */
.home-wrap,
.create-page,
.create-wrap,
.builder-shell,
.builder-page,
.form-builder-page,
.respondent-bg,
.section-style-public,
.responses-page,
.closed-page{
    background:
        radial-gradient(circle at 7% 4%, rgba(1,101,254,.14), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(36,211,255,.15), transparent 32%),
        radial-gradient(circle at 70% 92%, rgba(1,101,254,.08), transparent 30%),
        linear-gradient(135deg,#F7FBFF 0%,#FFFFFF 46%,#EDF6FF 100%) !important;
}

/* Typography */
h1,h2,h3,h4,strong,
.section-title h2,
.home-hero h1,
.title-card h1,
.form-title,
.builder-title{
    color:#0A2449 !important;
}

p,small,.muted,
.home-hero p,
.section-title p,
.tile-body p,
.tile-body small{
    color:#64748B !important;
}

/* Header / topbar */
.main-header,
.builder-topbar,
.builder-header,
.form-topbar,
.topbar,
.app-header{
    background:rgba(255,255,255,.88) !important;
    border-bottom:1px solid rgba(1,101,254,.14) !important;
    backdrop-filter:blur(18px) !important;
    box-shadow:0 14px 42px rgba(10,36,73,.07) !important;
}

.main-header nav a,
.builder-topbar a,
.topbar a{
    color:#0A2449 !important;
}

.main-header nav a:hover,
.builder-topbar a:hover,
.topbar a:hover{
    color:#0165FE !important;
}

/* Tombol utama */
.btn.primary,
.nav-cta,
.preview-link-btn,
.submit-wide,
.response-search-box button,
.create-submit-btn,
button[type="submit"].primary,
.collect-btn,
.publish-btn,
.all-save-bottom-btn,
.all-save-btn{
    background:linear-gradient(135deg,#0165FE 0%,#158CFF 54%,#24D3FF 100%) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 18px 44px rgba(1,101,254,.24) !important;
}

.btn.primary:hover,
.nav-cta:hover,
.preview-link-btn:hover,
.submit-wide:hover,
.response-search-box button:hover,
.create-submit-btn:hover,
button[type="submit"].primary:hover{
    transform:translateY(-2px);
    box-shadow:0 24px 56px rgba(1,101,254,.30) !important;
}

/* Tombol outline/secondary */
.btn.pink,
.btn.outline,
.tile-open-btn,
.question-summary .edit-btn,
.edit-btn,
.section-edit-pill,
.nav-pill,
.preview-btn,
.style-btn,
.settings-btn{
    background:#FFFFFF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.22) !important;
    box-shadow:0 12px 32px rgba(10,36,73,.07) !important;
}

.btn.pink:hover,
.btn.outline:hover,
.tile-open-btn:hover,
.question-summary .edit-btn:hover,
.edit-btn:hover,
.section-edit-pill:hover{
    background:#EAF4FF !important;
    color:#0165FE !important;
    border-color:rgba(1,101,254,.36) !important;
}

/* Delete tetap merah */
.tile-delete-btn,
.section-delete-btn,
.question-delete-btn,
.question-tools .tool-btn.danger,
.delete-btn,
button.danger{
    background:#FFF1F2 !important;
    color:#BE123C !important;
    border:1px solid #FECDD3 !important;
    box-shadow:0 12px 30px rgba(190,18,60,.07) !important;
}

.tile-delete-btn:hover,
.section-delete-btn:hover,
.question-delete-btn:hover,
.question-tools .tool-btn.danger:hover,
.delete-btn:hover,
button.danger:hover{
    background:#BE123C !important;
    color:#fff !important;
}

/* Hero halaman awal */
.home-hero{
    min-height:680px !important;
    padding-top:56px !important;
    padding-bottom:72px !important;
}

.badge-soft{
    background:rgba(255,255,255,.82) !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.24) !important;
    box-shadow:0 16px 42px rgba(1,101,254,.10) !important;
}

.home-hero h1{
    letter-spacing:-.055em !important;
    line-height:1.02 !important;
}

.hero-actions .btn{
    border-radius:999px !important;
}

.hero-benefits span{
    background:rgba(255,255,255,.82) !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.18) !important;
    box-shadow:0 12px 30px rgba(10,36,73,.06) !important;
}

/* Preview illustration di hero */
.hero-preview{
    background:
        radial-gradient(circle at 86% 8%, rgba(36,211,255,.28), transparent 28%),
        radial-gradient(circle at 18% 88%, rgba(1,101,254,.14), transparent 28%),
        linear-gradient(145deg,#EAF4FF 0%,#FFFFFF 52%,#DDEBFF 100%) !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 34px 90px rgba(10,36,73,.13) !important;
}

.preview-top{
    background:linear-gradient(90deg,#0165FE,#24D3FF) !important;
}

.preview-card{
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 28px 80px rgba(10,36,73,.12) !important;
}

.preview-badge{
    color:#0165FE !important;
    background:#EAF4FF !important;
}

.fake-line{
    background:linear-gradient(90deg,rgba(1,101,254,.18),rgba(36,211,255,.22)) !important;
}

.fake-option{
    border-color:rgba(1,101,254,.16) !important;
    background:#fff !important;
}

.preview-mini-row span{
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.14) !important;
}

/* Template cards jangan ubah warna dasar */
.template-card.t-pink,
.template-card.t-yellow,
.template-card.t-mint,
.template-card.t-purple{
    box-shadow:0 20px 54px rgba(10,36,73,.08) !important;
}

/* Recent cards */
.form-tile{
    border:1px solid rgba(1,101,254,.15) !important;
    border-radius:28px !important;
    background:#fff !important;
    box-shadow:0 24px 70px rgba(10,36,73,.08) !important;
    transition:.22s ease !important;
}

.form-tile:hover{
    transform:translateY(-6px) !important;
    box-shadow:0 34px 90px rgba(10,36,73,.13) !important;
}

.tile-cover{
    background:
        radial-gradient(circle at 78% 38%, rgba(255,255,255,.55), transparent 34%),
        linear-gradient(135deg,#EAF4FF 0%,#DCEBFF 58%,#B8D5FF 100%) !important;
}

.tile-cover.quiz-cover{
    background:
        radial-gradient(circle at 78% 38%, rgba(255,255,255,.55), transparent 34%),
        linear-gradient(135deg,#DDEBFF 0%,#BFD8FF 58%,#86B7FF 100%) !important;
}

.tile-body h3{
    color:#0A2449 !important;
}

/* Halaman create form baru */
.create-page,
.create-wrap{
    min-height:100vh !important;
    padding:56px 20px !important;
}

.create-card,
.create-form-card,
.mode-card{
    background:rgba(255,255,255,.90) !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 30px 90px rgba(10,36,73,.10) !important;
    backdrop-filter:blur(14px);
}

.create-card::before,
.create-form-card::before,
.mode-card::before{
    background:linear-gradient(90deg,#0165FE,#24D3FF) !important;
}

.create-card .mode-pill,
.form-mode-pill,
.mode-badge{
    color:#0165FE !important;
    background:#EAF4FF !important;
    border:1px solid rgba(1,101,254,.22) !important;
}

.create-card input,
.create-card textarea,
.create-card select,
.create-form-card input,
.create-form-card textarea,
.create-form-card select,
.mode-card input,
.mode-card textarea,
.mode-card select{
    border:1px solid rgba(1,101,254,.18) !important;
    background:#fff !important;
    color:#0A2449 !important;
}

.create-card input:focus,
.create-card textarea:focus,
.create-form-card input:focus,
.create-form-card textarea:focus{
    border-color:#0165FE !important;
    box-shadow:0 0 0 4px rgba(1,101,254,.10) !important;
}

/* Builder layout background */
.builder-shell,
.builder-page,
.form-builder-page{
    min-height:100vh !important;
}

.builder-main,
.builder-content,
.canvas-wrap{
    background:transparent !important;
}

.sidebar,
.builder-sidebar{
    background:rgba(255,255,255,.82) !important;
    border:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 20px 58px rgba(10,36,73,.08) !important;
}

.sidebar button,
.builder-sidebar button,
.side-action{
    background:#EAF4FF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.12) !important;
}

.sidebar button:first-child,
.builder-sidebar button:first-child,
.side-action.primary{
    background:linear-gradient(135deg,#0165FE,#24D3FF) !important;
    color:#fff !important;
}

/* Kartu builder */
.title-card,
.builder-card,
.section-editor,
.question-card,
.edit-box,
.option-edit-panel,
.question-edit-panel{
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 22px 64px rgba(10,36,73,.08) !important;
}

.title-card,
.builder-card{
    border-radius:32px !important;
}

.section-editor{
    border-radius:28px !important;
}

.question-card{
    border-radius:28px !important;
    border-top:5px solid #0165FE !important;
}

.section-editor summary{
    border-color:rgba(1,101,254,.16) !important;
    background:linear-gradient(135deg,rgba(234,244,255,.82),rgba(255,255,255,.92)) !important;
}

.question-badge,
.type-badge{
    background:#EAF4FF !important;
    color:#0165FE !important;
}

/* Form inputs builder */
.title-card input,
.title-card textarea,
.builder-card input,
.builder-card textarea,
.builder-card select,
.section-editor input,
.section-editor textarea,
.question-card input,
.question-card textarea,
.question-card select,
.edit-box input,
.edit-box textarea,
.edit-box select{
    border:1px solid rgba(1,101,254,.18) !important;
    background:#fff !important;
    color:#0A2449 !important;
}

.title-card input:focus,
.title-card textarea:focus,
.builder-card input:focus,
.builder-card textarea:focus,
.section-editor input:focus,
.section-editor textarea:focus,
.question-card input:focus,
.question-card textarea:focus,
.edit-box input:focus,
.edit-box textarea:focus{
    border-color:#0165FE !important;
    box-shadow:0 0 0 4px rgba(1,101,254,.10) !important;
}

/* Add question */
.add-question-main,
.add-question-toggle,
.add-question-picker summary{
    color:#0165FE !important;
}

.add-question-grid button,
.question-type-card{
    background:#F7FBFF !important;
    border:1px solid rgba(1,101,254,.20) !important;
    color:#0A2449 !important;
}

.add-question-grid button:hover,
.question-type-card:hover{
    background:#EAF4FF !important;
    border-color:#0165FE !important;
}

/* Popup edit */
.edit-box{
    background:rgba(255,255,255,.97) !important;
}

.edit-box-header{
    background:linear-gradient(135deg,rgba(1,101,254,.08),rgba(36,211,255,.10)) !important;
}

.edit-box-header span,
.edit-box-header strong{
    color:#0A2449 !important;
}

.modal-bottom-save{
    background:rgba(247,251,255,.96) !important;
    border-top:1px solid rgba(1,101,254,.12) !important;
}

.auto-score-pill,
.option-score-pill{
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.16) !important;
}

/* Public/user form default blue.
   Tetap bisa berubah kalau owner pilih style karena .theme-scope inline variable masih dipakai,
   tapi default fallback sekarang biru. */
.respondent-bg,
.section-style-public{
    background:
        radial-gradient(circle at 8% 0%, rgba(1,101,254,.14), transparent 30%),
        radial-gradient(circle at 100% 8%, rgba(36,211,255,.16), transparent 34%),
        linear-gradient(135deg,#F7FBFF 0%,#EEF6FF 48%,#FFFFFF 100%) !important;
}

.section-public-shell,
.respondent-shell{
    background:#fff !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 30px 90px rgba(10,36,73,.11) !important;
}

.section-public-header,
.respondent-header{
    background:
        radial-gradient(circle at 90% 0%, rgba(36,211,255,.12), transparent 34%),
        linear-gradient(135deg,#FFFFFF,#EAF4FF) !important;
    border-bottom:1px solid rgba(1,101,254,.13) !important;
}

.public-section-strip{
    background:#EAF4FF !important;
    color:#0A2449 !important;
    border-bottom:1px solid rgba(1,101,254,.12) !important;
}

.public-section-content h2,
.public-question-title,
.public-question-title .question-number,
.public-question-title .question-text{
    color:#0A2449 !important;
}

.public-question-title em{
    background:transparent !important;
    color:#0165FE !important;
}

.public-answer-area input[type="text"],
.public-answer-area input[type="email"],
.public-answer-area input[type="number"],
.public-answer-area input[type="date"],
.public-answer-area input[type="time"],
.public-answer-area textarea,
.public-answer-area select{
    background:#F4F8FF !important;
    border:1px solid rgba(1,101,254,.12) !important;
    color:#0A2449 !important;
    border-radius:14px !important;
}

.public-answer-area input:focus,
.public-answer-area textarea:focus,
.public-answer-area select:focus{
    box-shadow:0 0 0 4px rgba(1,101,254,.12) !important;
    border-color:#0165FE !important;
    background:#fff !important;
}

.public-answer-area .choice input{
    accent-color:#0165FE !important;
}

.rating-user{
    border-color:rgba(1,101,254,.18) !important;
    background:#fff !important;
}

.rating-star{
    color:#0165FE !important;
}

.timer-strip{
    background:#fff !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 18px 50px rgba(10,36,73,.08) !important;
}

.timer-progress span,
#timerProgress{
    background:linear-gradient(90deg,#0165FE,#24D3FF) !important;
}

/* Responses */
.responses-page{
    background:#fff !important;
    border:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 28px 80px rgba(10,36,73,.10) !important;
}

.score-summary-card{
    background:linear-gradient(135deg,#0165FE,#24D3FF) !important;
}

/* Back link */
.back-link,
a[href*="back"],
.create-page > a,
.create-wrap > a{
    color:#0A2449 !important;
    font-weight:900 !important;
}

.back-link:hover,
.create-page > a:hover,
.create-wrap > a:hover{
    color:#0165FE !important;
}

/* Logo */
.brand-logo-img{
    height:38px !important;
    max-width:220px !important;
}

/* Responsive */
@media(max-width:900px){
    .home-hero{
        min-height:auto !important;
    }
}

@media(max-width:640px){
    .brand-logo-img{
        height:30px !important;
        max-width:160px !important;
    }
}


/* =========================================================
   RAYFORM FIX - BUTTON QUESTION TIDAK NEMBUS NAVBAR
   Masalah: tombol Edit/Delete question pakai absolute dengan z-index tinggi,
   jadi ketika scroll dia bisa muncul di atas navbar.
========================================================= */

/* Navbar selalu di atas semua konten builder */
.main-header,
.builder-topbar,
.builder-header,
.form-topbar,
.topbar,
.app-header{
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
    isolation:isolate !important;
}

/* Area canvas builder jadi layer sendiri, di bawah navbar */
.builder-shell,
.builder-page,
.form-builder-page,
.builder-main,
.builder-content,
.canvas-wrap,
.form-canvas,
.builder-canvas{
    position:relative !important;
    z-index:1 !important;
    overflow:visible !important;
}

/* Card question jadi layer normal, tidak boleh menembus navbar */
.question-card{
    position:relative !important;
    z-index:2 !important;
    overflow:hidden !important;
}

/* Tombol Edit/Delete tidak boleh fixed/terlalu tinggi */
.question-head-row{
    position:absolute !important;
    top:92px !important;
    right:28px !important;
    z-index:5 !important;
}

.question-summary .edit-btn{
    position:absolute !important;
    top:92px !important;
    right:174px !important;
    z-index:6 !important;
}

/* Pastikan tombol tetap di dalam area card */
.question-delete-btn,
.question-tools .tool-btn.danger,
.question-summary .edit-btn{
    max-width:132px !important;
}

/* Tambah ruang atas card supaya tombol tidak kepotong saat overflow hidden */
.question-card{
    padding-top:52px !important;
}

/* Jika card aktif/edit modal, modal tetap boleh di atas navbar hanya kalau overlay */
.edit-box,
.question-edit-modal,
.modal-backdrop,
.modal-panel{
    z-index:10000 !important;
}

/* Tetapi tombol biasa di card tetap rendah */
.question-card .question-head-row,
.question-card .edit-btn{
    z-index:5 !important;
}

/* Mobile tetap aman */
@media(max-width:900px){
    .question-card{
        overflow:visible !important;
        padding-top:24px !important;
    }

    .question-head-row,
    .question-summary .edit-btn{
        position:static !important;
        top:auto !important;
        right:auto !important;
        z-index:1 !important;
    }
}


/* RAYFORM AUTH HEADER */
.owner-chip{
    min-height:42px;
    border-radius:999px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#EAF4FF;
    color:#0A2449;
    border:1px solid rgba(1,101,254,.16);
    font-weight:900;
}

.logout-inline{
    margin:0;
}

.logout-inline button{
    min-height:42px;
    border-radius:999px;
    padding:0 16px;
    border:1px solid #FECDD3;
    background:#FFF1F2;
    color:#BE123C;
    font-weight:950;
    cursor:pointer;
}

.logout-inline button:hover{
    background:#BE123C;
    color:#fff;
}


/* PATCH: Home navbar lebih rapi + Create tidak biru */
.compact-header{
    background:#FFFFFF !important;
    border-bottom:1px solid rgba(10,36,73,.08) !important;
    box-shadow:0 10px 30px rgba(10,36,73,.05) !important;
    gap:24px !important;
}

.compact-header .header-nav{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.compact-header .header-links,
.compact-header .header-user-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.compact-header .header-link,
.compact-header .owner-chip,
.compact-header .logout-inline button{
    min-height:46px;
    padding:0 18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    transition:all .2s ease;
}

.compact-header .header-link{
    background:#FFFFFF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 8px 22px rgba(10,36,73,.04) !important;
}

.compact-header .header-link:hover{
    color:#0165FE !important;
    border-color:rgba(1,101,254,.26) !important;
    transform:translateY(-1px);
}

.compact-header .create-link{
    background:#FFFFFF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.20) !important;
    box-shadow:0 10px 26px rgba(10,36,73,.05) !important;
}

.compact-header .create-link:hover{
    background:#F8FBFF !important;
    color:#0165FE !important;
}

.compact-header .owner-chip{
    background:#FFFFFF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 8px 22px rgba(10,36,73,.04) !important;
}

.compact-header .logout-inline button{
    background:#FFFFFF !important;
    color:#BE123C !important;
    border:1px solid #FBCFE8 !important;
    box-shadow:0 8px 22px rgba(190,18,60,.05) !important;
}

.compact-header .logout-inline button:hover{
    background:#FFF1F2 !important;
    color:#BE123C !important;
    transform:translateY(-1px);
}

@media (max-width: 980px){
    .compact-header{
        align-items:flex-start !important;
    }

    .compact-header .header-nav{
        flex-direction:column;
        align-items:flex-start;
    }

    .compact-header .header-links,
    .compact-header .header-user-actions{
        width:100%;
    }
}


/* =========================================================
   FINAL PATCH - HOME NAVBAR RAPI + CREATE PUTIH
   Fix tombol Create yang masih biru.
   Target khusus halaman awal/home saja.
========================================================= */

.home-clean-header{
    min-height:76px !important;
    padding:12px 36px !important;
    background:#FFFFFF !important;
    border-bottom:1px solid rgba(10,36,73,.08) !important;
    box-shadow:0 10px 30px rgba(10,36,73,.045) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:22px !important;
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
}

.home-clean-header .logo{
    flex:0 0 auto !important;
}

.home-clean-header .brand-logo-img{
    height:42px !important;
    max-width:230px !important;
    object-fit:contain !important;
}

.home-nav-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:16px !important;
    flex:1 !important;
    min-width:0 !important;
}

.home-nav-menu,
.home-account-menu{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}

.home-clean-header .home-nav-link,
.home-clean-header .home-create-link,
.home-clean-header .nav-cta,
.home-clean-header nav .nav-cta,
.home-user-chip,
.home-logout-form button{
    min-height:44px !important;
    height:44px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight:950 !important;
    line-height:1 !important;
    text-decoration:none !important;
    transition:all .18s ease !important;
    box-shadow:0 8px 22px rgba(10,36,73,.045) !important;
}

/* Link biasa */
.home-clean-header .home-nav-link{
    background:#FFFFFF !important;
    color:#0A2449 !important;
    border:1px solid transparent !important;
}

/* Create: putih, bukan biru */
.home-clean-header .home-create-link,
.home-clean-header .nav-cta,
.home-clean-header nav .nav-cta{
    background:#FFFFFF !important;
    background-image:none !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.18) !important;
}

/* User chip */
.home-user-chip{
    background:#F8FBFF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.18) !important;
}

/* Logout tetap soft red */
.home-logout-form{
    margin:0 !important;
}

.home-logout-form button{
    cursor:pointer !important;
    background:#FFFFFF !important;
    color:#BE123C !important;
    border:1px solid #FBCFE8 !important;
}

.home-clean-header .home-nav-link:hover,
.home-clean-header .home-create-link:hover,
.home-clean-header .nav-cta:hover,
.home-clean-header nav .nav-cta:hover,
.home-user-chip:hover{
    transform:translateY(-1px) !important;
    background:#F8FBFF !important;
    color:#0165FE !important;
    border-color:rgba(1,101,254,.28) !important;
}

.home-logout-form button:hover{
    transform:translateY(-1px) !important;
    background:#FFF1F2 !important;
    color:#BE123C !important;
    border-color:#FDA4AF !important;
}

/* Beri transisi halus ke background bawah header */
.home-wrap{
    border-top:0 !important;
}

/* Mobile/tablet */
@media(max-width:900px){
    .home-clean-header{
        padding:14px 18px !important;
        align-items:flex-start !important;
        flex-direction:column !important;
    }

    .home-nav-wrap{
        width:100% !important;
        align-items:flex-start !important;
        justify-content:flex-start !important;
        flex-direction:column !important;
    }

    .home-nav-menu,
    .home-account-menu{
        justify-content:flex-start !important;
    }
}

@media(max-width:560px){
    .home-clean-header .brand-logo-img{
        height:34px !important;
        max-width:180px !important;
    }

    .home-clean-header .home-nav-link,
    .home-clean-header .home-create-link,
    .home-user-chip,
    .home-logout-form button{
        height:40px !important;
        min-height:40px !important;
        padding:0 14px !important;
        font-size:14px !important;
    }
}


/* =========================================================
   PATCH - FIX POPUP BLUR SEMUA / MODAL TIDAK KELIHATAN
   Masalah: background sudah blur, tapi popup ikut ketutup/blur.
   Fix: backdrop di bawah, modal panel selalu di atas dan tidak ikut blur.
========================================================= */

/* Layer blur background */
.modal-backdrop,
.popup-backdrop,
.edit-backdrop,
.modal-overlay,
.question-modal-backdrop,
body::before{
    z-index:9990 !important;
}

/* Kalau ada overlay custom, jangan menutup panel */
.modal-backdrop,
.popup-backdrop,
.edit-backdrop,
.question-modal-backdrop{
    position:fixed !important;
    inset:0 !important;
    background:rgba(10,36,73,.42) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
}

/* Popup / modal harus di atas blur */
.edit-box,
.question-edit-modal,
.modal-panel,
.popup-panel,
.question-modal,
.edit-modal,
.modal-content{
    position:relative !important;
    z-index:10050 !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    opacity:1 !important;
    transform:none;
}

/* Khusus edit question yang muncul sebagai popup */
.edit-box{
    background:#FFFFFF !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 36px 100px rgba(10,36,73,.24) !important;
}

/* Wrapper modal dipusatkan dan tidak ikut blur */
.question-edit-modal,
.edit-modal,
.popup-modal,
.modal-wrap{
    position:fixed !important;
    inset:0 !important;
    z-index:10040 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:32px !important;
    overflow:auto !important;
    filter:none !important;
    backdrop-filter:none !important;
}

/* Jika project memakai target id edit, paksa panelnya terlihat */
div[id^="edit"]{
    position:relative;
}

/* Saat popup dibuka, background boleh blur, tapi modal tidak */
body.modal-open .builder-shell,
body.modal-open .builder-page,
body.modal-open .form-builder-page,
body.modal-open .builder-main,
body.modal-open .canvas-wrap{
    filter:blur(6px);
}

body.modal-open .question-edit-modal,
body.modal-open .edit-modal,
body.modal-open .popup-modal,
body.modal-open .modal-wrap,
body.modal-open .edit-box{
    filter:none !important;
}

/* Fallback untuk kasus overlay blur menempel di parent */
.has-popup-open .builder-shell,
.has-popup-open .builder-page,
.has-popup-open .form-builder-page{
    filter:none !important;
}

.has-popup-open .popup-blur-target{
    filter:blur(6px) !important;
}

/* Pastikan tombol close popup bisa diklik */
.edit-box-header .close-btn,
.modal-close,
.popup-close,
button[aria-label="Close"],
.close-edit{
    position:relative !important;
    z-index:10070 !important;
}

/* Mobile */
@media(max-width:700px){
    .question-edit-modal,
    .edit-modal,
    .popup-modal,
    .modal-wrap{
        padding:16px !important;
        align-items:flex-start !important;
    }

    .edit-box{
        width:100% !important;
        max-width:100% !important;
        margin:18px auto !important;
    }
}


/* =========================================================
   FINAL FIX - EDIT POPUP MUNCUL DI ATAS BACKGROUND BLUR
   Background blur boleh, tapi form edit harus muncul jelas di tengah.
========================================================= */

/* Overlay popup edit khusus Rayform */
#rayform-edit-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:34px !important;
    overflow:auto !important;
}

#rayform-edit-overlay.is-open{
    display:flex !important;
}

.rayform-edit-backdrop{
    position:fixed !important;
    inset:0 !important;
    background:rgba(10,36,73,.46) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    z-index:1 !important;
}

.rayform-edit-stage{
    position:relative !important;
    z-index:2 !important;
    width:min(1120px, calc(100vw - 68px)) !important;
    max-height:calc(100vh - 68px) !important;
    overflow:auto !important;
    border-radius:30px !important;
}

/* Edit box yang dipindahkan ke overlay */
#rayform-edit-overlay .edit-box,
#rayform-edit-overlay .question-edit-panel,
#rayform-edit-overlay .question-edit-modal,
#rayform-edit-overlay .edit-modal,
#rayform-edit-overlay [id^="edit"]{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:3 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    background:#FFFFFF !important;
    border:1px solid rgba(1,101,254,.18) !important;
    border-radius:30px !important;
    box-shadow:0 38px 120px rgba(10,36,73,.30) !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
}

/* Saat popup aktif, jangan blur navbar saja. Blur hanya konten belakang via overlay backdrop. */
body.rayform-popup-open .main-header,
body.rayform-popup-open .builder-topbar,
body.rayform-popup-open .builder-header,
body.rayform-popup-open .form-topbar,
body.rayform-popup-open .topbar,
body.rayform-popup-open .app-header{
    filter:none !important;
}

/* Matikan rule lama yang membuat seluruh builder blur tanpa panel */
body.rayform-popup-open .builder-shell,
body.rayform-popup-open .builder-page,
body.rayform-popup-open .form-builder-page,
body.rayform-popup-open .builder-main,
body.rayform-popup-open .canvas-wrap{
    filter:none !important;
}

/* Jangan biarkan modal asli hidden oleh overflow parent */
#rayform-edit-overlay .modal-bottom-save,
#rayform-edit-overlay .edit-box-footer{
    position:sticky !important;
    bottom:0 !important;
    z-index:4 !important;
    background:#fff !important;
}

/* Close button di kanan atas tetap terlihat */
#rayform-edit-overlay .close-btn,
#rayform-edit-overlay .modal-close,
#rayform-edit-overlay .popup-close,
#rayform-edit-overlay button[aria-label="Close"],
#rayform-edit-overlay .close-edit{
    position:relative !important;
    z-index:5 !important;
}

/* Hindari overlay lama menutup popup */
body.rayform-popup-open .modal-backdrop:not(.rayform-edit-backdrop),
body.rayform-popup-open .popup-backdrop:not(.rayform-edit-backdrop),
body.rayform-popup-open .edit-backdrop:not(.rayform-edit-backdrop),
body.rayform-popup-open .question-modal-backdrop:not(.rayform-edit-backdrop){
    z-index:10 !important;
    pointer-events:none !important;
}

@media(max-width:720px){
    #rayform-edit-overlay{
        padding:14px !important;
        align-items:flex-start !important;
    }

    .rayform-edit-stage{
        width:100% !important;
        max-height:calc(100vh - 28px) !important;
        border-radius:22px !important;
    }

    #rayform-edit-overlay .edit-box{
        border-radius:22px !important;
    }
}


/* =========================================================
   FINAL FIX - TOMBOL EDIT QUESTION MEMUNCULKAN POPUP EDIT
   Klik Edit => backdrop blur muncul + panel edit muncul di tengah.
========================================================= */

/* Backdrop blur di belakang popup */
#modalBackdrop.modal-backdrop{
    display:none !important;
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    background:rgba(10,36,73,.48) !important;
    backdrop-filter:blur(9px) !important;
    -webkit-backdrop-filter:blur(9px) !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

#modalBackdrop.modal-backdrop.show{
    display:block !important;
}

/* Edit box normal tetap hidden */
.edit-box{
    display:none !important;
}

/* Edit box aktif tampil sebagai popup fixed */
.edit-box.open{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%, -50%) !important;
    z-index:10050 !important;
    width:min(1120px, calc(100vw - 56px)) !important;
    max-height:calc(100vh - 86px) !important;
    overflow:auto !important;
    margin:0 !important;
    padding:28px !important;
    background:#FFFFFF !important;
    border:1px solid rgba(1,101,254,.18) !important;
    border-radius:30px !important;
    box-shadow:0 38px 120px rgba(10,36,73,.32) !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* Header popup tetap rapi */
.edit-box.open .edit-box-header{
    position:sticky !important;
    top:0 !important;
    z-index:3 !important;
    background:#FFFFFF !important;
    padding-bottom:16px !important;
    margin-bottom:18px !important;
    border-bottom:1px solid rgba(1,101,254,.10) !important;
}

/* Tombol X */
.edit-box.open .modal-close-btn,
.edit-box.open .edit-box-header button{
    position:relative !important;
    z-index:4 !important;
    cursor:pointer !important;
}

/* Bagian save bawah tetap bisa kelihatan saat scroll */
.edit-box.open .modal-bottom-save{
    position:sticky !important;
    bottom:0 !important;
    z-index:3 !important;
    background:#FFFFFF !important;
    border-top:1px solid rgba(1,101,254,.10) !important;
}

/* Jangan biarkan rule lama overlay menutup popup */
#rayform-edit-overlay,
.rayform-edit-overlay{
    display:none !important;
    pointer-events:none !important;
}

/* Saat popup aktif, halaman belakang tidak perlu filter tambahan karena backdrop sudah blur */
body.modal-open .builder-shell,
body.modal-open .builder-page,
body.modal-open .form-builder-page,
body.modal-open .builder-main,
body.modal-open .canvas-wrap{
    filter:none !important;
}

/* Navbar tetap di atas layout normal, tetapi di bawah popup */
body.modal-open .builder-header,
body.modal-open .main-header,
body.modal-open .topbar{
    z-index:9990 !important;
}

/* Responsive popup */
@media(max-width:760px){
    .edit-box.open{
        width:calc(100vw - 24px) !important;
        max-height:calc(100vh - 30px) !important;
        padding:18px !important;
        border-radius:22px !important;
    }
}


/* =========================================================
   ABSOLUTE FIX - EDIT QUESTION POPUP MOUNT KE BODY
   Popup dipindah ke <body> supaya tidak tertutup/ikut blur parent.
========================================================= */

#modalBackdrop.modal-backdrop,
#modalBackdrop{
    display:none !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    z-index:2147483000 !important;
    background:rgba(10,36,73,.46) !important;
    backdrop-filter:blur(9px) !important;
    -webkit-backdrop-filter:blur(9px) !important;
    pointer-events:auto !important;
    opacity:1 !important;
}

#modalBackdrop.show{
    display:block !important;
}

/* Default edit box tetap tersembunyi */
.edit-box{
    display:none !important;
}

/* Ketika open: tampil sebagai modal paling atas */
body > .edit-box.open,
.edit-box.open{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%, -50%) !important;
    z-index:2147483100 !important;
    width:min(1120px, calc(100vw - 64px)) !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    margin:0 !important;
    padding:28px !important;
    background:#FFFFFF !important;
    border:1px solid rgba(1,101,254,.20) !important;
    border-radius:30px !important;
    box-shadow:0 40px 130px rgba(10,36,73,.35) !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* Jangan blur popup */
body.modal-open > .edit-box.open,
body.modal-open > .edit-box.open *{
    filter:none !important;
}

/* Header popup sticky */
body > .edit-box.open .edit-box-header{
    position:sticky !important;
    top:-28px !important;
    z-index:5 !important;
    background:#FFFFFF !important;
    padding:18px 0 !important;
    margin-bottom:16px !important;
    border-bottom:1px solid rgba(1,101,254,.10) !important;
}

/* Tombol close */
body > .edit-box.open .modal-close-btn{
    cursor:pointer !important;
    z-index:6 !important;
}

/* Save all bawah tetap terlihat */
body > .edit-box.open .modal-bottom-save{
    position:sticky !important;
    bottom:-28px !important;
    z-index:5 !important;
    background:#FFFFFF !important;
    border-top:1px solid rgba(1,101,254,.10) !important;
}

/* Matikan overlay eksperimen lama kalau masih ada */
#rayform-edit-overlay,
.rayform-edit-overlay{
    display:none !important;
}

/* Tidak perlu blur tambahan ke parent, karena backdrop sudah blur */
body.modal-open .builder-shell,
body.modal-open .builder-page,
body.modal-open .form-builder-page,
body.modal-open .builder-main,
body.modal-open .canvas-wrap,
body.modal-open .main-header,
body.modal-open .builder-header,
body.modal-open .topbar{
    filter:none !important;
}

@media(max-width:760px){
    body > .edit-box.open,
    .edit-box.open{
        width:calc(100vw - 24px) !important;
        max-height:calc(100vh - 28px) !important;
        padding:18px !important;
        border-radius:22px !important;
    }

    body > .edit-box.open .edit-box-header{
        top:-18px !important;
    }

    body > .edit-box.open .modal-bottom-save{
        bottom:-18px !important;
    }
}


/* =========================================================
   PATCH - EDIT POPUP UI CLEAN RAYFORM BLUE TONE
   - Math dan Long answer disembunyikan total.
   - Area edit dirapikan dengan tone biru Rayform.
   - Tombol Update / All Save / Required lebih clean.
========================================================= */

:root{
    --rf-primary:#0165FE;
    --rf-secondary:#0A2449;
    --rf-cyan:#25D4FF;
    --rf-soft:#F6FAFF;
    --rf-soft2:#EEF6FF;
    --rf-line:#CFE2FF;
    --rf-text:#0A2449;
    --rf-muted:#64748B;
}

/* Hide Math & Long answer controls everywhere inside builder edit popup */
.edit-box input[name="is_math"],
.edit-box input[name="is_long_answer"],
.edit-box input[name="is_math"] + span,
.edit-box input[name="is_long_answer"] + span{
    display:none !important;
}

.edit-box label:has(input[name="is_math"]),
.edit-box label:has(input[name="is_long_answer"]){
    display:none !important;
}

/* Modal utama lebih clean */
body > .edit-box.open,
.edit-box.open{
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%) !important;
    border:1px solid rgba(1,101,254,.18) !important;
    border-radius:30px !important;
    box-shadow:0 42px 130px rgba(10,36,73,.28) !important;
    color:var(--rf-text) !important;
}

/* Header popup */
body > .edit-box.open .edit-box-header{
    background:rgba(255,255,255,.92) !important;
    border-bottom:1px solid rgba(1,101,254,.12) !important;
    backdrop-filter:blur(12px) !important;
}

.edit-box-header span{
    background:#EAF4FF !important;
    color:var(--rf-primary) !important;
    border:1px solid rgba(1,101,254,.12) !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    font-weight:950 !important;
}

.edit-box-header strong{
    display:block !important;
    margin-top:14px !important;
    color:var(--rf-secondary) !important;
    font-size:28px !important;
    letter-spacing:-.03em !important;
}

/* Tombol X */
.modal-close-btn{
    width:52px !important;
    height:52px !important;
    border-radius:999px !important;
    background:#F8FBFF !important;
    color:#E11D48 !important;
    border:1px solid #D7E7FF !important;
    box-shadow:0 12px 26px rgba(10,36,73,.08) !important;
    font-size:26px !important;
    font-weight:900 !important;
}

.modal-close-btn:hover{
    background:#FFF1F2 !important;
    border-color:#FBCFE8 !important;
    transform:translateY(-1px) !important;
}

/* Card isi pertanyaan */
.edit-box .question-edit-form{
    display:block !important;
}

.edit-box .question-main-card,
.edit-box .question-line,
.edit-box .answer-options-card,
.edit-box .option-edit-list,
.edit-box .option-row,
.edit-box .option-edit-row{
    border-color:rgba(1,101,254,.14) !important;
}

/* Row pertanyaan */
.edit-box .question-line{
    background:#FFFFFF !important;
    border:1px solid rgba(1,101,254,.14) !important;
    border-radius:22px !important;
    padding:22px !important;
    box-shadow:0 14px 40px rgba(10,36,73,.06) !important;
}

/* Nomor soal */
.edit-box .question-line > span:first-child,
.edit-box .question-number,
.edit-box .number-badge{
    background:#EAF4FF !important;
    color:var(--rf-primary) !important;
    border:1px solid rgba(1,101,254,.18) !important;
    border-radius:18px !important;
    min-width:54px !important;
    height:54px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight:950 !important;
}

/* Input/select default */
.edit-box input[type="text"],
.edit-box input[type="number"],
.edit-box input[type="file"],
.edit-box textarea,
.edit-box select{
    border:1px solid var(--rf-line) !important;
    background:#FFFFFF !important;
    color:var(--rf-secondary) !important;
    border-radius:16px !important;
    min-height:50px !important;
    padding:0 16px !important;
    font-weight:700 !important;
    outline:none !important;
    box-shadow:none !important;
}

.edit-box input[type="file"]{
    padding:12px 14px !important;
}

.edit-box input:focus,
.edit-box textarea:focus,
.edit-box select:focus{
    border-color:var(--rf-primary) !important;
    box-shadow:0 0 0 4px rgba(1,101,254,.10) !important;
}

/* Upload gambar soal lebih rapi */
.edit-box .image-upload-row,
.edit-box .image-upload-box,
.edit-box .question-image-upload{
    background:#F8FBFF !important;
    border:1px dashed rgba(1,101,254,.28) !important;
    border-radius:18px !important;
    padding:14px 18px !important;
    color:var(--rf-secondary) !important;
    font-weight:900 !important;
}

/* Settings bar: Type, Points, Required, Update */
.edit-box .setting-row,
.edit-box .question-settings,
.edit-box .edit-controls,
.edit-box .control-row{
    background:linear-gradient(135deg,#EAF4FF,#F7FBFF) !important;
    border:1px solid rgba(1,101,254,.14) !important;
    border-radius:24px !important;
    padding:18px !important;
    display:grid !important;
    grid-template-columns:minmax(220px,1.7fr) minmax(110px,.65fr) auto auto !important;
    gap:14px !important;
    align-items:end !important;
}

/* Kalau markup asli bukan class khusus, rapikan form-group besar yang berisi Type/Points/Required */
.edit-box .question-edit-form > div:has(select[name="type"]){
    background:linear-gradient(135deg,#EAF4FF,#F7FBFF) !important;
    border:1px solid rgba(1,101,254,.14) !important;
    border-radius:24px !important;
    padding:18px !important;
}

/* Required pill */
.edit-box label:has(input[name="is_required"]),
.edit-box .required-pill{
    min-height:54px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    background:#FFFFFF !important;
    border:1px solid var(--rf-line) !important;
    color:var(--rf-secondary) !important;
    font-weight:950 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
}

.edit-box label:has(input[name="is_required"]):hover{
    border-color:rgba(1,101,254,.35) !important;
    background:#F8FBFF !important;
}

.edit-box input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    accent-color:var(--rf-primary) !important;
}

/* Tombol Update */
.edit-box button[type="submit"],
.edit-box .update-btn{
    min-height:54px !important;
    padding:0 26px !important;
    border-radius:999px !important;
    border:0 !important;
    background:linear-gradient(135deg,var(--rf-primary),var(--rf-cyan)) !important;
    color:#FFFFFF !important;
    font-weight:950 !important;
    box-shadow:0 16px 34px rgba(1,101,254,.22) !important;
    cursor:pointer !important;
    transition:.18s ease !important;
}

.edit-box button[type="submit"]:hover,
.edit-box .update-btn:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 20px 42px rgba(1,101,254,.28) !important;
}

/* Answer options section */
.edit-box .answer-options-card,
.edit-box .options-card,
.edit-box .option-edit-list{
    background:#FFFFFF !important;
    border:1px solid rgba(1,101,254,.12) !important;
    border-radius:24px !important;
    padding:20px !important;
    box-shadow:0 14px 42px rgba(10,36,73,.05) !important;
}

.edit-box .answer-options-card h3,
.edit-box .options-card h3{
    color:var(--rf-secondary) !important;
}

/* Option rows */
.edit-box .option-edit-row,
.edit-box .option-row{
    background:#F8FBFF !important;
    border:1px solid rgba(1,101,254,.12) !important;
    border-radius:20px !important;
    padding:16px !important;
    box-shadow:none !important;
}

/* Save/Delete option buttons */
.edit-box .option-edit-row button,
.edit-box .option-row button{
    min-height:46px !important;
    border-radius:999px !important;
    padding:0 20px !important;
    font-weight:950 !important;
}

/* Button save option */
.edit-box .option-edit-row button[type="submit"],
.edit-box .option-row button[type="submit"]{
    background:linear-gradient(135deg,var(--rf-primary),var(--rf-cyan)) !important;
    color:#FFFFFF !important;
    border:0 !important;
}

/* Delete soft */
.edit-box .delete-btn,
.edit-box button.danger,
.edit-box .option-row .delete,
.edit-box .option-edit-row .delete{
    background:#FFF1F2 !important;
    color:#BE123C !important;
    border:1px solid #FBCFE8 !important;
}

/* Bottom save area */
.edit-box .modal-bottom-save{
    background:rgba(255,255,255,.94) !important;
    border-top:1px solid rgba(1,101,254,.12) !important;
    backdrop-filter:blur(12px) !important;
}

.edit-box .modal-bottom-save h3,
.edit-box .modal-bottom-save strong{
    color:var(--rf-secondary) !important;
}

.edit-box .modal-bottom-save p{
    color:var(--rf-muted) !important;
}

.edit-box .all-save-btn,
.edit-box .modal-bottom-save button{
    min-height:58px !important;
    padding:0 34px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,var(--rf-primary),var(--rf-cyan)) !important;
    color:#FFFFFF !important;
    border:0 !important;
    font-weight:950 !important;
    box-shadow:0 18px 44px rgba(1,101,254,.24) !important;
}

/* Preview image */
.edit-box .image-preview img,
.edit-box .preview-image,
.edit-box img.question-image-preview{
    border-radius:18px !important;
    border:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 12px 28px rgba(10,36,73,.10) !important;
}

/* Responsive */
@media(max-width:900px){
    .edit-box .setting-row,
    .edit-box .question-settings,
    .edit-box .edit-controls,
    .edit-box .control-row{
        grid-template-columns:1fr !important;
        align-items:stretch !important;
    }

    .edit-box button[type="submit"],
    .edit-box .update-btn,
    .edit-box .all-save-btn{
        width:100% !important;
    }
}


/* =========================================================
   SAFE FIX - HAPUS MATH & LONG ANSWER TANPA MERUSAK BLADE
   Tidak menghapus struktur Blade; hanya sembunyikan/JS remove di browser.
========================================================= */

.edit-box input[name="is_math"],
.edit-box input[name="is_long_answer"],
.edit-box input[name="is_math_removed"],
.edit-box input[name="is_long_answer_removed"],
.edit-box input[data-hidden-control="math"],
.edit-box input[data-hidden-control="long_answer"],
.edit-box input[name="is_math"] + *,
.edit-box input[name="is_long_answer"] + *,
.edit-box input[name="is_math_removed"] + *,
.edit-box input[name="is_long_answer_removed"] + *,
.edit-box input[data-hidden-control="math"] + *,
.edit-box input[data-hidden-control="long_answer"] + *{
    display:none !important;
}

.edit-box label:has(input[name="is_math"]),
.edit-box label:has(input[name="is_long_answer"]),
.edit-box label:has(input[name="is_math_removed"]),
.edit-box label:has(input[name="is_long_answer_removed"]),
.edit-box label:has(input[data-hidden-control="math"]),
.edit-box label:has(input[data-hidden-control="long_answer"]){
    display:none !important;
}

/* Re-layout row controls setelah Math dan Long answer hilang */
.edit-box .question-edit-form > div:has(select[name="type"]),
.edit-box .setting-row,
.edit-box .question-settings,
.edit-box .edit-controls,
.edit-box .control-row{
    grid-template-columns:minmax(300px,1.5fr) minmax(130px,.55fr) minmax(150px,.5fr) minmax(150px,.5fr) !important;
    gap:16px !important;
}

/* Required dan Update tetap rapi */
.edit-box label:has(input[name="is_required"]){
    min-height:56px !important;
    border-radius:999px !important;
    background:#FFFFFF !important;
    border:1px solid #CFE2FF !important;
    color:#0A2449 !important;
    font-weight:950 !important;
}

.edit-box button[type="submit"],
.edit-box .update-btn{
    min-height:56px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#0165FE,#25D4FF) !important;
    color:#FFFFFF !important;
    border:0 !important;
    font-weight:950 !important;
}

@media(max-width:900px){
    .edit-box .question-edit-form > div:has(select[name="type"]),
    .edit-box .setting-row,
    .edit-box .question-settings,
    .edit-box .edit-controls,
    .edit-box .control-row{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   PATCH - HAPUS GAMBAR SOAL DI POPUP EDIT
========================================================= */

.question-image-manage{
    margin:14px 0 18px;
    padding:14px 16px;
    border:1px solid rgba(1,101,254,.16);
    background:#F8FBFF;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    box-shadow:0 10px 26px rgba(10,36,73,.05);
}

.question-image-manage-info{
    display:flex;
    align-items:center;
    gap:12px;
}

.question-image-manage-info .image-dot{
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,#0165FE,#25D4FF);
    box-shadow:0 12px 26px rgba(1,101,254,.20);
    position:relative;
    flex:0 0 auto;
}

.question-image-manage-info .image-dot::after{
    content:"🖼️";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:18px;
}

.question-image-manage strong{
    display:block;
    color:#0A2449;
    font-weight:950;
    margin-bottom:2px;
}

.question-image-manage p{
    margin:0;
    color:#64748B;
    font-size:13px;
    font-weight:750;
}

.delete-question-image-btn{
    min-height:44px;
    padding:0 18px;
    border-radius:999px;
    border:1px solid #FBCFE8;
    background:#FFF1F2;
    color:#BE123C;
    font-weight:950;
    cursor:pointer;
    transition:.18s ease;
}

.delete-question-image-btn:hover{
    transform:translateY(-1px);
    border-color:#FDA4AF;
    background:#FFE4E6;
}

.question-image-manage.marked-delete{
    border-color:#FDA4AF;
    background:#FFF1F2;
}

.question-image-manage.marked-delete .delete-question-image-btn{
    opacity:.8;
    cursor:not-allowed;
}

.question-image-delete-note{
    width:100%;
    margin-top:10px;
    color:#BE123C;
    font-size:13px;
    font-weight:850;
}

.question-image-manage.marked-delete{
    flex-wrap:wrap;
}

@media(max-width:720px){
    .question-image-manage{
        align-items:flex-start;
        flex-direction:column;
    }

    .delete-question-image-btn{
        width:100%;
    }
}


/* =========================================================
   PATCH - KATEGORI TEMPLATE FILTER RECENT + WARNA TILE
========================================================= */

.filter-template-card{
    position:relative;
    transition:.22s ease;
}

.filter-template-card::after{
    content:"Klik untuk filter recent";
    position:absolute;
    right:18px;
    bottom:16px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    color:#0A2449;
    font-size:12px;
    font-weight:950;
    opacity:0;
    transform:translateY(5px);
    transition:.22s ease;
}

.filter-template-card:hover::after,
.filter-template-card.active::after{
    opacity:1;
    transform:translateY(0);
}

.filter-template-card.active{
    transform:translateY(-4px);
    box-shadow:0 24px 55px rgba(10,36,73,.14);
    outline:3px solid rgba(1,101,254,.18);
}

.recent-filter-tabs{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:16px;
}

.recent-filter-tabs a{
    min-height:38px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#FFFFFF;
    border:1px solid rgba(1,101,254,.14);
    color:#0A2449;
    font-weight:950;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(10,36,73,.045);
    transition:.18s ease;
}

.recent-filter-tabs a:hover,
.recent-filter-tabs a.active{
    transform:translateY(-1px);
    border-color:rgba(1,101,254,.34);
    box-shadow:0 12px 28px rgba(10,36,73,.08);
}

.recent-filter-tabs a.active{
    color:#0165FE;
    background:#F8FBFF;
}

.form-tile .tile-cover{
    background:linear-gradient(135deg,#D8E8FF,#A8CEFF) !important;
}

.form-tile.category-quiz .tile-cover,
.tile-cover.category-quiz{
    background:linear-gradient(135deg,#FCE7F3,#E9D5FF) !important;
}

.form-tile.category-form .tile-cover,
.tile-cover.category-form{
    background:linear-gradient(135deg,#FEF3C7,#FFF7ED) !important;
}

.form-tile.category-survey .tile-cover,
.tile-cover.category-survey{
    background:linear-gradient(135deg,#D1FAE5,#E0F2FE) !important;
}

.form-tile.category-research .tile-cover,
.tile-cover.category-research{
    background:linear-gradient(135deg,#EDE9FE,#DBEAFE) !important;
}

.tile-category-badge{
    display:inline-flex;
    align-items:center;
    width:max-content;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    margin-bottom:10px;
    font-size:12px;
    font-weight:950;
    background:#EAF4FF;
    color:#0165FE;
    border:1px solid rgba(1,101,254,.14);
}

.form-tile.category-quiz .tile-category-badge{
    background:#FCE7F3;
    color:#BE185D;
    border-color:#FBCFE8;
}

.form-tile.category-form .tile-category-badge{
    background:#FEF3C7;
    color:#92400E;
    border-color:#FDE68A;
}

.form-tile.category-survey .tile-category-badge{
    background:#D1FAE5;
    color:#047857;
    border-color:#A7F3D0;
}

.form-tile.category-research .tile-category-badge{
    background:#EDE9FE;
    color:#5B21B6;
    border-color:#DDD6FE;
}

.form-tile.category-quiz{
    border-color:#FBCFE8;
}

.form-tile.category-form{
    border-color:#FDE68A;
}

.form-tile.category-survey{
    border-color:#A7F3D0;
}

.form-tile.category-research{
    border-color:#DDD6FE;
}


/* =========================================================
   PATCH - PUBLIC LANDING TANPA LOGIN + DASHBOARD HANYA OWNER
========================================================= */
.guest-actions{gap:10px!important}
.home-login-btn,.home-register-btn{
    min-height:44px;height:44px;padding:0 18px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:950;text-decoration:none;transition:.18s ease
}
.home-login-btn{
    background:#fff;color:#0165FE;border:1px solid rgba(1,101,254,.22);
    box-shadow:0 8px 22px rgba(10,36,73,.045)
}
.home-register-btn{
    background:linear-gradient(135deg,#0165FE,#25D4FF);color:#fff;border:0;
    box-shadow:0 12px 26px rgba(1,101,254,.20)
}
.home-login-btn:hover,.home-register-btn:hover{transform:translateY(-1px)}
.guest-landing-note{
    width:min(1180px,calc(100% - 48px));margin:40px auto 80px;padding:34px;
    border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(248,251,255,.92));
    border:1px solid rgba(1,101,254,.14);box-shadow:0 28px 80px rgba(10,36,73,.08);
    display:flex;align-items:center;justify-content:space-between;gap:24px
}
.guest-landing-note .guest-pill{
    display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;
    background:#EAF4FF;color:#0165FE;border:1px solid rgba(1,101,254,.16);
    font-weight:950;margin-bottom:14px
}
.guest-landing-note h2{
    color:#0A2449;font-size:34px;line-height:1.08;letter-spacing:-.04em;margin:0 0 10px
}
.guest-landing-note p{
    color:#64748B;margin:0;max-width:720px;font-size:17px;line-height:1.75
}
@media(max-width:760px){
    .guest-landing-note{width:min(100% - 28px,1180px);flex-direction:column;align-items:flex-start;padding:24px}
    .guest-landing-note .btn{width:100%}
    .home-login-btn,.home-register-btn{height:40px;min-height:40px;padding:0 14px;font-size:14px}
}


/* =========================================================
   PATCH - HAPUS LINK/TAG BIRU DI MOCKUP HERO PREVIEW
========================================================= */

/* Sembunyikan badge atas "Preview Builder..." jika masih ada */
.hero-preview .preview-badge,
.hero-preview .live-badge,
.hero-preview .mock-badge,
.preview-card .preview-badge,
.preview-card .live-badge,
.preview-card .mock-badge,
.preview-badge,
.live-badge,
.mock-badge{
    display:none !important;
}

/* Sembunyikan chips kecil Login / Timer / Share di bawah input */
.hero-preview .preview-tags,
.hero-preview .mock-tags,
.hero-preview .hero-tags,
.hero-preview .feature-tags,
.hero-preview .preview-card-tags,
.preview-card .preview-tags,
.preview-card .mock-tags,
.preview-card .hero-tags,
.preview-card .feature-tags,
.preview-card .preview-card-tags,
.preview-tags,
.mock-tags,
.hero-tags,
.feature-tags,
.preview-card-tags{
    display:none !important;
}

/* Fallback khusus kalau masih berupa span link kecil */
.hero-preview span,
.preview-card span{
    /* tetap aman, tidak mematikan semua span global */
}

.hero-preview span:has(+ span),
.preview-card span:has(+ span){
    text-decoration:none !important;
}

/* Rapikan jarak setelah chips dihapus */
.hero-preview .btn,
.preview-card .btn,
.hero-preview a.btn,
.preview-card a.btn{
    margin-top:18px !important;
}




/* =========================================================
   PATCH - MUNCULKAN LAGI CHIPS LOGIN / TIMER / SHARE
   Tombol Mulai Buat Form tetap dihapus.
========================================================= */

.hero-preview .preview-tags,
.hero-preview .mock-tags,
.hero-preview .hero-tags,
.hero-preview .feature-tags,
.hero-preview .preview-card-tags,
.preview-card .preview-tags,
.preview-card .mock-tags,
.preview-card .hero-tags,
.preview-card .feature-tags,
.preview-card .preview-card-tags,
.preview-tags.mock-tags{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    margin-top:18px !important;
}

.hero-preview .preview-tags span,
.hero-preview .mock-tags span,
.preview-card .preview-tags span,
.preview-card .mock-tags span,
.preview-tags.mock-tags span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.16) !important;
    font-weight:950 !important;
    font-size:13px !important;
    box-shadow:0 8px 18px rgba(1,101,254,.08) !important;
}

/* Pastikan tombol Mulai Buat Form tetap tidak muncul jika masih ada class CTA */
.hero-preview .mock-cta,
.hero-preview .preview-cta,
.hero-preview .hero-preview-cta,
.preview-card .mock-cta,
.preview-card .preview-cta,
.preview-card .hero-preview-cta{
    display:none !important;
}

/* =========================================================
   FORCE SHOW - LOGIN / TIMER / SHARE CHIPS DI HERO MOCKUP
   Tombol Mulai Buat Form tetap tidak muncul.
========================================================= */

.rayform-preview-chips{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    margin-top:22px !important;
    position:relative !important;
    z-index:5 !important;
}

.rayform-preview-chips span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.18) !important;
    font-weight:950 !important;
    font-size:13px !important;
    box-shadow:0 8px 18px rgba(1,101,254,.08) !important;
}

/* Kalau markup lama masih pakai class lama, paksa tampil */
.preview-tags,
.mock-tags,
.hero-tags,
.feature-tags,
.preview-card-tags{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    margin-top:22px !important;
}

.preview-tags span,
.mock-tags span,
.hero-tags span,
.feature-tags span,
.preview-card-tags span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.18) !important;
    font-weight:950 !important;
    font-size:13px !important;
}

/* Jangan munculkan lagi tombol CTA bawah */
.hero-preview .mock-cta,
.hero-preview .preview-cta,
.hero-preview .hero-preview-cta,
.preview-card .mock-cta,
.preview-card .preview-cta,
.preview-card .hero-preview-cta{
    display:none !important;
}


/* =========================================================
   PATCH - HILANGKAN DUPLIKAT BAWAH LOGIN TIMER SHARE
   Pakai chips atas yang ada spacing-nya saja.
========================================================= */



/* Pastikan chips yang benar tetap tampil */
.preview-tags,
.mock-tags,
.hero-tags,
.feature-tags,
.preview-card-tags{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    margin-top:22px !important;
}

.preview-tags span,
.mock-tags span,
.hero-tags span,
.feature-tags span,
.preview-card-tags span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.18) !important;
    font-weight:950 !important;
    font-size:13px !important;
}

/* =========================================================
   FIX FINAL - MUNCULKAN LOGIN / TIMER / SHARE SATU BARIS
   Tombol "Mulai Buat Form" tetap hilang.
========================================================= */





/* Pastikan class lama yang mungkin masih ada juga tidak disembunyikan */
.preview-tags,
.mock-tags,
.hero-tags,
.feature-tags,
.preview-card-tags{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    margin-top:22px !important;
}

.preview-tags span,
.mock-tags span,
.hero-tags span,
.feature-tags span,
.preview-card-tags span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.18) !important;
    font-weight:950 !important;
    font-size:13px !important;
}

/* Tombol CTA bawah tetap tidak muncul */
.hero-preview .mock-cta,
.hero-preview .preview-cta,
.hero-preview .hero-preview-cta,
.preview-card .mock-cta,
.preview-card .preview-cta,
.preview-card .hero-preview-cta{
    display:none !important;
}


/* =========================================================
   PATCH - PINDAHKAN LOGIN / TIMER / SHARE KE DALAM CARD PREVIEW
========================================================= */

.preview-card .rayform-preview-chips-visible{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    flex-wrap:wrap !important;
    margin-top:18px !important;
    position:relative !important;
    z-index:10 !important;
}

.preview-card .rayform-preview-chips-visible span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:36px !important;
    padding:0 16px !important;
    border-radius:999px !important;
    background:#EAF4FF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.22) !important;
    font-weight:950 !important;
    font-size:14px !important;
    box-shadow:0 8px 18px rgba(1,101,254,.08) !important;
}

/* Kalau ada chips di luar preview-card karena cache/patch lama, sembunyikan */
.hero-preview + .rayform-preview-chips-visible,
.hero-section > .rayform-preview-chips-visible,
section > .rayform-preview-chips-visible{
    display:none !important;
}

/* Pastikan tombol CTA bawah tetap tidak muncul */
.hero-preview .mock-cta,
.hero-preview .preview-cta,
.hero-preview .hero-preview-cta,
.preview-card .mock-cta,
.preview-card .preview-cta,
.preview-card .hero-preview-cta{
    display:none !important;
}


/* =========================================================
   PATCH - NAVBAR ATAS PILL SAMA SEMUA
   Templates / Recent / Create dibuat satu style dan satu ukuran.
========================================================= */

.home-clean-header .home-nav-menu{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
}

.home-clean-header .home-nav-menu .home-nav-link,
.home-clean-header .home-nav-menu .home-create-link,
.home-clean-header .home-nav-menu a{
    min-width:126px !important;
    height:52px !important;
    padding:0 24px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;

    background:linear-gradient(135deg,#FFFFFF 0%,#F8FBFF 100%) !important;
    border:1.5px solid rgba(1,101,254,.18) !important;
    color:#0A2449 !important;

    font-weight:950 !important;
    font-size:16px !important;
    line-height:1 !important;
    text-decoration:none !important;

    box-shadow:0 12px 30px rgba(10,36,73,.06) !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.home-clean-header .home-nav-menu .home-nav-link:hover,
.home-clean-header .home-nav-menu .home-create-link:hover,
.home-clean-header .home-nav-menu a:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(1,101,254,.38) !important;
    box-shadow:0 16px 36px rgba(1,101,254,.12) !important;
    background:linear-gradient(135deg,#FFFFFF 0%,#EAF4FF 100%) !important;
}

/* Create tidak lagi beda sendiri. Samakan dengan Templates dan Recent */
.home-clean-header .home-nav-menu .home-create-link{
    background:linear-gradient(135deg,#FFFFFF 0%,#F8FBFF 100%) !important;
    color:#0A2449 !important;
    border:1.5px solid rgba(1,101,254,.18) !important;
}

/* Kalau ada class active/focus dari browser, tetap sama */
.home-clean-header .home-nav-menu .home-nav-link:focus,
.home-clean-header .home-nav-menu .home-create-link:focus,
.home-clean-header .home-nav-menu a:focus{
    outline:none !important;
    border-color:rgba(1,101,254,.38) !important;
    box-shadow:0 0 0 4px rgba(1,101,254,.10), 0 16px 36px rgba(1,101,254,.12) !important;
}

@media(max-width:780px){
    .home-clean-header .home-nav-menu{
        gap:8px !important;
    }

    .home-clean-header .home-nav-menu .home-nav-link,
    .home-clean-header .home-nav-menu .home-create-link,
    .home-clean-header .home-nav-menu a{
        min-width:auto !important;
        height:42px !important;
        padding:0 14px !important;
        font-size:14px !important;
    }
}


/* =========================================================
   PATCH - NAVBAR PILL COMPACT & SAMA UKURAN
   Ukuran disamakan seperti chip user "Kyo Xarn".
========================================================= */

.home-clean-header .home-nav-wrap{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}

.home-clean-header .home-nav-menu{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}

.home-clean-header .home-nav-menu .home-nav-link,
.home-clean-header .home-nav-menu .home-create-link,
.home-clean-header .home-nav-menu a,
.home-clean-header .home-account-menu .home-user-chip,
.home-clean-header .home-account-menu form button,
.home-clean-header .home-account-menu .home-login-btn,
.home-clean-header .home-account-menu .home-register-btn{
    min-width:104px !important;
    width:104px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 14px !important;
    border-radius:999px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;

    background:linear-gradient(135deg,#FFFFFF 0%,#F8FBFF 100%) !important;
    border:1.3px solid rgba(1,101,254,.20) !important;
    color:#0A2449 !important;

    font-weight:950 !important;
    font-size:15px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-decoration:none !important;

    box-shadow:0 8px 20px rgba(10,36,73,.045) !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.home-clean-header .home-nav-menu .home-nav-link:hover,
.home-clean-header .home-nav-menu .home-create-link:hover,
.home-clean-header .home-nav-menu a:hover,
.home-clean-header .home-account-menu .home-user-chip:hover,
.home-clean-header .home-account-menu .home-login-btn:hover,
.home-clean-header .home-account-menu .home-register-btn:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(1,101,254,.36) !important;
    box-shadow:0 12px 26px rgba(1,101,254,.10) !important;
    background:linear-gradient(135deg,#FFFFFF 0%,#EAF4FF 100%) !important;
}

/* Create tidak boleh beda ukuran / warna */
.home-clean-header .home-nav-menu .home-create-link{
    min-width:104px !important;
    width:104px !important;
    background:linear-gradient(135deg,#FFFFFF 0%,#F8FBFF 100%) !important;
    color:#0A2449 !important;
    border:1.3px solid rgba(1,101,254,.20) !important;
}

/* Logout tetap merah, tapi ukuran sama dengan pill lain */
.home-clean-header .home-account-menu form button,
.home-clean-header .home-logout-form button{
    min-width:104px !important;
    width:104px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 14px !important;
    border-radius:999px !important;

    background:#FFF7F7 !important;
    color:#BE123C !important;
    border:1.3px solid #FBCFE8 !important;
    font-weight:950 !important;
    font-size:15px !important;
    box-shadow:0 8px 20px rgba(190,18,60,.045) !important;
}

.home-clean-header .home-logout-form button:hover{
    background:#FFF1F2 !important;
    border-color:#FDA4AF !important;
    box-shadow:0 12px 26px rgba(190,18,60,.10) !important;
}

.home-clean-header .home-account-menu{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}

.home-clean-header .home-logout-form{
    margin:0 !important;
}

/* Mobile */
@media(max-width:900px){
    .home-clean-header .home-nav-wrap,
    .home-clean-header .home-nav-menu,
    .home-clean-header .home-account-menu{
        gap:7px !important;
    }

    .home-clean-header .home-nav-menu .home-nav-link,
    .home-clean-header .home-nav-menu .home-create-link,
    .home-clean-header .home-nav-menu a,
    .home-clean-header .home-account-menu .home-user-chip,
    .home-clean-header .home-account-menu form button,
    .home-clean-header .home-account-menu .home-login-btn,
    .home-clean-header .home-account-menu .home-register-btn{
        min-width:auto !important;
        width:auto !important;
        height:40px !important;
        min-height:40px !important;
        padding:0 12px !important;
        font-size:13.5px !important;
    }
}


/* =========================================================
   PATCH - QUESTION IMAGE DI PREVIEW / HALAMAN USER
   Ditambahkan ulang tanpa menghapus style utama Rayform.
========================================================= */
.question-image,
.question-image-preview,
.public-question-image,
.form-question-image,
img[src*="question-images"]{
    display:block !important;
    max-width:320px !important;
    width:auto !important;
    height:auto !important;
    border-radius:18px !important;
    border:1px solid rgba(1,101,254,.16) !important;
    background:#fff !important;
    box-shadow:0 14px 34px rgba(10,36,73,.10) !important;
    margin:14px 0 18px !important;
    object-fit:contain !important;
}


/* =========================================================
   FIX PREVIEW USER - GAMBAR SOAL/OPTION MUNCUL RAPI
========================================================= */
.public-question-image{
    margin:14px 0 18px !important;
}

.public-question-image img,
.question-image img,
.question-image-preview img,
.form-question-image img,
img[src*="question-images"]{
    display:block !important;
    max-width:360px !important;
    width:auto !important;
    height:auto !important;
    border-radius:18px !important;
    border:1px solid rgba(1,101,254,.18) !important;
    background:#fff !important;
    box-shadow:0 14px 34px rgba(10,36,73,.10) !important;
    object-fit:contain !important;
}

.public-option-image{
    display:inline-flex !important;
    align-items:center !important;
    margin-left:10px !important;
}

.public-option-image img,
.dropdown-option-images img{
    max-width:120px !important;
    max-height:90px !important;
    border-radius:12px !important;
    border:1px solid rgba(1,101,254,.18) !important;
    object-fit:contain !important;
    background:#fff !important;
}


/* =========================================================
   PATCH - TIMER RESPONDEN MULAI SAAT LINK DIBUKA
========================================================= */
.rayform-public-timer-box{
    position:fixed !important;
    right:22px !important;
    top:22px !important;
    z-index:9999 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:48px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(1,101,254,.20) !important;
    box-shadow:0 18px 38px rgba(8,36,74,.12) !important;
    color:#08244A !important;
    font-weight:950 !important;
}

.rayform-public-timer-box strong{
    color:#0165FE !important;
    font-weight:950 !important;
}

.rayform-public-timer-box [data-rayform-timer-text]{
    min-width:58px !important;
    text-align:center !important;
    font-variant-numeric:tabular-nums !important;
}

.rayform-timer-expired{
    position:fixed !important;
    right:22px !important;
    top:82px !important;
    z-index:9999 !important;
    max-width:280px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
    background:#FFF1F2 !important;
    color:#BE123C !important;
    border:1px solid rgba(244,63,94,.22) !important;
    box-shadow:0 18px 38px rgba(8,36,74,.10) !important;
    font-weight:900 !important;
}


/* =========================================================
   PATCH - PUBLIC LINK TIMER SHOW FIX
   Timer tampil di halaman user/responden jika owner mengaktifkan timer.
========================================================= */
.rayform-public-timer-box{
    position:fixed !important;
    right:24px !important;
    top:24px !important;
    z-index:9999 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:50px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.96) !important;
    border:1.5px solid rgba(1,101,254,.22) !important;
    box-shadow:0 18px 38px rgba(8,36,74,.12) !important;
    color:#08244A !important;
    font-weight:950 !important;
}

.rayform-public-timer-box strong{
    color:#0165FE !important;
    font-weight:950 !important;
}

.rayform-public-timer-box [data-rayform-timer-text]{
    min-width:62px !important;
    text-align:center !important;
    font-variant-numeric:tabular-nums !important;
    font-weight:950 !important;
}

.rayform-timer-expired{
    position:fixed !important;
    right:24px !important;
    top:86px !important;
    z-index:9999 !important;
    max-width:290px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
    background:#FFF1F2 !important;
    color:#BE123C !important;
    border:1px solid rgba(244,63,94,.22) !important;
    box-shadow:0 18px 38px rgba(8,36,74,.10) !important;
    font-weight:900 !important;
}


/* =========================================================
   PATCH - TIMER HABIS BLUR SEPERTI SEBELUMNYA
   Saat waktu responden habis, form diblur dan muncul overlay.
========================================================= */

.rayform-public-form-blurred{
    filter:blur(7px) !important;
    pointer-events:none !important;
    user-select:none !important;
    opacity:.72 !important;
    transition:filter .25s ease, opacity .25s ease !important;
}

.rayform-expired-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
    background:rgba(8, 20, 38, .32) !important;
    backdrop-filter:blur(10px) !important;
}

.rayform-expired-card{
    width:min(440px, 92vw) !important;
    border-radius:30px !important;
    background:rgba(255,255,255,.96) !important;
    border:1.5px solid rgba(1,101,254,.18) !important;
    box-shadow:0 34px 90px rgba(8,36,74,.20) !important;
    padding:34px 30px !important;
    text-align:center !important;
    color:#08244A !important;
}

.rayform-expired-icon{
    width:64px !important;
    height:64px !important;
    margin:0 auto 18px !important;
    border-radius:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(135deg,#EAF4FF,#FFFFFF) !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 18px 38px rgba(1,101,254,.10) !important;
    font-size:30px !important;
}

.rayform-expired-card h2{
    margin:0 0 10px !important;
    font-size:30px !important;
    line-height:1.1 !important;
    font-weight:950 !important;
    color:#08244A !important;
}

.rayform-expired-card p{
    margin:0 !important;
    color:#64748B !important;
    font-size:15px !important;
    line-height:1.65 !important;
    font-weight:750 !important;
}

.rayform-timer-is-expired .rayform-public-timer-box{
    background:#FFF1F2 !important;
    border-color:rgba(244,63,94,.24) !important;
    color:#BE123C !important;
}

.rayform-timer-is-expired .rayform-public-timer-box strong{
    color:#BE123C !important;
}


/* =========================================================
   PATCH - LOGO RAYFORM DI POPUP WAKTU HABIS
   Hanya menambahkan logo di card overlay timer habis.
========================================================= */

.rayform-expired-logo{
    display:block !important;
    width:170px !important;
    max-width:70% !important;
    height:auto !important;
    object-fit:contain !important;
    margin:0 auto 20px !important;
}

.rayform-expired-card .rayform-expired-icon{
    margin-top:0 !important;
}


/* =========================================================
   PATCH - FIX PARSE LOGO WAKTU HABIS + HAPUS MULAI BUAT FORM
   Hanya 2 hal:
   1. Logo popup Waktu Habis aman tanpa ParseError.
   2. Tombol Mulai Buat Form hilang untuk guest maupun user login.
========================================================= */

.rayform-expired-logo{
    display:block !important;
    width:170px !important;
    max-width:70% !important;
    height:auto !important;
    object-fit:contain !important;
    margin:0 auto 20px !important;
}

/* Hide tombol Mulai Buat Form dari hero/workspace preview */
.home-workspace-card a[href*="create"],
.home-workspace-card .home-start-btn,
.home-workspace-card .start-form-btn,
.home-workspace-card .mulai-buat-form,
.rayform-workspace-card a[href*="create"],
.rayform-workspace-card .home-start-btn,
.rayform-workspace-card .start-form-btn,
.rayform-workspace-card .mulai-buat-form,
.workspace-preview a[href*="create"],
.workspace-preview .home-start-btn,
.workspace-preview .start-form-btn,
.workspace-preview .mulai-buat-form,
.home-hero-preview a[href*="create"],
.home-hero-preview .home-start-btn,
.home-hero-preview .start-form-btn,
.home-hero-preview .mulai-buat-form{
    display:none !important;
}

/* Fallback untuk tombol yang class-nya umum */
a.home-primary-btn[href*="create"],
a.home-cta-btn[href*="create"],
a.btn-primary[href*="create"],
button.home-primary-btn,
button.home-cta-btn{
    display:none !important;
}


/* =========================================================
   PATCH - BALIKIN TAMPILAN USER ISI FORM: NOMOR + SECTION
   Required tidak tampil sebagai teks; hanya tanda * merah.
========================================================= */

.required-note{
    display:none !important;
}

.rayform-public-numbered-old-ui .rayform-public-card,
.rayform-public-numbered-old-ui .public-form-card,
.rayform-public-numbered-old-ui .form-card{
    overflow:hidden !important;
}

.rayform-public-section,
.public-section,
.section-card,
[data-section-card]{
    margin:26px 0 !important;
    border-radius:26px !important;
    background:#FFFFFF !important;
    border:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 18px 50px rgba(8,36,74,.06) !important;
    overflow:hidden !important;
}

.rayform-public-section-head,
.section-header{
    min-height:78px !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding:18px 22px !important;
    background:linear-gradient(135deg,#EAF4FF,#F8FBFF) !important;
    border-bottom:1px solid rgba(1,101,254,.12) !important;
}

.rayform-section-number{
    flex:0 0 auto !important;
    width:42px !important;
    height:42px !important;
    border-radius:10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#0165FE !important;
    color:#FFFFFF !important;
    font-weight:950 !important;
    box-shadow:0 12px 28px rgba(1,101,254,.18) !important;
}

.rayform-public-section-head h2,
.rayform-public-section-head h3,
.section-header h2,
.section-header h3{
    margin:0 !important;
    color:#08244A !important;
    font-size:22px !important;
    font-weight:950 !important;
}

.rayform-public-question,
.public-question,
.question-card,
.form-question,
.question-item,
[data-question-card]{
    padding:26px 24px !important;
    border-bottom:1px solid rgba(1,101,254,.08) !important;
}

.rayform-public-question:last-child,
.public-question:last-child,
.question-card:last-child,
.form-question:last-child,
.question-item:last-child{
    border-bottom:0 !important;
}

.rayform-question-title-row{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    min-height:64px !important;
    padding:18px 20px !important;
    margin:0 0 18px !important;
    border-radius:16px !important;
    background:#EAF4FF !important;
    color:#08244A !important;
}

.rayform-question-number{
    flex:0 0 auto !important;
    width:38px !important;
    height:38px !important;
    border-radius:8px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#0165FE !important;
    color:#FFFFFF !important;
    font-weight:950 !important;
    font-size:15px !important;
}

.rayform-question-title-row h3,
.rayform-question-title-row h4,
.rayform-question-title-row label,
.rayform-question-title-row .question-title,
.rayform-question-title-row .question-text{
    margin:0 !important;
    color:#08244A !important;
    font-size:20px !important;
    font-weight:900 !important;
    line-height:1.35 !important;
}

.rayform-required-star{
    color:#E11D48 !important;
    font-weight:950 !important;
    font-size:20px !important;
    margin-left:2px !important;
}

.rayform-option-list{
    display:grid !important;
    gap:14px !important;
    margin:12px 0 0 !important;
}

.rayform-option-row,
.public-option,
.option-row{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    font-size:18px !important;
    color:#08244A !important;
    font-weight:700 !important;
}

.rayform-option-row input[type="radio"],
.rayform-option-row input[type="checkbox"],
.public-option input[type="radio"],
.public-option input[type="checkbox"],
.option-row input[type="radio"],
.option-row input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    accent-color:#0165FE !important;
}

.rayform-public-numbered-old-ui input[type="text"],
.rayform-public-numbered-old-ui input[type="email"],
.rayform-public-numbered-old-ui input[type="number"],
.rayform-public-numbered-old-ui input[type="date"],
.rayform-public-numbered-old-ui input[type="time"],
.rayform-public-numbered-old-ui textarea,
.rayform-public-numbered-old-ui select{
    width:100% !important;
    min-height:54px !important;
    border-radius:12px !important;
    border:1px solid rgba(1,101,254,.18) !important;
    background:#FFFFFF !important;
    padding:0 16px !important;
    color:#08244A !important;
    font-weight:650 !important;
}

.rayform-public-numbered-old-ui textarea{
    min-height:120px !important;
    padding-top:14px !important;
}

@media(max-width:700px){
    .rayform-question-title-row{
        padding:14px !important;
        gap:10px !important;
    }

    .rayform-question-title-row h3,
    .rayform-question-title-row h4,
    .rayform-question-title-row label,
    .rayform-question-title-row .question-title,
    .rayform-question-title-row .question-text{
        font-size:17px !important;
    }
}


/* =========================================================
   PATCH - PUBLIC USER FORM PERSIS MODEL LAMA / GAMBAR 2
   Section bar, Section title, nomor pertanyaan, required hanya * merah.
========================================================= */

.rayform-public-ms-old-ui .required-note{
    display:none !important;
}

/* Hilangkan style box pertanyaan pink dari patch sebelumnya */
.rayform-public-ms-old-ui .rayform-question-title-row{
    background:transparent !important;
    border-radius:0 !important;
    min-height:auto !important;
    padding:0 !important;
    margin:0 !important;
    display:contents !important;
}

.rayform-public-ms-old-ui .rayform-section-number,
.rayform-public-ms-old-ui .rayform-question-number{
    background:transparent !important;
    color:inherit !important;
    width:auto !important;
    height:auto !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

/* Card utama */
.rayform-public-ms-old-ui .rayform-public-card,
.rayform-public-ms-old-ui .public-form-card,
.rayform-public-ms-old-ui .form-card{
    border-radius:28px !important;
    overflow:hidden !important;
}

/* Section model lama */
.rayform-public-ms-old-ui .rayform-ms-section,
.rayform-public-ms-old-ui .rayform-public-section,
.rayform-public-ms-old-ui .public-section,
.rayform-public-ms-old-ui .section-card,
.rayform-public-ms-old-ui [data-section-card]{
    margin:0 !important;
    background:#FFFFFF !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.rayform-public-ms-old-ui .rayform-ms-section-strip{
    display:block !important;
    width:100% !important;
    min-height:72px !important;
    padding:24px 72px !important;
    background:#EAF4FF !important;
    border-top:1px solid rgba(1,101,254,.12) !important;
    border-bottom:1px solid rgba(1,101,254,.12) !important;
    color:#08244A !important;
    font-size:18px !important;
    font-weight:900 !important;
}

.rayform-public-ms-old-ui .rayform-ms-section-head-hidden,
.rayform-public-ms-old-ui .rayform-public-section-head,
.rayform-public-ms-old-ui .section-header{
    display:none !important;
}

.rayform-public-ms-old-ui .rayform-ms-section-title{
    margin:72px 96px 44px !important;
    color:#08244A !important;
    font-size:38px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    letter-spacing:-.8px !important;
}

/* Question model lama */
.rayform-public-ms-old-ui .rayform-ms-question,
.rayform-public-ms-old-ui .rayform-public-question,
.rayform-public-ms-old-ui .public-question,
.rayform-public-ms-old-ui .question-card,
.rayform-public-ms-old-ui .form-question,
.rayform-public-ms-old-ui .question-item,
.rayform-public-ms-old-ui [data-question-card]{
    padding:0 96px 34px !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
}

.rayform-public-ms-old-ui .rayform-ms-question-head{
    display:flex !important;
    align-items:flex-start !important;
    gap:22px !important;
    margin:0 0 26px !important;
    color:#08244A !important;
}

.rayform-public-ms-old-ui .rayform-ms-question-number{
    flex:0 0 auto !important;
    min-width:34px !important;
    color:#08244A !important;
    font-size:27px !important;
    line-height:1.25 !important;
    font-weight:950 !important;
}

.rayform-public-ms-old-ui .rayform-ms-question-head h3{
    margin:0 !important;
    color:#08244A !important;
    font-size:27px !important;
    line-height:1.25 !important;
    font-weight:950 !important;
    letter-spacing:-.35px !important;
}

.rayform-public-ms-old-ui .rayform-required-star{
    color:#E11D48 !important;
    font-weight:950 !important;
    font-size:27px !important;
}

/* Options */
.rayform-public-ms-old-ui .rayform-ms-option,
.rayform-public-ms-old-ui .rayform-option-row,
.rayform-public-ms-old-ui .public-option,
.rayform-public-ms-old-ui .option-row,
.rayform-public-ms-old-ui .rayform-public-question label,
.rayform-public-ms-old-ui .question-card label{
    display:flex !important;
    align-items:center !important;
    gap:22px !important;
    margin:18px 0 18px 62px !important;
    color:#08244A !important;
    font-size:23px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

.rayform-public-ms-old-ui input[type="radio"],
.rayform-public-ms-old-ui input[type="checkbox"]{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    accent-color:#0165FE !important;
}

.rayform-public-ms-old-ui input[type="text"],
.rayform-public-ms-old-ui input[type="email"],
.rayform-public-ms-old-ui input[type="number"],
.rayform-public-ms-old-ui input[type="date"],
.rayform-public-ms-old-ui input[type="time"],
.rayform-public-ms-old-ui textarea,
.rayform-public-ms-old-ui select{
    width:calc(100% - 124px) !important;
    margin-left:62px !important;
    min-height:54px !important;
    border-radius:12px !important;
    border:1px solid rgba(1,101,254,.18) !important;
    background:#FFFFFF !important;
    padding:0 16px !important;
    color:#08244A !important;
    font-weight:650 !important;
}

.rayform-public-ms-old-ui textarea{
    min-height:120px !important;
    padding-top:14px !important;
}

/* Submit area bawah */
.rayform-public-ms-old-ui .rayform-ms-submit-wrap{
    margin-top:78px !important;
    padding:24px 96px 82px !important;
    border-top:1px solid rgba(8,36,74,.08) !important;
}

.rayform-public-ms-old-ui .rayform-public-submit{
    min-height:62px !important;
    padding:0 34px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#0165FE,#24C6F3) !important;
    color:#FFFFFF !important;
    border:0 !important;
    font-size:19px !important;
    font-weight:950 !important;
    box-shadow:0 20px 42px rgba(1,101,254,.22) !important;
}

@media(max-width:760px){
    .rayform-public-ms-old-ui .rayform-ms-section-strip{
        padding:20px 24px !important;
    }

    .rayform-public-ms-old-ui .rayform-ms-section-title{
        margin:42px 28px 34px !important;
        font-size:30px !important;
    }

    .rayform-public-ms-old-ui .rayform-ms-question,
    .rayform-public-ms-old-ui .rayform-public-question,
    .rayform-public-ms-old-ui .public-question,
    .rayform-public-ms-old-ui .question-card,
    .rayform-public-ms-old-ui .form-question,
    .rayform-public-ms-old-ui .question-item,
    .rayform-public-ms-old-ui [data-question-card]{
        padding:0 28px 28px !important;
    }

    .rayform-public-ms-old-ui .rayform-ms-question-head h3,
    .rayform-public-ms-old-ui .rayform-ms-question-number{
        font-size:22px !important;
    }

    .rayform-public-ms-old-ui .rayform-ms-option,
    .rayform-public-ms-old-ui .rayform-option-row,
    .rayform-public-ms-old-ui .public-option,
    .rayform-public-ms-old-ui .option-row,
    .rayform-public-ms-old-ui .rayform-public-question label,
    .rayform-public-ms-old-ui .question-card label{
        margin-left:42px !important;
        font-size:19px !important;
    }

    .rayform-public-ms-old-ui .rayform-ms-submit-wrap{
        padding:24px 28px 58px !important;
    }
}


/* =========================================================
   PATCH - PAKSA TAMPILAN PUBLIC FORM SEPERTI GAMBAR KE-2
   Hanya tampilan user isi form.
========================================================= */

.rayform-public-old-section-ui .required-note{
    display:none !important;
}

/* Matikan tampilan question pink/card sebelumnya */
.rayform-public-old-section-ui .rayform-question-title-row{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
}

.rayform-public-old-section-ui .rayform-force-section-wrap,
.rayform-public-old-section-ui .rayform-ms-section,
.rayform-public-old-section-ui .rayform-public-section,
.rayform-public-old-section-ui .public-section,
.rayform-public-old-section-ui .section-card,
.rayform-public-old-section-ui [data-section-card]{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
    overflow:visible !important;
}

.rayform-public-old-section-ui .rayform-ms-section-strip{
    display:block !important;
    width:100% !important;
    min-height:72px !important;
    padding:24px 72px !important;
    background:#EAF4FF !important;
    border-top:1px solid rgba(1,101,254,.12) !important;
    border-bottom:1px solid rgba(1,101,254,.12) !important;
    color:#08244A !important;
    font-size:18px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
}

.rayform-public-old-section-ui .rayform-ms-section-title{
    display:block !important;
    margin:72px 96px 44px !important;
    padding:0 !important;
    color:#08244A !important;
    font-size:38px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    letter-spacing:-.8px !important;
    background:transparent !important;
}

.rayform-public-old-section-ui .rayform-force-question,
.rayform-public-old-section-ui .rayform-ms-question,
.rayform-public-old-section-ui [data-question-card],
.rayform-public-old-section-ui .rayform-public-question,
.rayform-public-old-section-ui .public-question,
.rayform-public-old-section-ui .question-card,
.rayform-public-old-section-ui .form-question,
.rayform-public-old-section-ui .question-item{
    display:block !important;
    padding:0 96px 34px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.rayform-public-old-section-ui .rayform-ms-question-head{
    display:flex !important;
    align-items:flex-start !important;
    gap:22px !important;
    margin:0 0 26px !important;
    padding:0 !important;
    background:transparent !important;
    color:#08244A !important;
}

.rayform-public-old-section-ui .rayform-ms-question-number{
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    height:auto !important;
    background:transparent !important;
    color:#08244A !important;
    font-size:27px !important;
    line-height:1.25 !important;
    font-weight:950 !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

.rayform-public-old-section-ui .rayform-ms-question-head h3{
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    color:#08244A !important;
    font-size:27px !important;
    line-height:1.25 !important;
    font-weight:950 !important;
    letter-spacing:-.35px !important;
}

.rayform-public-old-section-ui .rayform-required-star{
    color:#E11D48 !important;
    font-weight:950 !important;
    font-size:27px !important;
}

.rayform-public-old-section-ui .rayform-ms-option,
.rayform-public-old-section-ui .rayform-force-question label,
.rayform-public-old-section-ui [data-question-card] label,
.rayform-public-old-section-ui .question-card label,
.rayform-public-old-section-ui .public-question label{
    display:flex !important;
    align-items:center !important;
    gap:22px !important;
    margin:18px 0 18px 62px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    color:#08244A !important;
    font-size:23px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

.rayform-public-old-section-ui input[type="radio"],
.rayform-public-old-section-ui input[type="checkbox"]{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    accent-color:#0165FE !important;
}

.rayform-public-old-section-ui input[type="text"],
.rayform-public-old-section-ui input[type="email"],
.rayform-public-old-section-ui input[type="number"],
.rayform-public-old-section-ui input[type="date"],
.rayform-public-old-section-ui input[type="time"],
.rayform-public-old-section-ui textarea,
.rayform-public-old-section-ui select{
    width:calc(100% - 124px) !important;
    margin-left:62px !important;
    min-height:54px !important;
    border-radius:12px !important;
    border:1px solid rgba(1,101,254,.18) !important;
    background:#FFFFFF !important;
    padding:0 16px !important;
    color:#08244A !important;
    font-weight:650 !important;
}

.rayform-public-old-section-ui textarea{
    min-height:120px !important;
    padding-top:14px !important;
}

.rayform-public-old-section-ui .rayform-ms-submit-wrap{
    margin-top:78px !important;
    padding:24px 96px 82px !important;
    border-top:1px solid rgba(8,36,74,.08) !important;
}

.rayform-public-old-section-ui .rayform-public-submit{
    min-height:62px !important;
    padding:0 34px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#0165FE,#24C6F3) !important;
    color:#FFFFFF !important;
    border:0 !important;
    font-size:19px !important;
    font-weight:950 !important;
    box-shadow:0 20px 42px rgba(1,101,254,.22) !important;
}

@media(max-width:760px){
    .rayform-public-old-section-ui .rayform-ms-section-strip{
        padding:20px 24px !important;
    }

    .rayform-public-old-section-ui .rayform-ms-section-title{
        margin:42px 28px 34px !important;
        font-size:30px !important;
    }

    .rayform-public-old-section-ui .rayform-force-question,
    .rayform-public-old-section-ui .rayform-ms-question,
    .rayform-public-old-section-ui [data-question-card],
    .rayform-public-old-section-ui .rayform-public-question,
    .rayform-public-old-section-ui .public-question,
    .rayform-public-old-section-ui .question-card,
    .rayform-public-old-section-ui .form-question,
    .rayform-public-old-section-ui .question-item{
        padding:0 28px 28px !important;
    }

    .rayform-public-old-section-ui .rayform-ms-question-head h3,
    .rayform-public-old-section-ui .rayform-ms-question-number{
        font-size:22px !important;
    }

    .rayform-public-old-section-ui .rayform-ms-option,
    .rayform-public-old-section-ui .rayform-force-question label,
    .rayform-public-old-section-ui [data-question-card] label,
    .rayform-public-old-section-ui .question-card label,
    .rayform-public-old-section-ui .public-question label{
        margin-left:42px !important;
        font-size:19px !important;
    }

    .rayform-public-old-section-ui .rayform-ms-submit-wrap{
        padding:24px 28px 58px !important;
    }
}


/* =========================================================
   PATCH FINAL - NOMOR PERTANYAAN + SECTION MUNCUL DI PUBLIC/PREVIEW
========================================================= */

.rayform-final-numbered-ui .required-note{
    display:none !important;
}

/* Hilangkan style pink/box lama pada title question */
.rayform-final-numbered-ui .rayform-question-title-row,
.rayform-final-numbered-ui .rayform-ms-question-head,
.rayform-final-numbered-ui .rayform-public-question > h3,
.rayform-final-numbered-ui .question-card > h3{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Section wrapper */
.rayform-final-numbered-ui .rayform-final-section{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#FFFFFF !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.rayform-final-numbered-ui .rayform-final-section-strip{
    display:block !important;
    width:100% !important;
    min-height:72px !important;
    padding:24px 72px !important;
    background:#EAF4FF !important;
    border-top:1px solid rgba(1,101,254,.12) !important;
    border-bottom:1px solid rgba(1,101,254,.12) !important;
    color:#08244A !important;
    font-size:18px !important;
    font-weight:900 !important;
}

.rayform-final-numbered-ui .rayform-final-section-title{
    display:block !important;
    margin:72px 96px 44px !important;
    padding:0 !important;
    color:#08244A !important;
    font-size:38px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    letter-spacing:-.8px !important;
    background:transparent !important;
}

/* Question layout */
.rayform-final-numbered-ui .rayform-final-question{
    display:block !important;
    padding:0 96px 34px !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.rayform-final-numbered-ui .rayform-final-question-head{
    display:flex !important;
    align-items:flex-start !important;
    gap:22px !important;
    margin:0 0 26px !important;
    padding:0 !important;
    background:transparent !important;
    color:#08244A !important;
}

.rayform-final-numbered-ui .rayform-final-question-number{
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    height:auto !important;
    background:transparent !important;
    color:#08244A !important;
    font-size:27px !important;
    line-height:1.25 !important;
    font-weight:950 !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

.rayform-final-numbered-ui .rayform-final-question-head h3{
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    color:#08244A !important;
    font-size:27px !important;
    line-height:1.25 !important;
    font-weight:950 !important;
    letter-spacing:-.35px !important;
}

.rayform-final-numbered-ui .rayform-required-star{
    color:#E11D48 !important;
    font-weight:950 !important;
    font-size:27px !important;
}

/* Options */
.rayform-final-numbered-ui .rayform-final-option{
    display:flex !important;
    align-items:center !important;
    gap:22px !important;
    margin:18px 0 18px 62px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    color:#08244A !important;
    font-size:23px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

.rayform-final-numbered-ui .rayform-final-option input[type="radio"],
.rayform-final-numbered-ui .rayform-final-option input[type="checkbox"]{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    accent-color:#0165FE !important;
}

.rayform-final-numbered-ui .rayform-final-submit-wrap{
    margin-top:78px !important;
    padding:24px 96px 82px !important;
    border-top:1px solid rgba(8,36,74,.08) !important;
}

.rayform-final-numbered-ui .rayform-public-submit{
    min-height:62px !important;
    padding:0 34px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#0165FE,#24C6F3) !important;
    color:#FFFFFF !important;
    border:0 !important;
    font-size:19px !important;
    font-weight:950 !important;
    box-shadow:0 20px 42px rgba(1,101,254,.22) !important;
}

@media(max-width:760px){
    .rayform-final-numbered-ui .rayform-final-section-strip{
        padding:20px 24px !important;
    }

    .rayform-final-numbered-ui .rayform-final-section-title{
        margin:42px 28px 34px !important;
        font-size:30px !important;
    }

    .rayform-final-numbered-ui .rayform-final-question{
        padding:0 28px 28px !important;
    }

    .rayform-final-numbered-ui .rayform-final-question-head h3,
    .rayform-final-numbered-ui .rayform-final-question-number{
        font-size:22px !important;
    }

    .rayform-final-numbered-ui .rayform-final-option{
        margin-left:42px !important;
        font-size:19px !important;
    }

    .rayform-final-numbered-ui .rayform-final-submit-wrap{
        padding:24px 28px 58px !important;
    }
}

/* =========================================================
   FIX PUBLIC FORM: judul form muncul, section tidak double,
   dan nomor soal tampil rapi. Tidak mengubah database.
   ========================================================= */
.rayform-public-title-card{
    background:linear-gradient(135deg,#FFFFFF,#EAF8FF) !important;
    padding:42px 56px !important;
    border-bottom:1px solid rgba(1,101,254,.14) !important;
}

.rayform-public-title-card h1{
    color:#08244A !important;
    font-size:42px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    letter-spacing:-.8px !important;
}

.rayform-public-title-card p{
    color:#64748B !important;
    font-size:17px !important;
    line-height:1.6 !important;
}

.rayform-public-section-card{
    padding:54px 56px 46px !important;
    border-bottom:1px solid rgba(1,101,254,.14) !important;
}

.rayform-public-section-card:last-of-type{
    border-bottom:0 !important;
}

.rayform-public-section-title{
    margin:0 0 38px !important;
    color:#08244A !important;
    font-size:38px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    letter-spacing:-.6px !important;
}

.rayform-public-question-card{
    margin-bottom:44px !important;
}

.rayform-public-question-head{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
    min-height:66px !important;
    padding:12px 22px !important;
    background:#EAF4FF !important;
    border:1px solid #B8D6FF !important;
    border-radius:22px !important;
    color:#08244A !important;
    font-size:20px !important;
    font-weight:950 !important;
}

.rayform-public-question-number{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:9px !important;
    background:#0165FE !important;
    color:#FFFFFF !important;
    font-size:18px !important;
    font-weight:950 !important;
}

.rayform-public-question-text{
    flex:0 1 auto !important;
}

.question-head b{
    color:#E11D48 !important;
    font-size:24px !important;
    line-height:1 !important;
}

.rayform-public-question-head em{
    color:#0165FE !important;
    font-size:15px !important;
    font-style:normal !important;
    font-weight:950 !important;
    margin-left:0 !important;
}

.respondent-question .choice{
    display:flex !important;
    align-items:center !important;
    gap:16px !important;
    margin:18px 0 !important;
    color:#08244A !important;
    font-size:18px !important;
}

.respondent-question .choice input[type="radio"],
.respondent-question .choice input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    accent-color:#0165FE !important;
}

.public-question-image img{
    display:block !important;
    max-width:min(360px,100%) !important;
    height:auto !important;
    border-radius:20px !important;
    border:1px solid #B8D6FF !important;
}

.public-option-image img,
.dropdown-option-images img{
    max-width:96px !important;
    max-height:96px !important;
    object-fit:contain !important;
    border-radius:12px !important;
    border:1px solid #D7E6FF !important;
}

@media(max-width:760px){
    .rayform-public-title-card,
    .rayform-public-section-card{
        padding-left:24px !important;
        padding-right:24px !important;
    }

    .rayform-public-title-card h1{
        font-size:32px !important;
    }

    .rayform-public-section-title{
        font-size:30px !important;
    }

    .rayform-public-question-head{
        align-items:flex-start !important;
        gap:12px !important;
        font-size:18px !important;
    }
}

/* =========================================================
   FIX BUILDER DEFAULT TONE - BIRU RAYFORM
   Scope hanya halaman builder. Tidak menyentuh database.
========================================================= */
.theme-scope{
    --accent:#0165FE !important;
    --accent2:#20D2FF !important;
    --ink:#0A2449 !important;
    --muted:#64748B !important;
    --soft-theme:#EAF4FF !important;
    --page-bg:
        radial-gradient(circle at 8% 0%, rgba(1,101,254,.12), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(32,210,255,.14), transparent 34%),
        linear-gradient(135deg,#F7FBFF 0%,#FFFFFF 48%,#EEF6FF 100%) !important;
}

.theme-scope .builder-layout{
    background:
        radial-gradient(circle at 8% 0%, rgba(1,101,254,.12), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(32,210,255,.14), transparent 34%),
        linear-gradient(135deg,#F7FBFF 0%,#FFFFFF 48%,#EEF6FF 100%) !important;
}

.theme-scope .builder-header{
    background:rgba(255,255,255,.92) !important;
    border-bottom:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 12px 40px rgba(10,36,73,.07) !important;
}

.theme-scope .builder-title,
.theme-scope .form-title-input,
.theme-scope .section-editor strong,
.theme-scope .question-summary h3,
.theme-scope .add-section-card h2{
    color:#0A2449 !important;
}

.theme-scope .builder-title span,
.theme-scope .section-editor small,
.theme-scope .question-summary small,
.theme-scope .title-form textarea::placeholder{
    color:#64748B !important;
}

.theme-scope .builder-nav button,
.theme-scope .builder-nav a{
    background:#FFFFFF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.14) !important;
    box-shadow:0 10px 28px rgba(10,36,73,.07) !important;
}

.theme-scope .builder-nav button:hover,
.theme-scope .builder-nav a:hover{
    color:#0165FE !important;
    background:#EAF4FF !important;
}

.theme-scope .builder-nav .publish-btn{
    background:linear-gradient(135deg,#0165FE,#20D2FF) !important;
    color:#FFFFFF !important;
    border:0 !important;
    box-shadow:0 16px 36px rgba(1,101,254,.22) !important;
}

.theme-scope .builder-nav .response-btn{
    background:#FFFFFF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.24) !important;
}

.theme-scope .builder-side{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 22px 62px rgba(10,36,73,.09) !important;
}

.theme-scope .builder-side button,
.theme-scope .builder-side a{
    background:#EAF4FF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.12) !important;
}

.theme-scope .builder-side .side-main{
    background:linear-gradient(135deg,#0165FE,#20D2FF) !important;
    color:#FFFFFF !important;
    border:0 !important;
}

.theme-scope .form-hero-card,
.theme-scope .section-card,
.theme-scope .add-section-card{
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 24px 70px rgba(10,36,73,.09) !important;
}

.theme-scope .title-form input,
.theme-scope .title-form textarea,
.theme-scope .add-section-card input,
.theme-scope .add-section-card textarea,
.theme-scope .section-edit-form input,
.theme-scope .section-edit-form textarea,
.theme-scope .question-card input,
.theme-scope .question-card textarea,
.theme-scope .question-card select{
    background:#FFFFFF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.18) !important;
}

.theme-scope .title-form input:focus,
.theme-scope .title-form textarea:focus,
.theme-scope .add-section-card input:focus,
.theme-scope .add-section-card textarea:focus,
.theme-scope .section-edit-form input:focus,
.theme-scope .section-edit-form textarea:focus,
.theme-scope .question-card input:focus,
.theme-scope .question-card textarea:focus,
.theme-scope .question-card select:focus{
    border-color:#0165FE !important;
    box-shadow:0 0 0 4px rgba(1,101,254,.10) !important;
}

.theme-scope .mini-btn,
.theme-scope .all-save-bottom-btn,
.theme-scope .all-save-btn,
.theme-scope .add-option-btn{
    background:linear-gradient(135deg,#0165FE,#20D2FF) !important;
    color:#FFFFFF !important;
    border:0 !important;
    box-shadow:0 16px 36px rgba(1,101,254,.22) !important;
}

.theme-scope .meta-pills span{
    background:#EAF4FF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.14) !important;
}

.theme-scope .section-editor{
    background:#F7FBFF !important;
    border:1px solid rgba(1,101,254,.16) !important;
}

.theme-scope .section-editor summary{
    background:linear-gradient(135deg,#EAF4FF,#FFFFFF) !important;
    border:1px solid rgba(1,101,254,.14) !important;
    border-radius:20px !important;
    padding:14px !important;
}

.theme-scope .section-edit-pill,
.theme-scope .question-summary .edit-btn,
.theme-scope .edit-btn{
    background:#FFFFFF !important;
    color:#0165FE !important;
    border:1px solid rgba(1,101,254,.22) !important;
    box-shadow:0 12px 28px rgba(1,101,254,.10) !important;
}

.theme-scope .section-delete-btn,
.theme-scope .question-delete-btn,
.theme-scope .question-tools .tool-btn.danger{
    background:#FFF1F2 !important;
    color:#BE123C !important;
    border:1px solid #FECDD3 !important;
}

.theme-scope .question-card{
    background:linear-gradient(180deg,#FFFFFF,#F7FBFF) !important;
    border:1px solid rgba(1,101,254,.16) !important;
    box-shadow:0 20px 58px rgba(10,36,73,.08) !important;
}

.theme-scope .active-question{
    border-top:5px solid #0165FE !important;
}

.theme-scope .q-type,
.theme-scope .question-badge,
.theme-scope .type-badge{
    background:#EAF4FF !important;
    color:#0165FE !important;
}

.theme-scope .option-chip,
.theme-scope .option-preview span,
.theme-scope .switch-card,
.theme-scope .switch-mini{
    background:#EAF4FF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.14) !important;
}

.theme-scope .add-question-main,
.theme-scope .add-new-question,
.theme-scope .add-question-toggle,
.theme-scope .add-question-picker summary{
    color:#0165FE !important;
}

.theme-scope .add-question-main .plus,
.theme-scope .add-new-question .plus,
.theme-scope .add-question-toggle .plus{
    background:linear-gradient(135deg,#0165FE,#20D2FF) !important;
    color:#FFFFFF !important;
}

.theme-scope .slide-panel{
    background:#FFFFFF !important;
    border-left:1px solid rgba(1,101,254,.16) !important;
    box-shadow:-20px 0 60px rgba(10,36,73,.10) !important;
}

.theme-scope .share-box,
.theme-scope .article-preview{
    background:#EAF4FF !important;
    color:#0A2449 !important;
    border:1px solid rgba(1,101,254,.14) !important;
}

/* FIX TIMER PUBLIC FORM: mulai saat user buka /f/..., tidak reset saat refresh */
.rayform-public-timer-strip{
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
}
.rayform-public-form-blurred{
    filter:blur(7px) !important;
    pointer-events:none !important;
    user-select:none !important;
}
.rayform-expired-overlay[hidden]{
    display:none !important;
}
.rayform-expired-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:9999 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
    background:rgba(15, 23, 42, .34) !important;
    backdrop-filter:blur(9px) !important;
}
.rayform-expired-card{
    width:min(420px, 92vw) !important;
    padding:34px 32px !important;
    border-radius:28px !important;
    background:#fff !important;
    border:1px solid #CFE2FF !important;
    box-shadow:0 30px 80px rgba(8,36,74,.22) !important;
    text-align:center !important;
}
.rayform-expired-logo{
    display:block !important;
    max-width:170px !important;
    height:auto !important;
    margin:0 auto 22px !important;
}
.rayform-expired-icon{
    width:58px !important;
    height:58px !important;
    margin:0 auto 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:18px !important;
    background:#F4F9FF !important;
    border:1px solid #B8D6FF !important;
    color:#0165FE !important;
    font-size:28px !important;
}
.rayform-expired-card h2{
    margin:0 0 8px !important;
    color:#08244A !important;
    font-size:28px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
}
.rayform-expired-card p{
    margin:0 !important;
    color:#64748B !important;
    font-size:15px !important;
    line-height:1.65 !important;
    font-weight:800 !important;
}

/* FIX KHUSUS TIMER PUBLIC/PREVIEW: rapihkan posisi agar lurus dengan card form */
.theme-scope .rayform-public-timer-strip.timer-strip,
.theme-scope .timer-strip.rayform-public-timer-strip{
    position:sticky !important;
    top:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:min(1080px, 92vw) !important;
    max-width:1080px !important;
    height:54px !important;
    margin:0 auto 0 !important;
    padding:0 22px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    background:#FFFFFF !important;
    border:1px solid rgba(1,101,254,.14) !important;
    border-top:0 !important;
    border-radius:0 0 20px 20px !important;
    box-shadow:0 16px 42px rgba(10,36,73,.10) !important;
    z-index:70 !important;
}

.theme-scope .rayform-public-timer-strip .timer-progress{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:8px !important;
    margin:0 !important;
    border-radius:999px !important;
    background:#EEF2F7 !important;
    overflow:hidden !important;
}

.theme-scope .rayform-public-timer-strip .timer-clock{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    margin:0 !important;
    white-space:nowrap !important;
    color:#0A2449 !important;
    font-size:18px !important;
    line-height:1 !important;
    font-weight:900 !important;
}

.theme-scope .rayform-public-timer-strip .timer-clock strong,
.theme-scope .rayform-public-timer-strip #timerText{
    display:inline-block !important;
    min-width:54px !important;
    text-align:left !important;
    font-size:20px !important;
    line-height:1 !important;
    color:#0A2449 !important;
    font-weight:950 !important;
}

@media(max-width:760px){
    .theme-scope .rayform-public-timer-strip.timer-strip,
    .theme-scope .timer-strip.rayform-public-timer-strip{
        width:92vw !important;
        height:50px !important;
        padding:0 14px !important;
        gap:10px !important;
        border-radius:0 0 18px 18px !important;
    }

    .theme-scope .rayform-public-timer-strip .timer-clock,
    .theme-scope .rayform-public-timer-strip .timer-clock strong,
    .theme-scope .rayform-public-timer-strip #timerText{
        font-size:16px !important;
    }
}