:root{color-scheme:dark;--bg:#070c1c;--surface:rgba(18,27,53,.63);--stroke:rgba(203,225,255,.12);--text:#edf4ff;--muted:#9baccc;--blue:#6b9bff;--mint:#48ddbf;--amber:#ffce73;--red:#ff7e9f;--violet:#bd9aff;--radius:23px;--shadow:0 22px 55px rgba(2,5,15,.24)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Sarabun,system-ui,sans-serif;font-size:15px;line-height:1.55}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit;text-decoration:none}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,.brand{font-family:Kanit,Sarabun,sans-serif;font-weight:500}h1{font-size:clamp(27px,3vw,42px);line-height:1.25;margin-bottom:12px}h2{font-size:23px;margin-bottom:6px}h3{font-size:18px;margin-bottom:12px}.muted{color:var(--muted)}.small{font-size:12px}.label{font-size:12px;letter-spacing:.08em;color:var(--muted)}.background-effects{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.aurora{position:absolute;width:70vw;height:68vh;filter:blur(85px);opacity:.3;border-radius:50%;animation:floatAura 22s ease-in-out infinite alternate}.aurora-a{top:-30vh;left:-17vw;background:radial-gradient(circle,#3a70ef,transparent 70%)}.aurora-b{bottom:-35vh;right:-18vw;background:radial-gradient(circle,#6642b5,transparent 70%);animation-delay:-9s}.noise-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(180deg,black,transparent)}@keyframes floatAura{to{transform:translate(9vw,7vh) scale(1.13)}}
.glass{background:var(--surface);border:1px solid var(--stroke);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:var(--shadow)}.login-wrap{max-width:1120px;min-height:100vh;margin:auto;display:flex;align-items:center;gap:70px;padding:45px 28px}.login-intro{flex:1}.eyebrow{display:inline-flex;gap:8px;align-items:center;color:#a2f8e8;border:1px solid rgba(73,221,189,.25);background:rgba(73,221,189,.06);padding:7px 12px;border-radius:100px;font-size:12px;margin-bottom:22px}.brand-title{font-family:Kanit;font-size:18px;letter-spacing:.04em;font-weight:600}.intro-strong{font-size:clamp(39px,5vw,66px);line-height:1.13;letter-spacing:-.03em;font-family:Kanit;margin:20px 0 22px}.intro-strong span{color:#8caaff}.login-intro>p{color:var(--muted);max-width:430px;font-size:16px}.feature-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}.feature-pills span{padding:8px 14px;background:rgba(255,255,255,.035);border:1px solid var(--stroke);border-radius:99px;font-size:12px}.login-panel{flex:0 0 430px;max-width:100%;padding:27px;border-radius:30px;animation:rise .85s cubic-bezier(.22,.83,.32,1) both}.panel-icon{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#4f78e1,#855fe5);display:grid;place-items:center;font-size:25px;box-shadow:0 8px 32px rgba(92,108,234,.35);margin-bottom:20px}.role-picker{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;background:rgba(3,8,22,.46);border-radius:14px;margin:24px 0}.role-picker button{border:0;background:transparent;color:var(--muted);border-radius:11px;padding:11px}.role-picker button.active{color:white;background:rgba(111,144,230,.28);box-shadow:inset 0 0 0 1px rgba(145,171,248,.14)}.form-field{display:block;margin:14px 0}.form-field>span{display:block;font-size:13px;color:#bdcbea;margin-bottom:7px}input,select{width:100%;color:var(--text);outline:none;border:1px solid rgba(161,193,255,.16);background:rgba(3,9,25,.58);border-radius:13px;padding:12px 14px;min-height:46px;transition:border-color .2s,box-shadow .2s}input:focus,select:focus{border-color:rgba(110,158,255,.75);box-shadow:0 0 0 3px rgba(104,152,255,.13)}select option{color:#172039;background:#ecf2ff}input[type=date]{color-scheme:dark}button.primary{color:#fff;background:linear-gradient(120deg,#4e7df0,#7f64e9);border:1px solid rgba(197,213,255,.18);box-shadow:0 8px 28px rgba(75,91,218,.23);font-weight:600}button.primary:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px)}button.primary,button.secondary,button.danger,button.ghost{border-radius:12px;padding:10px 16px;transition:transform .25s ease,filter .25s ease,background .25s ease}button.secondary{border:1px solid rgba(115,183,238,.2);background:rgba(89,149,240,.11);color:#bcd5ff}button.secondary:hover{background:rgba(89,149,240,.2)}button.ghost{border:1px solid var(--stroke);background:rgba(255,255,255,.03);color:var(--muted)}button.ghost:hover{color:white;background:rgba(255,255,255,.08)}button.danger{border:1px solid rgba(250,112,143,.25);background:rgba(232,75,113,.1);color:#ffadc0}.full{width:100%}.login-hint{color:var(--muted);font-size:12px;margin:17px 0 0;text-align:center}.boot{display:grid;place-items:center;min-height:100vh;color:var(--muted)}
.app-shell{display:flex;max-width:1800px;min-height:100vh;margin:auto}.sidebar{width:246px;flex:0 0 246px;border-right:1px solid var(--stroke);padding:26px 17px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:rgba(5,12,29,.55);backdrop-filter:blur(25px)}.sidebar-logo{display:flex;align-items:center;gap:12px;margin:0 12px 38px}.logo-mark{display:grid;place-items:center;width:40px;height:40px;background:linear-gradient(135deg,#567aea,#865ae8);border-radius:13px;font-size:21px}.sidebar-label{font-size:11px;letter-spacing:.09em;color:#7e90b2;margin:18px 12px 11px}.nav-button{display:flex;width:100%;align-items:center;gap:12px;border:1px solid transparent;background:transparent;color:#a8b7d3;border-radius:12px;padding:12px 15px;margin:4px 0;text-align:left;transition:background .25s,color .25s,transform .25s}.nav-button:hover{background:rgba(134,158,224,.08);color:white;transform:translateX(3px)}.nav-button.active{background:rgba(107,142,244,.16);border-color:rgba(127,163,249,.16);color:#e8efff}.nav-icon{font-size:19px;width:22px;text-align:center}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--stroke);padding-top:20px}.sidebar-profile{padding:12px;display:flex;gap:10px;align-items:center}.avatar{display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:14px;background:linear-gradient(140deg,rgba(95,165,255,.29),rgba(157,111,250,.3));font-family:Kanit;font-size:19px}.workspace{flex:1;min-width:0;padding:28px clamp(16px,3.5vw,60px) 80px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:33px;flex-wrap:wrap}.topbar-title{font-family:Kanit;font-size:14px;color:#dfe8fc}.top-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.clock-chip,.live-chip{padding:8px 13px;border:1px solid var(--stroke);background:rgba(255,255,255,.035);border-radius:10px;font-size:12px}.live-chip{color:#6fe8ce}.live-dot{display:inline-block;background:#40d6af;width:7px;height:7px;border-radius:50%;box-shadow:0 0 10px #40d6af;margin-right:7px;animation:pulse 2.2s infinite}@keyframes pulse{50%{opacity:.5;box-shadow:0 0 1px #40d6af}}.page-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap}.page-head h1{margin-bottom:3px}.hero-panel{padding:27px 30px;border-radius:25px;margin-bottom:25px;background:linear-gradient(120deg,rgba(48,70,147,.31),rgba(22,33,66,.59));position:relative;overflow:hidden}.hero-panel:before{content:"";position:absolute;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle,rgba(79,186,236,.2),transparent 70%);right:-60px;top:-120px;pointer-events:none}.hero-panel p{max-width:720px}.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:19px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:26px}.stat-card{padding:21px;border-radius:20px;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s;animation:rise .65s both}.stat-card:nth-child(2){animation-delay:.08s}.stat-card:nth-child(3){animation-delay:.16s}.stat-card:nth-child(4){animation-delay:.24s}.stat-card:hover,.slot-card:hover{transform:translateY(-4px);border-color:rgba(153,184,255,.27)}.stat-value{font-family:Kanit;font-size:31px;font-weight:500;margin-top:5px}.stat-icon{font-size:21px;float:right}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 16px;flex-wrap:wrap}.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.filters input,.filters select{width:auto;min-width:125px}.slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.slot-card{padding:18px;border-radius:20px;transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s;animation:rise .7s both}.slot-card.booked{border-color:rgba(96,153,255,.52);background:rgba(62,89,147,.33)}.slot-header{display:flex;align-items:center;justify-content:space-between;gap:5px}.slot-time{font-family:Kanit;font-size:21px;font-weight:500}.badge{display:inline-block;font-size:11px;border-radius:99px;padding:4px 9px;background:rgba(73,222,181,.1);color:#80e9d0}.badge.warn{background:rgba(246,195,105,.1);color:#ffdb93}.badge.full,.badge.locked{background:rgba(233,102,135,.1);color:#ffa9c1}.badge.mine{background:rgba(113,156,255,.16);color:#b2caff}.badge.past{background:rgba(150,161,179,.1);color:#afbad0}.capacity-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;margin:12px 0 8px}.capacity-bar{height:6px;border-radius:10px;background:rgba(117,137,189,.15);overflow:hidden}.capacity-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#45dabe,#7ea3fc);border-radius:inherit;transition:width .75s cubic-bezier(.2,.8,.2,1)}.name-list{min-height:48px;padding-top:11px;font-size:12px;color:#b5c3df;display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start}.name-chip{background:rgba(159,184,236,.08);border:1px solid rgba(145,171,223,.08);border-radius:8px;padding:3px 6px}.slot-actions{margin-top:14px;display:flex;gap:8px}.slot-actions button{width:100%}.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.box{border-radius:21px;padding:22px;margin-bottom:18px}.my-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--stroke)}.my-item:last-child{border:0}.my-time{font-family:Kanit;font-size:20px}.empty{color:var(--muted);padding:24px;background:rgba(255,255,255,.018);border:1px dashed var(--stroke);border-radius:15px;text-align:center}.setting-row{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid var(--stroke);padding:13px 0}.setting-row:last-child{border-bottom:0}.table-wrap{width:100%;overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:13px;min-width:620px}.data-table th{text-align:left;color:var(--muted);font-weight:500;padding:12px;border-bottom:1px solid var(--stroke)}.data-table td{padding:12px;border-bottom:1px solid rgba(203,225,255,.075);vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.mini-input{max-width:78px;min-width:64px;min-height:39px;padding:8px 10px}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.row-actions button{padding:7px 10px;font-size:12px}.form-inline{display:grid;grid-template-columns:2fr 1fr 1.2fr auto;gap:10px;align-items:end}.form-inline .form-field{margin:0}.filter-note{color:var(--muted);font-size:12px}.anim-in{animation:rise .68s cubic-bezier(.22,.85,.3,1) both}@keyframes rise{from{opacity:0;transform:translateY(19px)}to{opacity:1;transform:translateY(0)}}#toast{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 30px))}.toast-item{padding:14px 18px;border-radius:15px;border:1px solid rgba(150,190,255,.22);background:rgba(26,40,77,.92);box-shadow:var(--shadow);backdrop-filter:blur(15px);animation:slideIn .35s both}.toast-item.error{border-color:rgba(244,116,151,.4)}@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}#modal-root:not(:empty){position:fixed;inset:0;background:rgba(3,8,20,.72);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(9px)}.modal{width:100%;max-width:440px;border-radius:24px;padding:28px;animation:rise .35s both}.modal-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:23px}.status-line{display:flex;gap:10px;align-items:center;color:#9dc8ff}.text-mint{color:var(--mint)}.text-amber{color:var(--amber)}.text-red{color:var(--red)}
@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.login-wrap{gap:35px}}@media(max-width:800px){.login-wrap{flex-direction:column;align-items:stretch;gap:35px;padding:50px 22px}.login-intro{flex:auto}.login-panel{flex:auto}.sidebar{width:72px;flex-basis:72px;padding:20px 8px}.sidebar .nav-text,.sidebar-label,.sidebar-logo .brand-title,.sidebar-profile .profile-text,.sidebar-bottom .signout-text{display:none}.sidebar-logo{justify-content:center;margin:0 0 30px}.nav-button{justify-content:center;padding:12px 8px}.nav-icon{width:auto}.sidebar-bottom .sidebar-profile{justify-content:center}.workspace{padding:22px 20px 80px}.two-col{grid-template-columns:1fr}.form-inline{grid-template-columns:1fr 1fr}.form-inline button{align-self:end;min-height:46px}}@media(max-width:530px){.workspace{padding:17px 13px 90px}.sidebar{width:57px;flex-basis:57px;padding:15px 5px}.logo-mark{width:36px;height:36px}.slot-grid,.stats-grid{grid-template-columns:1fr}.hero-panel{padding:22px}.topbar{margin-bottom:25px}.topbar-title{display:none}.page-head{align-items:flex-start}.page-head h1{font-size:28px}.filters input,.filters select{width:calc(50% - 5px);min-width:0}.form-inline{grid-template-columns:1fr}.login-wrap{padding:32px 15px}.login-panel{padding:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}