:root{--bg:#f1f5f9;--surface:#fff;--border:#e5e7eb;--text:#0f172a;--muted:#64748b;--accent:#0f766e;--accent-bg:#ccfbf1;--danger:#dc2626;--ok:#16a34a}
[data-theme="dark"]{--bg:#0b1220;--surface:#111827;--border:#1f2937;--text:#f1f5f9;--muted:#94a3b8;--accent:#2dd4bf;--accent-bg:#134e4a}
*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text)}
input,select,button,textarea{font:inherit;color:inherit}
.layout{display:flex;min-height:100vh}
.navbar{width:236px;background:var(--surface);border-right:1px solid var(--border);padding:22px 16px;display:flex;flex-direction:column;gap:18px}
.brand{font-weight:800;font-size:22px;color:var(--accent);letter-spacing:.3px}
.navbar nav{display:flex;flex-direction:column;gap:4px}
.navbar nav a{padding:10px 14px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:14px}
.navbar nav a.active{background:var(--accent-bg);color:var(--accent);font-weight:600}
.navbar nav a:hover{background:var(--accent-bg);color:var(--accent)}
.nav-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-size:13px;border-top:1px solid var(--border);padding-top:14px}
.nav-user{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600;overflow:hidden}
.avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
[data-theme="dark"] .avatar{color:#04211e}
.nav-user span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar-title{font-weight:700;font-size:18px}
.topbar-actions{display:flex;gap:8px}
.content{padding:24px;max-width:1200px;width:100%;margin:0 auto}
.content h1{font-size:24px;margin:0 0 16px;letter-spacing:-.3px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:16px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi-label{font-size:11px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;font-weight:700}
.kpi-value{font-size:28px;font-weight:800;color:var(--accent)}
.kpi-sub{font-size:12px;color:var(--muted)}.kpi-sub.ok{color:var(--ok)}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;padding:10px 8px;border-bottom:2px solid var(--border)}
td{padding:10px 8px;border-bottom:1px solid var(--border)}
.pill{background:var(--accent-bg);color:var(--accent);padding:2px 10px;border-radius:8px}
.badge{background:var(--accent-bg);color:var(--accent);padding:3px 10px;border-radius:20px;font-size:12px}

.st-pending,.st-in-progress,.st-cleaning{background:#fef3c7;color:#92400e}
.st-checked-in,.st-available,.st-completed{background:#dcfce7;color:#166534}
.st-checked-out,.st-cancelled{background:#e2e8f0;color:#475569}
.st-occupied{background:#dbeafe;color:#1e40af}
.st-maintenance{background:#fee2e2;color:#991b1b}
[data-theme="dark"] .st-pending,[data-theme="dark"] .st-in-progress,[data-theme="dark"] .st-cleaning{background:#78350f;color:#fde68a}
[data-theme="dark"] .st-checked-in,[data-theme="dark"] .st-available,[data-theme="dark"] .st-completed{background:#14532d;color:#bbf7d0}
[data-theme="dark"] .st-checked-out,[data-theme="dark"] .st-cancelled{background:#1f2937;color:#cbd5e1}
[data-theme="dark"] .st-occupied{background:#1e3a8a;color:#bfdbfe}
[data-theme="dark"] .st-maintenance{background:#7f1d1d;color:#fecaca}
.btn{display:inline-block;padding:9px 16px;border-radius:10px;border:1px solid var(--border);text-decoration:none;cursor:pointer;font-size:14px;background:var(--surface);color:var(--text)}
.btn.small{padding:6px 12px;font-size:12px}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.ghost{background:transparent}
a.btn:hover{filter:brightness(1.08)}
.nav-foot .btn{margin-top:4px;text-align:center}
.auth-actions{display:flex;gap:10px;justify-content:center;margin-top:16px}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

.form-grid .night-only{display:contents}
.form-grid.day-mode .night-only{display:none}
input,select{padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.phone{display:flex;gap:8px}
.inline{display:inline-flex;gap:6px}
.room-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.room{padding:12px;text-align:center;border-radius:8px;font-weight:700;background:var(--accent-bg)}
.status-available{background:#dcfce7}.status-occupied{background:#dbeafe}.status-cleaning{background:#fef3c7}.status-maintenance{background:#fee2e2}
[data-theme="dark"] .status-available{background:#14532d}[data-theme="dark"] .status-occupied{background:#1e3a8a}[data-theme="dark"] .status-cleaning{background:#78350f}[data-theme="dark"] .status-maintenance{background:#7f1d1d}
.legend{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.green{background:#22c55e}.dot.blue{background:#2563eb}.dot.amber{background:#f59e0b}.dot.red{background:#ef4444}
.bar{height:6px;background:var(--accent-bg);border-radius:3px;margin-top:4px}.bar div{height:6px;background:var(--accent);border-radius:3px}
.nowrap{white-space:nowrap}
.svc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.svc-row .svc-name{flex:1;min-width:120px}.svc-row .bar{flex-basis:100%;margin-top:0}.svc-catalog{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.svc-item{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:8px;padding:8px}.svc-item span{flex:1}.qty{width:70px;flex:none}
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:
  radial-gradient(900px 460px at 18% -8%, color-mix(in srgb,var(--accent) 14%,transparent), transparent),
  radial-gradient(760px 420px at 108% 108%, color-mix(in srgb,var(--accent) 12%,transparent), transparent),
  var(--bg)}
.form-col{display:flex;flex-direction:column;gap:8px;max-width:340px}
.kv td{padding:7px 8px}
.kv td:first-child{color:var(--muted);white-space:nowrap}
.kpi-row.two{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.kpi.mini{padding:12px}
.kpi.mini .kpi-value{font-size:22px}
h3{margin:20px 0 8px;font-size:15px}
.auth-card{width:380px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:0 24px 60px rgba(15,23,42,.10)}
[data-theme="dark"] .auth-card{box-shadow:0 24px 60px rgba(0,0,0,.5)}
.auth-card h1{font-size:21px;text-align:center;color:var(--accent);margin:0 0 18px;letter-spacing:-.2px}
.auth-card form{display:flex;flex-direction:column;gap:10px}
.messages{margin-bottom:12px}.msg{padding:11px 14px;border-radius:10px;margin-bottom:8px}.msg.error{background:#fee2e2;color:#991b1b}.msg.success{background:#dcfce7;color:#166534}

@media(max-width:900px){
  .kpi-row,.kpi-row.two{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .navbar{display:none}
  .room-grid{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:640px){
  .content h1{font-size:21px}
  .card{padding:16px}
  .kpi-row,.kpi-row.two{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi-value{font-size:24px}
  .kpi.mini .kpi-value{font-size:20px}

  .content table{display:block;overflow-x:auto;white-space:nowrap;max-width:100%}
  .form-grid{grid-template-columns:1fr}
  .svc-pick{grid-template-columns:1fr}
  .room-grid{grid-template-columns:repeat(4,1fr)}
  .auth-card{width:100%;max-width:380px;padding:24px}
  .auth-actions{flex-wrap:wrap}
  .form-row{gap:8px}
}




body,.card,.navbar,.topbar,.btn,input,select,.msg,.room,.svc-item,th,td,.pill,.badge,.kpi,.kpi.mini,.auth-card{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease
}
:root{--shadow:0 1px 2px rgba(15,23,42,.06),0 6px 16px rgba(15,23,42,.06)}
[data-theme="dark"]{--shadow:0 1px 2px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.3)}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}


.content > h1{animation:fadeUp .4s ease backwards}
.content > .card{animation:fadeUp .45s cubic-bezier(.22,.61,.36,1) backwards}
.content > .card:nth-of-type(1){animation-delay:.04s}
.content > .card:nth-of-type(2){animation-delay:.12s}
.content > .card:nth-of-type(3){animation-delay:.2s}
.kpi-row .kpi{animation:fadeUp .4s ease backwards}
.kpi-row .kpi:nth-child(1){animation-delay:.05s}
.kpi-row .kpi:nth-child(2){animation-delay:.1s}
.kpi-row .kpi:nth-child(3){animation-delay:.15s}
.kpi-row .kpi:nth-child(4){animation-delay:.2s}
.kpi-row .kpi:nth-child(5){animation-delay:.25s}
.kpi-row .kpi:nth-child(6){animation-delay:.3s}
.auth-card{animation:popIn .45s cubic-bezier(.22,.61,.36,1) backwards}


.card{transition:transform .25s ease,box-shadow .25s ease,background-color .35s ease,border-color .35s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}


.btn{transition:transform .15s ease,box-shadow .2s ease,filter .2s ease,background-color .35s ease,color .35s ease,border-color .35s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,118,110,.22);filter:brightness(1.05)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.btn.danger:hover{box-shadow:0 4px 12px rgba(220,38,38,.25)}
[data-theme="dark"] .btn.primary{color:#04211e}
[data-theme="dark"] .btn.danger{color:#fff}


.navbar nav a{position:relative;overflow:hidden;transition:background-color .2s ease,color .2s ease,transform .2s ease}
.navbar nav a::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);transform:scaleY(0);transform-origin:center;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.navbar nav a:hover{transform:translateX(3px)}
.navbar nav a:hover::after,.navbar nav a.active::after{transform:scaleY(1)}


.msg{animation:slideIn .35s cubic-bezier(.22,.61,.36,1) backwards}
.messages .msg:nth-child(2){animation-delay:.07s}
.messages .msg:nth-child(3){animation-delay:.14s}


tbody tr{transition:background-color .18s ease}
tbody tr:hover{background:var(--accent-bg)}
tbody tr:hover td{border-bottom-color:transparent}


input,select{transition:border-color .2s ease,box-shadow .2s ease,background-color .35s ease}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}


.room{transition:transform .2s ease,box-shadow .2s ease}
.room:hover{transform:translateY(-3px) scale(1.04);box-shadow:var(--shadow)}


.bar div{transition:width .9s cubic-bezier(.22,.61,.36,1)}


.svc-item{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.svc-item:hover{border-color:var(--accent);transform:translateX(3px)}


.hint{font-size:13px;color:var(--muted);margin:6px 0 10px}

input[type="file"]{padding:6px 8px;font-size:13px;color:var(--muted);background:var(--surface)}
input[type="file"]::file-selector-button{
  font:inherit;font-size:13px;font-weight:600;margin-right:10px;
  padding:8px 14px;border-radius:8px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  cursor:pointer;transition:filter .15s ease,transform .15s ease;
}
input[type="file"]::file-selector-button:hover{filter:brightness(1.12)}
input[type="file"]::file-selector-button:active{transform:scale(.97)}
[data-theme="dark"] input[type="file"]::file-selector-button{color:#04211e}
.svc-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:12px}
.room-thumb{width:46px;height:34px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:8px;border:1px solid var(--border)}
.room-svc{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mini-chip{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--accent-bg);color:var(--accent);white-space:nowrap}
.st-paid{background:#dcfce7;color:#166534}
.st-unpaid{background:#fee2e2;color:#991b1b}
[data-theme="dark"] .st-paid{background:#14532d;color:#bbf7d0}
[data-theme="dark"] .st-unpaid{background:#7f1d1d;color:#fecaca}
.due-line{margin:12px 0;font-size:15px;color:var(--danger)}
.inline .btn{transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease}
.inline:hover .btn{opacity:1}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
}


.profile-avatar{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.pa-actions{display:flex;flex-direction:column;gap:8px;flex:1;min-width:220px}
.avatar-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.avatar-form .btn{white-space:nowrap}
.avatar-big,.avatar.big{
  width:84px;height:84px;flex:none;border-radius:50%;object-fit:cover;
  border:3px solid var(--accent-bg);background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;
}