/* TotuRent app mode: only active when <html class="app"> (inside the app or ?app=1). The website is not affected. */
html.app{--bg:#f6faf7;--radius:26px}
html.app body{background:var(--bg);overscroll-behavior-y:contain;user-select:none;-webkit-user-select:none}
html.app input,html.app textarea{user-select:text;-webkit-user-select:text}
/* splash */
.asplash{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 0,#1fa36b 0,#0b6b4f 55%,#07432f 100%);color:#fff;transition:opacity .5s,transform .5s}
.asplash.out{opacity:0;transform:scale(1.04)}
.asp-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.asp-in .tm{width:118px;height:118px;animation:aspBob 1.6s ease-in-out infinite}
.asp-name{font:800 40px "Bricolage Grotesque",sans-serif;letter-spacing:-1.2px}.asp-name b{color:var(--sun)}
.asp-tag{opacity:.85;font-size:14px;font-weight:600}
.asp-dots{display:flex;gap:7px;margin-top:22px}.asp-dots i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.35;animation:aspDot 1.1s infinite}.asp-dots i:nth-child(2){animation-delay:.18s}.asp-dots i:nth-child(3){animation-delay:.36s}
@keyframes aspBob{50%{transform:translateY(-8px) rotate(-3deg)}}@keyframes aspDot{50%{opacity:1;transform:scale(1.3)}}
/* home header */
html.app .ahead{margin:0 -16px;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 22px;background:linear-gradient(160deg,#0b6b4f 0,#1fa36b 100%);border-radius:0 0 34px 34px;color:#fff;position:relative;overflow:hidden}
html.app .ahead::after{content:"";position:absolute;right:-50px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,74,.35),transparent 70%)}
.atop{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.aloc{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border-radius:99px;padding:6px 14px 6px 10px}
.aloc span{font-size:18px}.aloc small{display:block;font-size:10.5px;opacity:.8;font-weight:700;line-height:1}.aloc b{font-size:14px;line-height:1.2}
.aib,.aav,.abtn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:18px;font-weight:800;margin-left:8px;position:relative}
.aav{background:var(--sun);color:#10261c}.abtn{width:auto;padding:0 16px;font-size:14px;border-radius:99px}
.ahi{margin:20px 0 14px;font:800 27px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.8px;position:relative;z-index:1}.ahi span{display:block;font:600 14.5px "Manrope",sans-serif;opacity:.88;letter-spacing:0;margin-top:4px}
html.app .asearch{display:flex;align-items:center;gap:8px;background:#fff;border-radius:20px;padding:6px 6px 6px 14px;box-shadow:0 10px 26px rgba(0,0,0,.2);position:relative;z-index:1;margin:0;border:0}
.asearch svg{width:22px;height:22px;stroke:var(--mute);fill:none;stroke-width:2.2;stroke-linecap:round;flex:none}
html.app .asearch input{flex:1;border:0;background:none;outline:0;font-size:15px;min-width:0;padding:10px 0;color:var(--ink)}
html.app .asearch button{border:0;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;padding:11px 18px}
/* home body */
html.app .trust{display:none}
html.app .promo{border-radius:22px;margin-top:16px;background:linear-gradient(110deg,#ffd24a,#ffa94a)}
html.app .rail{margin-top:6px;gap:6px}
html.app .cat{width:72px}html.app .cat span{width:60px;height:60px;border-radius:50%;box-shadow:0 6px 14px rgba(0,0,0,.08)}
html.app .cat.on span{outline:3px solid var(--brand);outline-offset:2px;transform:none}
html.app .filters.fgrid{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:4px 16px 2px}html.app .filters.fgrid::-webkit-scrollbar{display:none}
html.app .filters select{flex:none;width:auto;border-radius:99px;padding:9px 34px 9px 16px;font-weight:700;font-size:13.5px;background-color:#fff;box-shadow:var(--shadow);border:0}
html.app .sechead h2{font:800 21px "Bricolage Grotesque",sans-serif;letter-spacing:-.5px}
/* cards */
html.app .grid{gap:14px 12px}
html.app .acard{border:0;border-radius:24px;box-shadow:0 8px 22px rgba(11,107,79,.12);background:#fff}
html.app .acard .pic{aspect-ratio:1/1.05;border-radius:24px 24px 0 0}
html.app .acard .pic img{height:100%;object-fit:cover}
.aprice{position:absolute;left:10px;bottom:10px;background:rgba(16,38,28,.78);backdrop-filter:blur(6px);color:#fff;font-weight:800;font-size:13.5px;padding:5px 11px;border-radius:99px;z-index:2}.aprice small{font-weight:600;opacity:.8}
html.app .acard .heart{top:10px;right:10px;width:36px;height:36px;background:rgba(255,255,255,.92);box-shadow:0 4px 10px rgba(0,0,0,.15)}
html.app .acard .in{padding:11px 13px 13px}html.app .acard .t{min-height:0;font-size:14.5px;-webkit-line-clamp:1}
html.app .acard .meta{margin-top:3px;font-size:12px}.rt{color:#e08a00}
/* bottom bar */
html.app nav.dock{left:12px;right:12px;max-width:none;bottom:calc(10px + env(safe-area-inset-bottom,0px));border:1px solid rgba(255,255,255,.95);border-radius:32px;padding:7px 8px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,250,246,.96));box-shadow:0 16px 40px rgba(7,67,47,.28)}
html.app nav.dock a{padding:7px 2px 6px;border-radius:24px;background:none!important;color:#6f8578;font-size:11px;font-weight:800}
html.app nav.dock a i{display:grid;place-items:center;height:28px;font-size:23px;filter:saturate(1.15)}
html.app nav.dock a.on{color:#0b6b4f;background:linear-gradient(135deg,#ffeadf,#ffd5c4)!important;box-shadow:0 6px 14px rgba(255,90,60,.22)}
html.app nav.dock a.on i{transform:translateY(-2px) scale(1.18)}
/* item page: photo fills the top, buttons float over it */
html.app .topbar{background:var(--bg)}
html.app:has(.carousel) .topbar{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 6px);margin:0;padding:0 14px;height:auto;background:none;border:0;backdrop-filter:none;z-index:25}
html.app:has(.carousel) .topbar h1{display:none}
html.app:has(.carousel) .topbar .ib{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.2);display:grid;place-items:center;border:0;font-size:22px}
html.app .carousel{margin:0 -16px;border-radius:0 0 34px 34px;position:relative}
html.app .slides>div{aspect-ratio:1/1.0}
html.app:has(.carousel) .wrap>.mt:first-of-type{margin-top:0}
html.app:has(.carousel) .price{font-family:"Bricolage Grotesque",sans-serif}
html.app .bar{border:0;border-radius:28px 28px 0 0;box-shadow:0 -10px 30px rgba(7,67,47,.16);background:#fff;padding-top:14px}
html.app .bar .btn.hot{border-radius:18px;padding:16px!important}
html.app .card{border:0;box-shadow:0 6px 18px rgba(11,107,79,.09);border-radius:22px}
html.app .chhero,html.app .earn{border-radius:26px}

/* rented / available state (app) */
html.app .acard.isout .pic>img,html.app .acard.isout .pic.emoji{filter:grayscale(.8) brightness(.85)}
html.app .acard.isout .t{color:var(--mute)}
html.app .acard.isout .aprice{bottom:52px}
.aout{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 8px 8px;border-radius:18px;background:rgba(16,38,28,.86);backdrop-filter:blur(6px);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.alab{font-size:11px;font-weight:800;letter-spacing:.3px;color:#ffd24a;text-transform:uppercase}
.atm{display:inline-flex;gap:4px;align-items:center}
.atm .tu{display:inline-flex;align-items:baseline;gap:1px;background:rgba(255,255,255,.14);border-radius:8px;padding:3px 5px;font-variant-numeric:tabular-nums}
.atm b{font-size:14px;font-weight:800;color:#fff}.atm i{font-style:normal;font-size:9.5px;font-weight:800;color:#ffd24a;text-transform:lowercase}
.apart,.afree{position:absolute;left:10px;top:10px;z-index:2;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.92);color:#0b6b4f;box-shadow:0 3px 10px rgba(0,0,0,.14)}
.apart{color:#a35a00}
/* item page availability */
.aavail{border-radius:22px;padding:12px 14px;font-weight:800;font-size:14.5px;margin-top:10px}
.aavail.ok{background:#dff3e8;color:#0b6b4f}
.aavail.out{background:linear-gradient(120deg,#26302b,#46504a);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.aavail.mix{background:#fff;box-shadow:0 6px 18px rgba(11,107,79,.12)}
.aavail .arow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.aavail .arow.free{margin-top:8px;padding-top:8px;border-top:1px dashed #cfe3d6;color:#0b6b4f}
.aavail .aback{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;opacity:.95}
.aavail.mix .atm .tu{background:#10261c}
.aavail.mix .atm b{color:#fff}

/* ---------- other screens (app) ---------- */
/* page header: big title, no bar */
html.app .topbar:not(:has(~ .carousel)){background:var(--bg);border:0;backdrop-filter:none;height:64px;padding-top:6px}
html.app .topbar .ib{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(11,107,79,.14);display:grid;place-items:center;border:0;font-size:22px;color:var(--ink)}
html.app .topbar h1{font:800 24px "Bricolage Grotesque",sans-serif;letter-spacing:-.7px}
/* bookings */
html.app .stag>h3{font:800 17px "Bricolage Grotesque",sans-serif;color:var(--mute);letter-spacing:-.2px}
html.app .stag>.card{position:relative;overflow:hidden;padding-left:20px}
html.app .stag>.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
html.app .mini{width:64px;height:64px;border-radius:18px;overflow:hidden}
html.app .stepper .s::before{width:20px;height:20px}
html.app .alert{border-radius:18px;border:0}
html.app .alert.info{background:#e3f4ea}
html.app .alert.warn{background:#fff1dc}
html.app .btn.sm{border-radius:14px;padding:10px 14px;font-weight:800}
html.app .btn.alt{background:#fff;border:0;box-shadow:0 3px 10px rgba(11,107,79,.12)}
/* item page details */
html.app table.kv{background:none;border:0;display:block}
html.app table.kv tbody{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html.app table.kv tr{display:flex;flex-direction:column;background:#fff;border-radius:18px;padding:11px 14px;box-shadow:0 5px 14px rgba(11,107,79,.08)}
html.app table.kv td{padding:0;border:0;width:auto!important}
html.app table.kv td:first-child{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;color:var(--mute)}
html.app table.kv td:last-child{font-size:14px;line-height:1.3}
html.app table.kv tr:nth-child(3),html.app table.kv tr:nth-child(5){grid-column:1/-1}
/* account */
html.app .lrow .av{width:58px;height:58px;font-size:26px;box-shadow:0 6px 16px rgba(255,90,60,.35)}
html.app .ahero{background:linear-gradient(135deg,#0b6b4f,#1fa36b);color:#fff}
html.app .ahero .meta{color:rgba(255,255,255,.85)}
html.app a.card.lrow{padding:14px 16px;border-top:0}
/* sheets and inputs */
html.app .sheet{border-radius:30px 30px 0 0}
html.app input,html.app select,html.app textarea{border-radius:16px}
/* chats */
html.app .chhero{background:linear-gradient(135deg,#0b6b4f,#1fa36b 70%,#4ac58f)}