:root{--primary: #475569;--primary-light: #64748b;--primary-dark: #334155;--success: #16a34a;--success-light: #22c55e;--warning: #d97706;--warning-light: #f59e0b;--danger: #dc2626;--danger-light: #ef4444;--info: #0284c7;--info-light: #38bdf8;--app-bg: #f6f8fb;--card-bg: #ffffff;--panel-bg: #ffffff;--toolbar-bg: #f8fafc;--text-primary: #1e293b;--text-secondary: #475569;--text-light: #64748b;--text-white: #ffffff;--border-color: #dbe4ee;--border-light: #edf2f7;--focus-color: #3b82f6;--editor-toolbar-start: #64748b;--editor-toolbar-end: #475569;--editor-button-start: #ffffff;--editor-button-end: #f1f5f9;--editor-button-hover-start: #ffffff;--editor-button-hover-end: #e2e8f0;--editor-icon: #475569;--editor-icon-hover: #1e293b;--grid-header-start: #64748b;--grid-header-end: #475569;--grid-hover: #f5f8fc;--grid-selected: #e8eef6;--grid-row: #ffffff;--grid-row-alt: #fbfcfe;--radius-xs: 6px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--shadow-xs: 0 1px 2px rgba(0,0,0,.05);--shadow-sm: 0 2px 8px rgba(0,0,0,.08);--shadow-md: 0 6px 18px rgba(0,0,0,.1);--shadow-lg: 0 12px 30px rgba(0,0,0,.12);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 18px;--space-xl: 24px;--font-xs: clamp(.7rem,.75vw,.78rem);--font-sm: clamp(.8rem,.85vw,.9rem);--font-md: clamp(.9rem,.95vw,1rem);--font-lg: clamp(1rem,1.15vw,1.15rem);--font-xl: clamp(1.2rem,1.6vw,1.5rem)}:root{--input-height: 32px;--button-height: 32px;--input-height-compact: 30px;--button-height-compact: 30px}:root{--toolbar-size:34px;--toolbar-icon:17px;--button-height:34px;--input-height:34px;--label-size:14px;--text-size:14px;--grid-size:13px;--editor-size:14px}@media(max-width:1440px){:root{--toolbar-size:32px;--toolbar-icon:16px;--button-height:32px;--input-height:32px;--label-size:13px;--text-size:13px;--grid-size:12px;--editor-size:13px}}@media(max-width:1280px){:root{--toolbar-size:30px;--toolbar-icon:15px;--button-height:30px;--input-height:30px;--label-size:12px;--text-size:12px;--grid-size:11px;--editor-size:12px}}@media(max-width:1024px){:root{--toolbar-size:28px;--toolbar-icon:14px;--button-height:28px;--input-height:28px;--label-size:11px;--text-size:11px;--grid-size:11px;--editor-size:11px}}@media(max-width:768px){:root{--toolbar-size:26px;--toolbar-icon:13px;--button-height:26px;--input-height:26px;--label-size:11px;--text-size:11px;--grid-size:10px;--editor-size:11px}}.app-page{width:100%;height:100%;display:flex;overflow:hidden;background:var(--color-bg)}.app-split{width:100%;height:100%}.app-split::part(splitter){width:5px;background:#d7dee7}.left-panel,.right-panel{display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:auto;background:#fff}.editor-header{flex:0 0 auto;padding:12px;border-bottom:1px solid var(--color-border)}.editor-content{flex:1;overflow:auto;padding:12px}.editor-footer{flex:0 0 auto;display:flex;justify-content:flex-end;gap:10px;padding:10px;border-top:1px solid var(--color-border);background:#fff}.grid-panel{flex:1;overflow:auto}.card{background:#fff;border-radius:var(--radius-md);border:1px solid var(--color-border);box-shadow:var(--shadow-xs)}@media(max-width:1200px){.left-panel{min-width:280px}}@media(max-width:1000px){.app-split{flex-direction:column}}vaadin-button{--lumo-button-size: var(--button-height);min-height:var(--button-height);border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:600;padding-inline:14px;cursor:pointer;border:none;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .15s ease;box-shadow:var(--shadow-xs)}.cbt-mode vaadin-button{--lumo-button-size: var(--button-height-compact);min-height:var(--button-height-compact)}vaadin-button::part(label){line-height:1.2;padding:0;font-weight:inherit}vaadin-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}vaadin-button:active{transform:translateY(0);box-shadow:var(--shadow-xs)}vaadin-button:focus-visible{outline:none;box-shadow:0 0 0 2px #3b82f640,var(--shadow-sm)}vaadin-button[disabled]{opacity:.55;cursor:not-allowed;transform:none}vaadin-button.btn-grid{background:linear-gradient(180deg,var(--primary-light),var(--primary));color:var(--text-white)}vaadin-button.toolbar-button{min-width:120px}vaadin-button.btn-icon{width:36px;min-width:36px;height:36px;padding:0}vaadin-button.btn-icon vaadin-icon{width:16px;height:16px}vaadin-button.btn-sm{min-height:30px;font-size:var(--font-xs);padding-inline:10px}vaadin-button.btn-lg{min-height:42px;font-size:var(--font-md);padding-inline:22px}vaadin-button.btn-full{width:100%}.button-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.button-group.right{justify-content:flex-end}.button-group.center{justify-content:center}.btn-success{background:#13602b;color:#fff;border:none}.btn-success:hover{background:#074d1e}.btn-primary{background:#1a4163;color:#fff;border:none}.btn-primary:hover{background:#0a2d4d}.btn-warning{background:#c79a2e;color:#fff;border:none}.btn-warning:hover{background:#b38728}.btn-danger{background:#c45a5a;color:#fff;border:none}.btn-danger:hover{background:#ad4d4d}.btn-secondary{background:#7b8794;color:#fff;border:none}.btn-secondary:hover{background:#6c7783}.editor-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-xs)}.editor-wrapper:focus-within{border-color:var(--focus-color)}.toolbar-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:4px;background:linear-gradient(180deg,var(--editor-toolbar-start),var(--editor-toolbar-end))}.toolbar-wrap vaadin-button{width:28px;min-width:28px;height:28px;padding:0;border-radius:7px;background:linear-gradient(180deg,var(--editor-button-start),var(--editor-button-end));border:1px solid var(--border-color);transition:.18s}.toolbar-wrap vaadin-button:hover{background:linear-gradient(180deg,#fff,#e5edf7)}.toolbar-wrap vaadin-icon{width:14px;height:14px;color:var(--editor-icon)}.toolbar-wrap vaadin-select{width:auto;min-width:85px;font-size:var(--font-xs)}.color-btn{min-width:90px}.editor{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:110px;max-height:220px;padding:8px 10px;border:1px solid var(--lumo-contrast-20pct);border-radius:8px;background:#fff;color:var(--text-primary);font-size:var(--font-sm);line-height:1.45;overflow-y:auto;overflow-x:hidden;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.editor{overflow-y:scroll;overflow-x:hidden;scrollbar-width:auto;scrollbar-color:#9aa4af #eef1f4}.editor::-webkit-scrollbar{width:12px}.editor::-webkit-scrollbar-track{background:#eef1f4;border-radius:0}.editor::-webkit-scrollbar-thumb{background:#9aa4af;border-radius:6px;border:2px solid #eef1f4}.editor::-webkit-scrollbar-thumb:hover{background:#6f7b87}.editor-mini{min-height:55px;max-height:120px;padding:6px 8px}.editor[contenteditable=true]{white-space:normal;overflow-y:auto;overflow-x:hidden}.editor p{margin:0 0 5px}.editor h1{font-size:1.5rem;margin-top:.4em;margin-bottom:.4em}.editor h2{font-size:1.25rem;margin-top:.4em;margin-bottom:.4em}.editor h3{font-size:1.1rem;margin-top:.4em;margin-bottom:.4em}.editor table{width:100%;max-width:100%;border-collapse:collapse;table-layout:auto}.editor td,.editor th{border:1px solid var(--border-color);padding:6px;overflow-wrap:anywhere}.editor img{display:block;max-width:100%;height:auto;margin:8px 0;border-radius:6px}.editor>div{max-width:100%}.editor>div[style*="position: relative"]{max-width:100%;box-sizing:border-box}.editor blockquote{padding:8px 12px;border-left:4px solid var(--primary);background:#f8fafc;margin-top:6px;margin-bottom:6px}.editor-btn{width:28px;min-width:28px;height:28px;padding:0}.editor-btn::part(label){padding:0}.editor-btn vaadin-icon{width:14px;height:14px}.editor:hover{border-color:var(--lumo-primary-color);box-shadow:0 0 0 1px #0000000a}.editor:focus{border-color:var(--lumo-primary-color);box-shadow:0 0 0 2px #0000000f}.image-toolbar{display:flex;gap:4px;margin-left:12px}.selected-editor-image{outline:2px solid #1976d2}.editor-resize-handle{position:absolute;width:10px;height:10px;background:#1976d2;border:2px solid white;border-radius:2px;box-sizing:border-box;cursor:nwse-resize;z-index:10000;pointer-events:auto;-webkit-user-select:none;user-select:none}@media(max-width:1200px){.toolbar-wrap{gap:2px;padding:3px}.toolbar-wrap vaadin-button{width:26px;min-width:26px;height:26px}.toolbar-wrap vaadin-icon{width:13px;height:13px}.editor{min-height:100px;max-height:200px;padding:7px 9px}.editor-mini{min-height:50px;max-height:110px}}@media(max-width:768px){.toolbar-wrap{gap:2px;padding:3px}.toolbar-wrap vaadin-button{width:26px;min-width:26px;height:26px}.toolbar-wrap vaadin-icon{width:13px;height:13px}.toolbar-wrap vaadin-select{min-width:75px}.editor{min-height:90px;max-height:180px;padding:7px 8px;font-size:var(--font-sm);line-height:1.4}.editor-mini{min-height:48px;max-height:100px}}vaadin-form-layout{width:100%;row-gap:12px;column-gap:16px}vaadin-text-field::part(input-field),vaadin-combo-box::part(input-field),vaadin-select::part(input-field){min-height:var(--input-height)}vaadin-text-field::part(label),vaadin-combo-box::part(label),vaadin-select::part(label){font-size:var(--label-size);font-weight:600}@media(max-width:1200px){vaadin-form-layout{column-gap:10px}}@media(max-width:900px){vaadin-form-layout{row-gap:8px}}.type-field{max-width:180px}.score-field{max-width:90px}vaadin-form-layout{width:100%;row-gap:8px;column-gap:12px}vaadin-text-field,vaadin-combo-box,vaadin-select,vaadin-integer-field,vaadin-number-field{width:100%;font-size:var(--text-size)}vaadin-text-field::part(input-field),vaadin-combo-box::part(input-field),vaadin-select::part(input-field),vaadin-integer-field::part(input-field),vaadin-number-field::part(input-field){min-height:32px;height:32px;padding:0 8px}vaadin-text-field::part(label),vaadin-combo-box::part(label),vaadin-select::part(label){font-size:12px;font-weight:700;color:var(--lumo-body-text-color)}vaadin-text-field::part(input-field)::part(value),vaadin-combo-box::part(input-field)::part(value){font-size:13px}vaadin-text-field::part(input-field):focus-within{box-shadow:0 0 0 2px #2563eb33}vaadin-text-field::part(input-field),vaadin-combo-box::part(input-field),vaadin-select::part(input-field),vaadin-integer-field::part(input-field),vaadin-number-field::part(input-field){min-height:var(--input-height)}.cbt-mode vaadin-text-field::part(input-field),.cbt-mode vaadin-combo-box::part(input-field),.cbt-mode vaadin-select::part(input-field),.cbt-mode vaadin-integer-field::part(input-field),.cbt-mode vaadin-number-field::part(input-field){min-height:var(--input-height-compact)}.form-card{width:100%;margin:0;padding:16px;box-sizing:border-box}.grid-modern{width:100%}vaadin-grid{border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;background:var(--card-bg);box-shadow:var(--shadow-xs);font-size:var(--font-sm)}vaadin-grid::part(header-cell){background:linear-gradient(180deg,var(--grid-header-start),var(--grid-header-end));color:#fff;font-weight:700;border-right:1px solid rgba(255,255,255,.08);border-bottom:none;min-height:42px;padding:0 10px}vaadin-grid-sorter{color:#fff}vaadin-grid-sorter::part(content){color:#fff}vaadin-grid::part(body-cell){padding:8px 10px;border-bottom:1px solid var(--border-light);color:var(--text-primary)}vaadin-grid::part(odd-row){background:var(--grid-row-alt)}vaadin-grid::part(even-row){background:var(--grid-row)}vaadin-grid::part(row):hover{background:var(--grid-hover)}vaadin-grid::part(selected-row){background:var(--grid-selected)}vaadin-grid::part(resize-handle){background:#ffffff40}vaadin-grid vaadin-checkbox{transform:scale(.92)}.grid-compact::part(body-cell){padding:4px 8px}.grid-compact::part(header-cell){min-height:34px}.grid-large::part(body-cell){padding:12px 14px}@media(max-width:1200px){vaadin-grid{font-size:var(--font-xs)}vaadin-grid::part(header-cell){min-height:36px}}.grid-soal{border:2px solid var(--border-color)}vaadin-grid::part(row){min-height:32px}vaadin-grid::part(body-cell){padding:4px 8px;line-height:1.2}vaadin-grid::part(header-cell){min-height:32px;padding:4px 8px}vaadin-grid vaadin-vertical-layout,vaadin-grid vaadin-horizontal-layout{padding:0;margin:0;gap:0}vaadin-grid.compact::part(body-cell){padding:2px 6px}vaadin-grid.compact::part(row){min-height:28px}.grid-mapel::part(header-cell){background:linear-gradient(180deg,#10b981,#059669)}.grid-modern{width:100%;flex:1;min-height:0;align-self:stretch}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:2px 12px;height:20px;line-height:20px;border-radius:10px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;box-sizing:border-box;vertical-align:middle;margin:2px 0}.badge-success{background:#4f9d69}.badge-warning{background:#c79a2e}.badge-danger{background:#c45a5a}.badge-primary{background:#4d7da8}.badge-secondary{background:#7b8794}.matching-row{display:flex;align-items:center;width:100%;padding:12px;margin:8px 0;border:1px solid #dbe1e8;border-radius:12px;background:#fff;transition:all .2s ease-in-out}.matching-row:hover{border-color:#6366f1;background:#f5f7ff;box-shadow:0 2px 10px #6366f11a}.matching-row vaadin-text-area:first-child,.matching-row vaadin-text-field:first-child{background:#eff6ff;border-radius:10px}.matching-row vaadin-text-area:last-child,.matching-row vaadin-text-field:last-child{background:#f0fdf4;border-radius:10px}.matching-row>*{flex:1}.matching-row span{display:none}.matching-delete{margin-left:10px;background:#fee2e2;color:#b91c1c;border-radius:10px;transition:.2s}.matching-delete:hover{background:#fecaca;transform:scale(1.05)}.matching-add{margin-left:10px;background:#b7eda1;color:#3a891b;border-radius:10px;transition:.2s}.matching-add:hover{background:#79dd51;transform:scale(1.05)}.matching-row.disabled{opacity:.6;pointer-events:none}.matching-row{transition:transform .15s ease,box-shadow .2s ease}.matching-row:active{transform:scale(.995)}.option-row{width:100%;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px;background:var(--card-bg);box-shadow:var(--shadow-xs)}.option-content{display:flex;width:100%;gap:16px;align-items:flex-start}.option-editor{flex:1;min-width:0}.option-media{width:180px;flex-shrink:0}.option-footer{margin-top:10px}.upload-panel{display:flex;justify-content:center}