*{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#f8f5ff;--bg-card:#ffffff;--bg-sidebar:#fefefe;--bg-input:#faf8ff;
    --border:#e8e0f0;--border-focus:#d0c4f0;
    --text:#2d2b3a;--text-muted:#9892a6;--text-bright:#1a1828;
    --accent:#ff4d8a;--accent2:#6c63ff;--accent3:#36d7b7;
    --grad:linear-gradient(135deg,#ff4d8a,#c44dff);
    --grad2:linear-gradient(135deg,#6c63ff,#36d7b7);
    --shadow:0 2px 12px rgba(108,99,255,.08);
    --shadow-lg:0 8px 32px rgba(108,99,255,.12);
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 15% 25%,rgba(108,99,255,.03) 0,transparent 50%),radial-gradient(circle at 85% 75%,rgba(255,77,138,.03) 0,transparent 50%);pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(108,99,255,.06) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0}
.layout{display:flex;min-height:100vh;position:relative;z-index:1}

.sidebar{width:240px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;height:100vh;z-index:10;box-shadow:1px 0 8px rgba(108,99,255,.04)}
.sidebar-brand{padding:20px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sidebar-brand-icon{width:26px;height:26px;color:var(--accent);filter:drop-shadow(0 2px 4px rgba(255,77,138,.25))}
.sidebar-brand-text{font-size:16px;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;color:var(--text-muted);text-decoration:none;font-size:14px;font-weight:600;transition:.15s;border:1px solid transparent}
.sidebar-link:hover{background:rgba(108,99,255,.04);color:var(--text)}
.sidebar-link.active{background:var(--grad);color:#fff;box-shadow:0 2px 10px rgba(255,77,138,.2)}
.sidebar-link svg{width:18px;height:18px}
.sidebar-bottom{padding:12px 10px;border-top:1px solid var(--border)}

.main-content{flex:1;margin-left:240px;display:flex;flex-direction:column;min-height:100vh}
.top-bar{background:var(--bg-card);border-bottom:1px solid var(--border);padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 6px rgba(108,99,255,.04)}
.page-title{font-size:18px;font-weight:700;color:var(--text-bright)}
.top-actions{display:flex;gap:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 18px;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 2px 8px rgba(255,77,138,.2)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,77,138,.3)}
.btn-danger{background:rgba(255,77,138,.08);color:var(--accent);border:1px solid rgba(255,77,138,.2)}
.btn-danger:hover{background:rgba(255,77,138,.15)}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--accent2);color:var(--accent2)}

.content{flex:1;overflow-y:auto;padding:24px 28px}

.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.room-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;position:relative;transition:.2s;box-shadow:var(--shadow)}
.room-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.room-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.room-card-name{font-size:16px;font-weight:700;color:var(--text-bright)}
.room-card-code{font-size:11px;color:var(--text-muted);font-weight:600;background:rgba(108,99,255,.06);padding:3px 10px;border-radius:8px;letter-spacing:.5px}
.room-card-meta{display:flex;gap:12px;font-size:13px;color:var(--text-muted);margin-bottom:14px}
.room-card-actions{display:flex;gap:6px}
.room-card-actions .btn{font-size:12px;padding:5px 12px;border-radius:8px}

.room-card-empty{border:2px dashed var(--border);background:transparent;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px;cursor:pointer;transition:.2s}
.room-card-empty:hover{border-color:var(--accent);background:rgba(255,77,138,.02)}
.room-card-empty svg{width:28px;height:28px;color:var(--text-muted);margin-bottom:8px}
.room-card-empty span{font-size:14px;font-weight:600;color:var(--text-muted)}

.modal-overlay{position:fixed;inset:0;background:rgba(45,43,58,.3);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(6px)}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:28px;width:90%;max-width:420px;position:relative;box-shadow:var(--shadow-lg);overflow:hidden}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.modal h3{font-size:18px;font-weight:700;margin-bottom:6px;color:var(--text-bright)}
.modal-desc{font-size:14px;color:var(--text-muted);margin-bottom:16px}
.modal-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border:none;background:rgba(108,99,255,.06);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:.15s}
.modal-close:hover{background:rgba(255,77,138,.08);color:var(--accent)}

.form-group{margin-bottom:14px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-input{width:100%;padding:9px 13px;border:1px solid var(--border);border-radius:10px;font-size:14px;outline:none;transition:.2s;background:var(--bg-input);color:var(--text)}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,77,138,.06)}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:4px}

.toast{position:fixed;bottom:20px;right:20px;padding:10px 18px;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:12px;font-size:14px;font-weight:600;display:none;z-index:200;box-shadow:var(--shadow-lg)}
.toast.show{display:flex;animation:slideIn .25s}
.toast.success{border-color:var(--accent3);color:var(--accent3)}
.toast.error{border-color:var(--accent);color:var(--accent)}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

@media(max-width:1024px){
    .sidebar{width:64px}
    .sidebar-brand-text,.sidebar-link span{display:none}
    .sidebar-brand{justify-content:center;padding:16px 0}
    .sidebar-link{justify-content:center;padding:10px}
    .main-content{margin-left:64px}
    .room-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
@media(max-width:768px){
    .sidebar{transform:translateX(-100%);width:240px;transition:.3s}
    .sidebar.show{transform:translateX(0)}
    .sidebar-brand-text,.sidebar-link span{display:block}
    .sidebar-brand{justify-content:flex-start;padding:20px 18px}
    .sidebar-link{justify-content:flex-start;padding:10px 14px}
    .main-content{margin-left:0}
    .top-bar{padding:0 16px}
    .content{padding:20px 16px}
    .room-grid{grid-template-columns:1fr}
    .menu-toggle{display:flex!important}
}
.menu-toggle{display:none;width:36px;height:36px;border:1px solid var(--border);background:var(--bg-card);border-radius:10px;cursor:pointer;align-items:center;justify-content:center;color:var(--text-muted);transition:.2s}
.menu-toggle:hover{border-color:var(--accent2);color:var(--accent2)}
.menu-toggle svg{width:18px;height:18px}