/* REPIC Concierge — reception & admin consoles. Garden-and-lake palette shared with the guest TV. */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Karla:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
:root{
  --bg:#EEF2EA; --surface:#FFFFFF; --surface-2:#F6F8F3; --ink:#1F2A1E; --muted:#5A6957; --line:#D8DFD2;
  --accent:#2B6B70; --accent-soft:#DCEBEA; --accent-ink:#FFFFFF;
  --ok:#2F7A4F; --ok-soft:#DFEFE4; --warn:#9A6400; --warn-soft:#F6EBD3; --bad:#B23B2E; --bad-soft:#F6E0DC; --idle:#7B8578; --idle-soft:#E9ECE6;
  --repic:#F2C230; --repic-ink:#141414;
  --f-display:"Marcellus","Trajan Pro",Georgia,serif; --f-body:"Karla","Segoe UI",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#111713; --surface:#18201A; --surface-2:#1D261F; --ink:#E4EAE1; --muted:#9AA696; --line:#2B352D;
  --accent:#7DBDB9; --accent-soft:#1F3433; --accent-ink:#0E1512;
  --ok:#78C796; --ok-soft:#1C3124; --warn:#E3B45A; --warn-soft:#352A16; --bad:#EE8A7C; --bad-soft:#3A2220; --idle:#8E978B; --idle-soft:#242C25; color-scheme:dark } }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}
a{color:var(--accent)}
code{font-family:var(--f-mono);font-size:.92em;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:0 4px;word-break:break-all}
.repic{background:var(--repic);color:var(--repic-ink);font-weight:700;letter-spacing:.12em;font-size:10.5px;padding:3px 6px;border-radius:2px}

/* plain pages (install, login) */
.narrow{max-width:640px;margin:0 auto;padding:48px 20px;display:grid;gap:18px}
.narrow h1{font-family:var(--f-display);font-weight:400;font-size:32px}
.narrow h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.brandline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:14px}
.err{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:10px 12px;margin:0}
.checks{border-collapse:collapse;width:100%;font-size:14px}
.checks td{padding:6px 0;border-bottom:1px solid var(--line)}
.checks .ok{color:var(--ok);font-weight:700;text-align:right}.checks .bad{color:var(--bad);font-weight:700;text-align:right}
.steps{display:grid;gap:8px;padding-left:20px}
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login .card{width:min(380px,100%)}
.login .mark b{font-family:var(--f-display);font-weight:400;font-size:30px;display:block;line-height:1}
.login .mark span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* app shell */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
@media (max-width:900px){.app{grid-template-columns:minmax(0,1fr)}}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:22px;padding:22px 18px;position:sticky;top:0;height:100vh}
.mark{display:grid;gap:2px}
.mark b{font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:.03em;line-height:1.05}
.mark span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.nav{display:grid;gap:2px}
.nav button{appearance:none;border:0;background:none;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left;font-weight:500;color:var(--muted)}
.nav button svg{width:18px;height:18px;flex:none}
.nav button[aria-current="page"]{background:var(--accent-soft);color:var(--ink)}
.nav button[aria-current="page"] svg{color:var(--accent)}
.nav .badge{margin-left:auto;font-family:var(--f-mono);font-size:11px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 7px;line-height:18px}
.nav .badge.bad{background:var(--bad)}
.side-foot{margin-top:auto;display:grid;gap:10px}
.plan{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:4px;background:var(--surface-2)}
.plan small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4}
.by{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
@media (max-width:900px){
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px;border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
  .nav{grid-auto-flow:column;overflow-x:auto;width:100%;order:3;gap:4px}
  .nav button{white-space:nowrap;padding:7px 10px}
  .side-foot{margin:0 0 0 auto}.plan{display:none}
}
.main{min-width:0;padding:24px 24px 48px;display:grid;gap:22px;align-content:start}
@media (max-width:900px){.main{padding:18px 16px 40px}}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 20px}
.head h1{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.1}
.head .date{color:var(--muted);font-size:14px}
.head .sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.live{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}

