.tbtn,.btn{border:0;cursor:pointer;font:inherit;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:linear-gradient(145deg,#f8faff,#e4e9f5);box-shadow:6px 6px 14px var(--sd),-6px -6px 14px var(--sl);transition:box-shadow .12s,transform .12s}
.tbtn{width:40px;height:40px;border-radius:13px;text-decoration:none;flex:none}
.tbtn svg{width:21px;height:21px}
.btn{padding:10px 13px;border-radius:12px;font-weight:800;font-size:13px;white-space:nowrap}
.btn svg{width:17px;height:17px}
.tbtn:active,.btn:active{box-shadow:inset 4px 4px 9px var(--sd),inset -4px -4px 9px var(--sl);transform:scale(.97)}
.tbtn:disabled{opacity:.4;cursor:default;box-shadow:3px 3px 7px var(--sd),-3px -3px 7px var(--sl);transform:none}
.red{color:#fff;background:linear-gradient(145deg,#ff4d66,#d81f3c);box-shadow:5px 5px 13px rgba(201,31,58,.35),-5px -5px 12px var(--sl)}
.red .ia,.red .ib{stroke:#fff}
.red:active,.red.on{box-shadow:inset 4px 4px 10px rgba(110,8,28,.5),inset -3px -3px 8px rgba(255,130,150,.55)}
#btnRoom{padding:0 16px;height:40px;border-radius:13px}
.tbtn:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dock{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;flex:0 0 auto}
.dock.open{grid-template-rows:1fr}
.dock>.in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .26s}
.dock.open>.in{visibility:visible;transition-delay:0s}
.row{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding:16px 18px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.grp{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding:11px 12px;border-radius:20px;background:linear-gradient(145deg,#f6f8fe,#e8edf7);
box-shadow:7px 7px 16px var(--sd),-7px -7px 16px var(--sl)}
.gl{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--blue);text-transform:uppercase}
.gl svg{width:17px;height:17px}
.ctl{display:flex;align-items:center;gap:8px}
.fld{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:12px;background:var(--bg);
box-shadow:inset 4px 4px 9px var(--sd),inset -4px -4px 9px var(--sl)}
.fld:focus-within{box-shadow:inset 4px 4px 9px var(--sd),inset -4px -4px 9px var(--sl),0 0 0 2px rgba(238,46,74,.5)}
.fld svg{width:17px;height:17px;flex:none}
.fld span{font-size:12px;color:var(--mute);font-weight:700}
.fld input,.fld select{border:0;background:transparent;font:800 14px "Segoe UI",system-ui,sans-serif;color:var(--navy);outline:0;min-width:0}
.fld input[type=number]{width:46px;-moz-appearance:textfield}
.fld input::-webkit-outer-spin-button,.fld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fld select{-webkit-appearance:none;appearance:none;padding-right:22px;cursor:pointer;min-width:118px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee2e4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center/16px}
.fld input[type=color]{width:40px;height:30px;padding:0;cursor:pointer}
.fld input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.fld input[type=color]::-webkit-color-swatch{border:0;border-radius:9px;box-shadow:0 2px 6px rgba(15,37,87,.3)}
.fld input[type=color]::-moz-color-swatch{border:0;border-radius:9px}
.thumb{display:none;position:relative;width:40px;height:40px;flex:none}
.thumb.has{display:block}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:11px;box-shadow:3px 3px 7px var(--sd),-3px -3px 7px var(--sl)}
.thumb button{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border:0;border-radius:50%;padding:0;cursor:pointer;background:var(--red);display:flex;align-items:center;justify-content:center}
.thumb button svg{width:11px;height:11px}.thumb .ia,.thumb .ib{stroke:#fff;stroke-width:3}
.note{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--mute);white-space:nowrap}
@media(max-width:1300px){.note{white-space:normal;max-width:300px}}
.note svg{width:15px;height:15px}

[hidden]{display:none!important}
.dock.open>.in{overflow-y:auto;max-height:48vh}
.ck{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:6px;background:#fff;border:2px solid var(--navy);display:block;box-shadow:0 1px 4px rgba(15,37,87,.3)}
.tile.on .ck,.cp.on .ck{background:var(--red);border-color:var(--red)}
.tile.on .ck:after,.cp.on .ck:after{content:'';position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cp .ck{position:relative;display:inline-block;left:auto;top:auto;width:15px;height:15px;margin-right:7px;vertical-align:-3px;box-shadow:none}
.cp .ck:after{left:3px!important;width:4px!important;height:8px!important}
.tile{cursor:pointer}
.rtabs{padding-bottom:0;gap:12px}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:15px;background:var(--bg);flex:none;box-shadow:inset 3px 3px 7px var(--sd),inset -3px -3px 7px var(--sl)}
.sb{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:12.5px;color:var(--navy);display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:11px;background:transparent;white-space:nowrap}
.sb svg{width:17px;height:17px}
.sb.on{color:#fff;background:linear-gradient(145deg,#ff4d66,#d81f3c);box-shadow:3px 3px 8px rgba(201,31,58,.35)}
.sb.on .ia,.sb.on .ib{stroke:#fff}
.sb:focus-visible,.tile:focus-visible,.cp:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dyn{display:contents}
.ctl{flex-wrap:wrap}
.ctl+.ctl,.ctl+.note{margin-top:0}
.fld input[type=number]{width:50px}
.tiles{display:flex;gap:8px}
.tile{position:relative;width:60px;height:60px;border:0;border-radius:13px;cursor:pointer;padding:0;overflow:hidden;font:inherit;color:var(--navy);
background:#e9e3d5 center/cover no-repeat;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 8px var(--sd),-3px -3px 8px var(--sl)}
.tile i{font-style:normal;font-size:24px;font-weight:800;color:var(--red);opacity:.85;margin-top:-8px}
.tile em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:10px;font-weight:800;text-align:center;padding:2px 0;background:rgba(15,37,87,.74);color:#fff}
.tile.on{outline:2px solid var(--red);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;max-width:320px}
.cp{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:12px;color:var(--navy);padding:7px 10px;border-radius:10px;
background:linear-gradient(145deg,#f8faff,#e4e9f5);box-shadow:3px 3px 7px var(--sd),-3px -3px 7px var(--sl)}
.cp.on{color:#fff;background:linear-gradient(145deg,#ff4d66,#d81f3c)}
.hint{font-size:11px;color:var(--mute);font-weight:700}
.empty{font-size:12px;color:var(--mute);max-width:260px;white-space:normal}
.fld select{min-width:150px}