/* ===== Modals ===== */
.acl-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(10px) saturate(1.5);-webkit-backdrop-filter:blur(10px) saturate(1.5);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-spring)}
.acl-modal-overlay.visible{opacity:1;pointer-events:auto}
.acl-modal{background:var(--md-surface);border-radius:var(--radius-md);padding:0;width:480px;max-width:90vw;box-shadow:0 24px 48px rgba(0,82,217,.12),0 8px 16px rgba(0,0,0,.08);transform:translateY(20px) scale(.97);transition:transform .35s var(--ease-spring),box-shadow .35s}
.acl-modal-overlay.visible .acl-modal{transform:translateY(0) scale(1)}
.acl-modal-head2{padding:24px 28px 0;display:flex;align-items:center;justify-content:space-between}
.acl-modal-head2 h2{font-family:'Google Sans',sans-serif;font-size:20px;font-weight:500}
.acl-modal-close2{width:36px;height:36px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.acl-modal-close2:hover{background:var(--md-surface-2)}
.acl-modal-close2 .material-symbols-outlined{font-size:22px;color:var(--md-on-surface-variant)}
.acl-modal-body2{padding:20px 28px 28px;display:flex;flex-direction:column;gap:18px}
.acl-modal-field2{display:flex;flex-direction:column;gap:6px}
.acl-modal-field2 label{font-size:13px;font-weight:500;color:var(--md-on-surface)}
.acl-modal-field2 .acl-mf-desc{font-size:11px;color:var(--md-on-surface-variant);margin-top:-2px}
.acl-modal-input2{height:48px;padding:0 16px;border-radius:var(--radius-xs);border:1px solid var(--md-outline-variant);background:var(--md-surface-1);font-family:inherit;font-size:14px;color:var(--md-on-surface);outline:none;transition:all .2s}
.acl-modal-input2:focus{border-color:var(--md-primary);box-shadow:0 0 12px rgba(0,82,217,.15),0 0 4px rgba(0,82,217,.1)}
.acl-modal-input2::placeholder{color:var(--md-outline)}
.acl-modal-footer2{padding:0 28px 24px;display:flex;justify-content:flex-end;gap:10px}
.acl-modal-btn2{height:40px;padding:0 24px;border-radius:20px;border:none;font-family:'Google Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.acl-modal-btn2.btn-cancel{background:var(--md-surface-2);color:var(--md-on-surface-variant)}
.acl-modal-btn2.btn-cancel:hover{background:var(--md-surface-3)}
.acl-modal-btn2.btn-confirm{background:var(--md-primary);color:var(--md-on-primary)}
.acl-modal-btn2.btn-confirm:hover{box-shadow:var(--shadow-1)}
/* WX Modal */
.acl-wx-modal2{width:520px}
.acl-wx-section{display:flex;flex-direction:column;gap:14px}
.acl-wx-section h4{font-size:14px;font-weight:600;color:var(--md-on-surface);display:flex;align-items:center;gap:6px}
.acl-wx-desc{font-size:12px;color:var(--md-on-surface-variant);margin-top:-8px}
.acl-wx-help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--md-outline);font-size:10px;font-weight:700;color:var(--md-outline);cursor:help}
.acl-wx-copy-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--md-surface-1);border-radius:var(--radius-xs);border:1px solid var(--md-surface-3)}
.acl-wx-copy-row label{font-size:12px;font-weight:600;color:var(--md-on-surface);min-width:110px}
.acl-wx-copy-val{flex:1;font-size:12px;font-family:'Google Sans Text',monospace;color:var(--md-on-surface-variant);word-break:break-all}
.acl-wx-copy-btn{width:28px;height:28px;border:none;border-radius:50%;background:var(--md-surface-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0}
.acl-wx-copy-btn:hover{background:var(--md-primary-container)}
.acl-wx-copy-btn .material-symbols-outlined{font-size:16px;color:var(--md-on-surface-variant)}
.acl-wx-status{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:var(--radius-xs);background:var(--md-surface-1);border:1px solid var(--md-surface-3)}
/* Generic Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(8px) saturate(1.5);-webkit-backdrop-filter:blur(8px) saturate(1.5);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-spring)}
.modal-overlay.visible{opacity:1;pointer-events:all}
.modal-card{width:520px;max-height:80vh;background:var(--md-surface);border-radius:var(--radius-md);box-shadow:0 24px 48px rgba(0,82,217,.12),0 8px 16px rgba(0,0,0,.08);overflow-y:auto;transform:scale(.95) translateY(12px);transition:transform .35s var(--ease-spring),box-shadow .35s}
.modal-overlay.visible .modal-card{transform:scale(1) translateY(0)}
.modal-head{padding:20px 24px 12px;display:flex;align-items:center;gap:10px}
.modal-head h3{font-family:'Google Sans',sans-serif;font-size:16px;font-weight:600;flex:1}
.modal-head .material-symbols-outlined{font-size:24px;color:var(--md-primary)}
.modal-close{width:32px;height:32px;border:none;border-radius:50%;background:var(--md-surface-2);display:flex;align-items:center;justify-content:center;cursor:pointer}.modal-close:hover{background:var(--md-surface-3)}
.modal-close .material-symbols-outlined{font-size:18px;color:var(--md-on-surface-variant)}
.modal-body{padding:8px 24px 20px}
.modal-footer{padding:12px 24px 20px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--md-surface-3)}
.acl-modal-btn{padding:8px 24px;border-radius:var(--radius-lg);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;border:none}
.btn-cancel{background:var(--md-surface-2);color:var(--md-on-surface-variant)}.btn-cancel:hover{background:var(--md-surface-3)}
.btn-confirm{background:var(--md-primary);color:#fff}.btn-confirm:hover{box-shadow:var(--shadow-1)}
.modal-field{margin-bottom:16px}
.modal-field label{font-size:12px;font-weight:600;color:var(--md-on-surface-variant);margin-bottom:6px;display:block}
.modal-input{width:100%;height:40px;border:1.5px solid var(--md-surface-4);border-radius:var(--radius-xs);padding:0 12px;font-family:inherit;font-size:13px;color:var(--md-on-surface);outline:none;transition:border-color .2s}
.modal-input:focus{border-color:var(--md-primary);box-shadow:0 0 12px rgba(0,82,217,.15),0 0 4px rgba(0,82,217,.1)}

/* Preference Drawer */
.pref-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(8px) saturate(1.4);-webkit-backdrop-filter:blur(8px) saturate(1.4);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.pref-drawer-overlay.visible{opacity:1;pointer-events:auto}
.pref-drawer{position:fixed;top:0;right:0;width:480px;max-width:90vw;height:100vh;background:var(--md-surface);box-shadow:-8px 0 32px rgba(0,82,217,.1),-2px 0 8px rgba(0,0,0,.04);transform:translateX(100%);transition:transform .4s var(--ease-spring);display:flex;flex-direction:column;z-index:201}
.pref-drawer-overlay.visible .pref-drawer{transform:translateX(0)}
.pref-drawer-head{padding:20px 24px;border-bottom:1px solid var(--md-surface-3);display:flex;align-items:center;gap:12px;flex-shrink:0}
.pref-drawer-head h2{font-family:'Google Sans',sans-serif;font-size:18px;font-weight:600;flex:1;display:flex;align-items:center;gap:10px}
.pref-drawer-head h2 .material-symbols-outlined{font-size:24px;color:var(--md-primary)}
.pref-drawer-close{width:40px;height:40px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.pref-drawer-close:hover{background:var(--md-surface-2)}
.pref-drawer-close .material-symbols-outlined{font-size:22px;color:var(--md-on-surface-variant)}
.pref-drawer-body{flex:1;overflow-y:auto;padding:24px}
.pref-drawer-section{margin-bottom:28px}
.pref-drawer-section:last-child{margin-bottom:0}
.pref-drawer-section h4{font-size:13px;font-weight:600;color:var(--md-on-surface);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.pref-drawer-section h4 .material-symbols-outlined{font-size:18px;color:var(--md-primary)}
.pref-drawer-field{margin-bottom:18px}
.pref-drawer-field:last-child{margin-bottom:0}
.pref-drawer-field label{font-size:12px;font-weight:600;color:var(--md-on-surface-variant);margin-bottom:8px;display:block}
.pref-drawer-chips{display:flex;flex-wrap:wrap;gap:8px}
.pref-drawer-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:22px;border:1.5px solid var(--md-surface-4);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;color:var(--md-on-surface-variant);background:var(--md-surface)}
.pref-drawer-chip:hover{border-color:var(--md-primary);color:var(--md-primary)}
.pref-drawer-chip.selected{border-color:var(--md-primary);background:var(--md-primary-container);color:var(--md-on-primary-container);font-weight:600}
.pref-drawer-chip .material-symbols-outlined{font-size:18px}
.pref-drawer-range{display:flex;align-items:center;gap:10px}
.pref-drawer-input{height:44px;padding:0 14px;border:1.5px solid var(--md-surface-4);border-radius:var(--radius-xs);font-family:inherit;font-size:14px;color:var(--md-on-surface);background:var(--md-surface-1);outline:none;transition:all .2s;width:120px;text-align:right}
.pref-drawer-input:focus{border-color:var(--md-primary);background:var(--md-surface);box-shadow:0 0 12px rgba(0,82,217,.15),0 0 4px rgba(0,82,217,.1)}
.pref-drawer-unit{font-size:13px;color:var(--md-on-surface-variant)}
.pref-drawer-sep{color:var(--md-outline);font-size:14px}
.pref-drawer-footer{padding:16px 24px;border-top:1px solid var(--md-surface-3);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0}
.pref-drawer-btn{height:42px;padding:0 28px;border-radius:21px;border:none;font-family:'Google Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.pref-drawer-btn.btn-cancel{background:var(--md-surface-2);color:var(--md-on-surface-variant)}
.pref-drawer-btn.btn-cancel:hover{background:var(--md-surface-3)}
.pref-drawer-btn.btn-save{background:var(--md-primary);color:var(--md-on-primary)}
.pref-drawer-btn.btn-save:hover{box-shadow:var(--shadow-1)}
.pref-summary{display:flex;flex-wrap:wrap;gap:8px;padding:16px;background:var(--md-surface-1);border-radius:var(--radius-sm);border:1px solid var(--md-surface-3)}
.pref-summary-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--md-surface);border-radius:16px;font-size:12px;color:var(--md-on-surface-variant);border:1px solid var(--md-surface-3)}
.pref-summary-item .material-symbols-outlined{font-size:14px;color:var(--md-primary)}

/* Create Skill Modal */
textarea.modal-input,#csk-code:focus{border-color:var(--md-primary);box-shadow:0 0 0 1px var(--md-primary)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}