:root{--bg: #f2f6f4;--bg-panel: #ffffff;--text: #1a2323;--muted: #596868;--brand: #0e7c86;--brand-dark: #0a646d;--brand-pale: #eaf6f7;--danger: #c0392b;--danger-pale: #fdf3f2;--success: #0a7d30;--border: #d2dedd;--border-hover: #a4c2be;--shadow-xs: 0 1px 2px rgba(0,0,0,.05);--shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);--shadow-md: 0 4px 14px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);--shadow-lg: 0 12px 30px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);--shadow-xl: 0 20px 50px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.07);--ring-brand: 0 0 0 3px rgba(14,124,134,.22);--ring-danger: 0 0 0 3px rgba(192,57,43,.18);--t-fast: .12s ease;--t-base: .18s ease;--t-slow: .28s ease;--t-spring: .32s cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;font-family:IBM Plex Sans,Inter,Segoe UI,system-ui,sans-serif;color:var(--text);background:radial-gradient(ellipse at 0 0,#daf0ec,#f2f6f4 40%,#ebf0f8);-webkit-font-smoothing:antialiased}a{color:var(--brand);text-decoration:none;transition:color var(--t-base)}a:hover{color:var(--brand-dark)}.layout{display:grid;grid-template-columns:256px 1fr;height:100vh;overflow:hidden}.sidebar{padding:1.25rem .75rem;background:linear-gradient(160deg,#0c2a2a,#10373f 55%,#0e2f3e);color:#edfffe;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden}.brand{display:flex;align-items:center;gap:.6rem;margin:0 .5rem .3rem}.brand-logo{width:32px;height:32px;border-radius:.4rem;object-fit:contain;flex-shrink:0;opacity:.92}.sidebar h1{font-size:1.1rem;font-weight:700;letter-spacing:.03em;margin:0;background:linear-gradient(135deg,#6de8de,#aaf5ef);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar nav{display:flex;flex-direction:column;gap:.2rem;margin:.75rem 0 auto}.sidebar a{color:#d2f8f4b8;padding:.55rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:450;display:block;transition:color var(--t-base),background var(--t-base),transform var(--t-fast),box-shadow var(--t-base)}.sidebar a:hover{color:#fff;background:#ffffff12;transform:translate(3px)}.sidebar a.router-link-active{color:#fff;background:#0e7c8652;font-weight:600;box-shadow:inset 3px 0 #4dd5cc,0 2px 10px #0e7c862e}.sidebar a.router-link-active:hover{background:#0e7c866b}.env-pill{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:999px;border:1px solid rgba(80,170,170,.4);background:#50aaaa1a;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8de8e0;margin:0 .5rem .5rem}.env-switcher{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#50aaaa1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238de8e0'/%3E%3C/svg%3E") no-repeat right .5rem center / 8px 5px;border:1px solid rgba(80,170,170,.4);border-radius:999px;color:#8de8e0;cursor:pointer;font-size:.68rem;font-weight:600;letter-spacing:.08em;margin:0 .5rem .5rem;padding:.18rem 1.6rem .18rem .6rem;text-transform:uppercase;width:calc(100% - 1rem)}.env-switcher option{background:#1a2a2f;color:#e0f7f5;text-transform:uppercase}.version{display:block;color:#96d7d473;font-size:.68rem;text-align:center;padding-top:.75rem}.content{display:flex;flex-direction:column;height:100vh;overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:0 1.75rem;height:52px;flex-shrink:0;background:#ffffffbf;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);z-index:10;box-shadow:var(--shadow-xs)}.topbar-left{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.topbar-left h2{margin:0;font-size:1.1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.topbar-user{display:flex;align-items:center;gap:.55rem}.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(14,124,134,.28);box-shadow:0 0 0 2px #fff,var(--shadow-sm);transition:box-shadow var(--t-base),border-color var(--t-base),transform var(--t-fast)}.avatar:hover{border-color:var(--brand);box-shadow:0 0 0 2px #fff,var(--ring-brand);transform:scale(1.05)}.muted{color:var(--muted);font-size:.85rem}.content>section{flex:1;min-height:0;display:flex;flex-direction:column;padding:1rem 1.75rem;overflow-y:auto}.toolbar,.form-actions,.row-inline{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.toolbar{padding-bottom:.75rem}.form-grid{display:grid;gap:1rem;margin-top:1rem}.form-grid label{display:grid;gap:.35rem;min-width:220px;font-size:.85rem;font-weight:500;color:var(--muted);letter-spacing:.01em}.grid{display:grid;gap:1rem}.two-col{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.three-col{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:.875rem;padding:1.25rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--t-base),border-color var(--t-base)}.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover)}.table-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:.75rem}.table-scroll{flex:1;min-height:0;overflow-y:auto;border:1px solid var(--border);border-radius:.875rem;box-shadow:var(--shadow-sm);background:var(--bg-panel)}.data-table{width:100%;border-collapse:collapse;background:var(--bg-panel)}.data-table thead{position:sticky;top:0;z-index:1}.data-table th{background:#f5f9f8;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:.65rem .875rem;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}.data-table td{padding:.6rem .875rem;border-bottom:1px solid rgba(210,222,221,.5);font-size:.875rem;vertical-align:top}.data-table tbody tr{transition:background var(--t-fast)}.data-table tbody tr:hover{background:#eef8f7;cursor:pointer}.data-table tbody tr:last-child td{border-bottom:none}.data-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.data-table th.sortable:hover{color:var(--brand);background:var(--brand-pale)}.th-inner{display:inline-flex;align-items:center;gap:.3rem}.sort-icon{font-size:.75rem;color:var(--brand)}.sort-icon--idle{opacity:.3}.pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.65rem 1rem;flex-shrink:0;border-top:1px solid var(--border);background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.85rem;color:var(--muted)}.tabs{display:flex;gap:.2rem;flex-wrap:wrap;margin:.75rem 0 1.25rem;border-bottom:2px solid var(--border)}.tabs button{border:none;background:transparent;padding:.5rem 1rem;border-radius:.5rem .5rem 0 0;color:var(--muted);font-size:.875rem;font-weight:500;margin-bottom:-2px;border-bottom:2px solid transparent;transition:color var(--t-base),background var(--t-base),border-color var(--t-base);box-shadow:none;transform:none}.tabs button:hover{color:var(--brand);background:var(--brand-pale);transform:none;box-shadow:none}.tabs button.active{background:var(--bg-panel);color:var(--brand);font-weight:600;border-bottom-color:var(--brand);box-shadow:none}.state{flex:1;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:2.5rem 1.5rem;border:1.5px dashed var(--border);border-radius:.875rem;background:#fff9;color:var(--muted);font-size:.9rem;margin-top:.75rem}.state.state-loading{flex-direction:column}.error,.error-text{color:var(--danger)}.success-text{color:var(--success)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-fade{0%,to{opacity:1}50%{opacity:.55}}.spinner{width:26px;height:26px;border:2.5px solid rgba(14,124,134,.16);border-top-color:var(--brand);border-radius:50%;animation:spin .65s linear infinite;flex-shrink:0}.state-loading{animation:pulse-fade 2.2s ease-in-out infinite}button,.button-link{border:1px solid var(--border);padding:.5rem 1rem;border-radius:.5rem;background:#fff;color:var(--text);font-size:.875rem;font-weight:500;cursor:pointer;line-height:1.4;transition:background var(--t-base),border-color var(--t-base),box-shadow var(--t-base),color var(--t-base),transform var(--t-fast);white-space:nowrap;outline:none}button:hover:not(:disabled){border-color:var(--border-hover);box-shadow:var(--shadow-sm);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0);box-shadow:none}button:focus-visible{box-shadow:var(--ring-brand)}button:disabled{opacity:.42;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}.btn-primary:hover:not(:disabled){background:var(--brand-dark);border-color:var(--brand-dark);box-shadow:var(--shadow-sm),var(--ring-brand);color:#fff}.btn-primary:focus-visible{box-shadow:var(--shadow-sm),var(--ring-brand)}.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);font-weight:600}.btn-danger:hover:not(:disabled){background:#a93228;border-color:#a93228;box-shadow:var(--shadow-sm),var(--ring-danger);color:#fff}.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn-ghost:hover:not(:disabled){background:#0000000a;border-color:var(--border);box-shadow:none;color:var(--text);transform:none}.logout-btn{background:transparent;border:1px solid rgba(14,124,134,.28);color:var(--brand);padding:.38rem .875rem;font-size:.8rem;font-weight:500}.logout-btn:hover:not(:disabled){background:var(--brand-pale);border-color:var(--brand);box-shadow:none;color:var(--brand-dark);transform:none}input,select,textarea{border:1.5px solid var(--border);border-radius:.5rem;padding:.55rem .75rem;width:100%;font-size:.9rem;font-family:inherit;background:#fff;color:var(--text);transition:border-color var(--t-base),box-shadow var(--t-base);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}input:hover,select:hover,textarea:hover{border-color:var(--border-hover)}input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--ring-brand)}textarea{resize:vertical;min-height:80px;line-height:1.5}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#08141480;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:grid;place-items:center;padding:1rem;z-index:100}.modal-card{width:min(560px,100%);background:#fff;border-radius:1rem;padding:1.75rem;box-shadow:var(--shadow-xl)}.modal-card h3{margin:0 0 .4rem;font-size:1.1rem;font-weight:700}.modal-card p{color:var(--muted);margin:0 0 1.25rem;line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.25rem}.global-error-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#46080880;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:grid;place-items:center;z-index:1000;padding:1rem}.global-error-card{width:min(640px,100%);border:1px solid #f5b8b8;background:linear-gradient(160deg,#fff,#fff9f9);border-radius:1rem;box-shadow:var(--shadow-xl);padding:1.75rem}.global-error-card h3{margin:0 0 .4rem;color:var(--danger)}.global-error-details{color:#8b3a3a;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.82rem;background:#c0392b0f;padding:.5rem .75rem;border-radius:.4rem;margin:.5rem 0;line-height:1.5}.danger-zone{margin-top:1.5rem;padding:1.25rem;border:1.5px solid #f5b8b8;background:linear-gradient(160deg,#fff 0%,var(--danger-pale) 100%);border-radius:.875rem;box-shadow:var(--shadow-xs)}.danger-zone h4{margin:0 0 .75rem;color:var(--danger);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.page-enter-active{transition:opacity var(--t-slow),transform var(--t-slow)}.page-leave-active{transition:opacity var(--t-base),transform var(--t-base)}.page-enter-from{opacity:0;transform:translateY(10px)}.page-leave-to{opacity:0;transform:translateY(-5px)}.modal-enter-active,.modal-leave-active{transition:opacity var(--t-base)}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-active .modal-card,.modal-enter-active .global-error-card{transition:transform var(--t-spring),opacity var(--t-base)}.modal-leave-active .modal-card,.modal-leave-active .global-error-card{transition:transform var(--t-base),opacity var(--t-base)}.modal-enter-from .modal-card,.modal-enter-from .global-error-card{transform:scale(.92) translateY(16px);opacity:0}.modal-leave-to .modal-card,.modal-leave-to .global-error-card{transform:scale(.96) translateY(8px);opacity:0}.fade-enter-active{transition:opacity var(--t-slow)}.fade-leave-active{transition:opacity var(--t-base)}.fade-enter-from,.fade-leave-to{opacity:0}@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{height:auto;position:static}.content>section{padding:1rem}}