.btn{appearance:none;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:12px}
.sum{padding:14px 18px;border-left:1px solid var(--line);display:grid;gap:2px;min-width:0}
.sum:first-child{border-left:0}
.sum small{font-size:12px;color:var(--muted);font-weight:500}
.sum b{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.05;font-variant-numeric:tabular-nums}
.sum b em{font-style:normal;font-family:var(--f-body);font-size:15px;color:var(--muted)}
.sum span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.summary{grid-template-columns:repeat(3,minmax(0,1fr))}.sum:nth-child(4){border-left:0}.sum:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:560px){.summary{grid-template-columns:repeat(2,minmax(0,1fr))}.sum{border-left:0!important;border-top:1px solid var(--line)}.sum:nth-child(-n+2){border-top:0}.sum:nth-child(even){border-left:1px solid var(--line)!important}}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
@media (max-width:1180px){.cols{grid-template-columns:minmax(0,1fr)}}
.sec{display:grid;gap:12px;min-width:0}
.sec-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-h h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sec-h .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.filter{appearance:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:13px;cursor:pointer;color:var(--muted)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.villa{appearance:none;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;display:grid;gap:8px;position:relative;transition:border-color .15s,transform .15s}
.villa:hover{border-color:var(--accent);transform:translateY(-1px)}
.villa .top{display:flex;align-items:center;gap:8px}
.villa .num{font-family:var(--f-display);font-size:22px;line-height:1}
.villa .type{font-size:12px;color:var(--muted);line-height:1.3}
.villa .tvdot{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;display:inline-block}
.dot.off{background:var(--bad)}.dot.never{background:var(--idle)}
.villa .guest{font-weight:700;font-size:16px;line-height:1.25;min-height:20px}
.villa .guest.empty{font-weight:400;color:var(--muted)}
.villa .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.lang{font-family:var(--f-mono);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pill.in,.pill.new{background:var(--accent-soft);color:var(--accent)}
.pill.out{background:var(--warn-soft);color:var(--warn)}
.pill.occ,.pill.conf,.pill.on{background:var(--ok-soft);color:var(--ok)}
.pill.free,.pill.done{background:var(--idle-soft);color:var(--idle)}
.pill.book{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pill.offl{background:var(--bad-soft);color:var(--bad)}
.stripe{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0}
.stripe.in{background:var(--accent)}.stripe.out{background:var(--warn)}.stripe.occ{background:var(--ok)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:12px;min-width:0}
.panel h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel h3 .sp{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:500}
.list{display:grid}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:11px 0;border-top:1px solid var(--line);align-items:center}
.item:first-child{border-top:0;padding-top:2px}
.item b{font-size:14.5px}
.item small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:2px}
.item .acts{grid-column:1/3;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.empty{color:var(--muted);font-size:13.5px;margin:0}
.notice-live{background:var(--accent-soft);border-radius:8px;padding:10px 12px;font-size:14px;line-height:1.45}
.notice-live small{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
table.t{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.t th,.t td{text-align:left;padding:10px 14px;border-top:1px solid var(--line);vertical-align:middle}
.t thead th{border-top:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--surface-2)}
.t td.num{font-variant-numeric:tabular-nums;font-family:var(--f-mono);font-size:13px}
.t td small{display:block;color:var(--muted);font-size:12.5px}

.field{display:grid;gap:5px;min-width:0}
.field>span,.field>label{font-size:12.5px;color:var(--muted);font-weight:500}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 11px}
.field textarea{resize:vertical;min-height:90px;line-height:1.45}
.field textarea.code{font-family:var(--f-mono);font-size:12.5px;min-height:420px;white-space:pre}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.help{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}
.chk{display:flex;flex-wrap:wrap;gap:6px}
.chk label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;cursor:pointer;background:var(--surface)}
.chk input{accent-color:var(--accent);margin:0}

.scrim{position:fixed;inset:0;background:rgba(20,28,22,.35);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);z-index:21;display:flex;flex-direction:column;border-left:1px solid var(--line);box-shadow:-20px 0 40px -24px rgba(0,0,0,.4)}
.dr-h{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.dr-h h2{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1}
.dr-h p{margin:2px 0 0;color:var(--muted);font-size:13px}
.dr-h .btn{margin-left:auto}
.dr-b{flex:1;overflow:auto;padding:18px 20px;display:grid;gap:16px;align-content:start}
.dr-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dr-f .sp{margin-left:auto;display:flex;gap:8px}
.errline{color:var(--bad);font-size:13px;margin:0}

/* mini TV preview (always the guest look) */
.mini{container-type:inline-size;aspect-ratio:16/9;max-width:100%;border-radius:8px;overflow:hidden;position:relative;border:6px solid #1B1E1C;background:linear-gradient(180deg,#C9E1E3 0%,#E2EDE6 46%,#EDF2EA 47%,#EDF2EA 100%);color:#1F2A1E}
.mini::before{content:"";position:absolute;right:-6%;top:22%;width:62%;height:30%;background:#9DB89A;border-radius:60% 60% 0 0/100% 100% 0 0;opacity:.85}
.mini::after{content:"";position:absolute;right:0;top:46%;width:60%;height:18%;background:linear-gradient(180deg,#7DB3B7,#C3DCD8);opacity:.8}
.mini .fade{position:absolute;inset:0;background:linear-gradient(90deg,#EDF2EA 30%,rgba(237,242,234,0) 70%);z-index:1}
.mini .in{position:absolute;inset:4.5cqi 5cqi auto 5cqi;z-index:2;display:grid;gap:1.1cqi}
.mini .top{display:flex;align-items:center;gap:2cqi}
.mini .top span{margin-left:auto;font-family:var(--f-mono);font-size:2cqi;color:#566753}
.mini .wm{font-family:var(--f-display);font-size:4cqi;letter-spacing:.05em}
.mini .nb{background:rgba(43,107,112,.1);border:1px solid rgba(43,107,112,.3);border-radius:1cqi;padding:.9cqi 1.4cqi;font-size:1.9cqi;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mini .eb{font-family:var(--f-mono);font-size:1.9cqi;letter-spacing:.18em;text-transform:uppercase;color:#2B6B70}
.mini .h{font-family:var(--f-display);font-size:6cqi;line-height:1.05}
.mini .p{font-size:2.3cqi;line-height:1.45;max-width:60%;color:#3E4B3C;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini .tiles{position:absolute;left:5cqi;right:5cqi;bottom:4cqi;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqi;z-index:2}
.mini .tiles div{min-width:0;border-radius:1.2cqi;background:rgba(255,255,255,.88);border:1px solid rgba(31,42,30,.12);padding:1.3cqi 1.5cqi;display:grid;gap:.3cqi}
.mini .tiles div:first-child{box-shadow:0 0 0 .35cqi #2B6B70}
.mini .tiles b{font-size:2cqi;line-height:1.2}
.mini .tiles span{font-size:1.7cqi;color:#566753;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prev-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prev-h select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 8px;font-size:13px}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px;z-index:40;display:flex;gap:8px;align-items:center;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);max-width:calc(100% - 32px)}
.toast.bad{background:var(--bad);color:#fff}
.copy{display:flex;gap:6px;align-items:center;min-width:0}
.copy code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;word-break:normal}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}