:root{--wine:#31000f;--pink:#e56d9f;--gold:#ffb52e;--cyan:#18d3ff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#100006;color:#fff;font-family:Arial,sans-serif}button,a,input{font:inherit}.phone-app{width:min(100%,520px);min-height:100dvh;margin:auto;display:grid;grid-template-rows:auto minmax(320px,1fr) auto minmax(80px,auto) auto;background:radial-gradient(circle at 50% 10%,#7b173a,var(--wine) 47%,#160007);border:5px solid #512008;box-shadow:inset 0 0 0 2px #ffcd62,0 0 30px #000}.chrome{display:grid;grid-template-columns:72px 1fr 72px;gap:8px;align-items:center;padding:10px;border-bottom:3px solid var(--gold);background:linear-gradient(145deg,#250008,#6a1230 50%,#240009);box-shadow:inset 0 3px 7px #b63d6d,0 5px 12px #090002}.logo-heart,.menu,.camera-start,.camera-full,.chatbar button{border:2px solid #ffca5a;border-radius:15px;background:linear-gradient(145deg,#ffb7d6,#d94f8a 50%,#932451);color:#160008;font-weight:900;box-shadow:inset 3px 3px 4px #ffd9e8,inset -4px -5px 7px #7a1740,0 4px 8px #090002}.logo-heart{height:61px;position:relative}.heart{font-size:49px;line-height:45px;color:#ff3038;text-shadow:0 2px 2px #9d0000}.key{position:absolute;font-size:23px;left:36px;top:8px}.brand{text-align:center;min-width:0}.brand h1{margin:0;color:#59dcff;font-size:clamp(25px,8vw,43px);white-space:nowrap;text-shadow:0 2px #015e7b,0 0 13px #00cfff}.brand #bar{display:inline-block;margin-top:4px;color:#91e8ff;font-weight:900;text-shadow:0 0 10px #00bfe9}.menu{height:61px}.camera-panel{position:relative;margin:12px;border:3px solid #edae39;border-radius:25px;overflow:hidden;background:#070208;box-shadow:inset 0 0 25px #000,0 0 0 3px #0a89a9,0 0 20px #00cfff;min-height:360px}.camera-panel video{position:absolute;width:100%;height:100%;object-fit:cover;display:none}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#17333a,#08090b 67%);color:#70e9ff;text-shadow:0 0 14px #00d5ff}.camera-placeholder span{font-size:clamp(35px,12vw,65px);font-weight:900}.camera-placeholder small{max-width:270px;text-align:center;color:#fff}.camera-status{position:absolute;left:12px;bottom:13px;background:#130009cc;border:1px solid #ffc34f;border-radius:9px;padding:7px 10px;font-size:12px}.camera-start,.camera-full{position:absolute;bottom:10px;padding:8px 11px}.camera-start{right:12px}.camera-full{right:132px}.tag-marker{display:none;position:absolute;border:0;border-radius:10px;padding:7px 10px;background:#ffd222;color:#111;font-weight:900;box-shadow:inset 0 2px #fff6a0,0 3px 8px #000}.camera-panel.active .tag-marker{display:block}.tag-marker.selected{background:#d20e3e;color:#fff}.t1{top:20%;left:16%}.t2{top:38%;right:13%}.t3{top:59%;left:36%}.contact-strip{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;padding:7px 13px;color:#ffd45c;font-weight:900}.contact-strip strong{background:#ffd42b;color:#111;border-radius:9px;padding:7px}.contact-strip div{text-align:center;border:2px solid #d9a03b;border-radius:10px;padding:7px;color:#fff}.contact-strip div.active{background:#c90f3c}.messages{margin:0 12px 10px;padding:10px;border:2px solid #16ccef;border-radius:15px;background:#100309;overflow:auto;box-shadow:inset 0 0 16px #000}.messages p{margin:5px}.chatbar{display:grid;grid-template-columns:60px 1fr auto auto;gap:6px;padding:10px;background:linear-gradient(#5b0d2b,#210008);border-top:3px solid #d39129}.chatbar input{min-width:0;border:2px solid #e0a33b;border-radius:13px;padding:10px}.chatbar button{padding:8px}.cup{display:flex;flex-direction:column}.cup small{font-size:10px}dialog{max-width:440px;border:3px solid #e8a73c;border-radius:22px;background:linear-gradient(145deg,#73183b,#31000f);color:#fff;text-align:center;padding:24px;box-shadow:inset 0 3px 8px #b85178,0 0 35px #ff4f9f}dialog::backdrop{background:#050002df}.warning{background:#f3a7c7;color:#160008;padding:12px;border-radius:10px;font-weight:900}dialog button,dialog a,#drawer a,#drawer button{display:block;width:100%;padding:13px;margin-top:10px;border-radius:11px;border:2px solid #e7a23a;background:linear-gradient(#ffc0db,#dc578f);color:#160008;text-decoration:none;font-weight:900}#drawer{position:fixed;top:0;right:-310px;width:300px;height:100dvh;background:#390017;border-left:3px solid #e4a13a;padding:20px;transition:.25s;z-index:30}#drawer.open{right:0}.camera-panel:fullscreen{margin:0;border:0;border-radius:0;width:100vw;height:100vh}.camera-panel:fullscreen .camera-full{bottom:20px;right:20px}@media(orientation:landscape){.phone-app{width:100%;max-width:none}.camera-panel{min-height:calc(100dvh - 100px)}body.camera-live .chrome,body.camera-live .contact-strip,body.camera-live .messages,body.camera-live .chatbar{display:none}body.camera-live .phone-app{display:block}body.camera-live .camera-panel{margin:0;border:0;border-radius:0;width:100vw;height:100dvh}}@media(max-width:430px){.chatbar{grid-template-columns:55px 1fr auto}.chatbar #like{grid-column:2}.chatbar #send{grid-column:3}}
:root{--bell:#ffd34d}
.chrome{grid-template-columns:72px 1fr 54px 72px}
.alert-bell{position:relative;height:54px;border:2px solid #ffca5a;border-radius:15px;background:linear-gradient(145deg,#ffcf69,#e67d16 58%,#8d3507);font-size:25px;box-shadow:inset 3px 3px 4px #fff0a7,inset -4px -5px 7px #7d2603,0 4px 8px #090002}
.alert-bell b{position:absolute;right:-5px;top:-7px;min-width:22px;height:22px;padding:2px;border-radius:50%;background:#d20e3e;color:#fff;border:2px solid #fff;font-size:12px}
#likesPanel{position:fixed;z-index:40;top:0;right:-360px;width:min(350px,92vw);height:100dvh;padding:14px;background:linear-gradient(145deg,#6c1234,#230008);border-left:4px solid #e9a638;box-shadow:-12px 0 28px #000;transition:.25s;overflow:auto}
#likesPanel.open{right:0}.likes-head{display:flex;align-items:center;justify-content:space-between;color:#65e5ff;font-size:20px}.likes-head button{border:2px solid #e8aa3c;border-radius:9px;background:#e86d9f;padding:8px}
#likesPanel article{margin-top:14px;padding:13px;border:2px solid #12c8ed;border-radius:15px;background:#150208;box-shadow:inset 0 0 14px #000}#likesPanel article>b{display:block;color:#ffd42b;font-size:20px}#likesPanel article span{display:block;margin:6px 0 10px}#likesPanel article div{display:grid;grid-template-columns:1fr 1fr auto auto;gap:5px}#likesPanel article button{border:1px solid #ffca5a;border-radius:9px;background:linear-gradient(#ffb7d6,#d94f8a);font-weight:900;padding:8px 5px}
#likesPanel article.done{opacity:.45;pointer-events:none}

/* Final mobile interaction rules */
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 10px}.actions button{min-height:48px;border:2px solid #ffca5a;border-radius:13px;background:linear-gradient(145deg,#ffb7d6,#d94f8a 50%,#932451);color:#160008;font-weight:900;box-shadow:inset 2px 2px 4px #ffd9e8,inset -3px -4px 7px #7a1740,0 3px 7px #090002}.chatbar{grid-template-columns:1fr auto}.chatbar input{font-size:16px}
#likesPanel{width:min(46vw,250px);right:-260px;padding:10px;border-left-width:3px}.likes-head{font-size:14px}.likes-head button{padding:5px}.panel-help{font-size:11px;color:#d8c6b7;margin:8px 0}.likes-head+article{margin-top:6px}#likesPanel article{display:grid;grid-template-columns:1fr 34px;gap:5px;margin-top:8px;padding:5px;border-color:#d89e35;border-radius:12px;background:#21000d}#likesPanel article .notice{border:0;border-radius:9px;background:linear-gradient(#ffc0dc,#e56c9e);color:#160008;padding:8px;font-weight:900;font-size:12px;text-align:left}#likesPanel article .pick{border:2px solid #ffd367;border-radius:50%;width:30px;height:30px;align-self:center;background:#3b071c;color:#fff;font-size:16px}.selected-note{margin-top:12px;border:2px solid #e3bd72;border-radius:12px;padding:9px;background:linear-gradient(145deg,#fae8b7,#cfb37b);color:#1b0802}.selected-note b{font-size:13px}.selected-note p{font-size:12px;margin:5px 0}.selected-note input{width:100%;border:1px solid #6e5127;border-radius:8px;padding:7px;background:#fff7df;font-size:11px}
@media(max-width:430px){.actions{grid-template-columns:repeat(2,1fr)}#likesPanel{width:min(50vw,238px)}.chrome{grid-template-columns:62px 1fr 48px 62px}.logo-heart,.menu{height:54px}.brand h1{font-size:28px}.alert-bell{height:48px}}
