/* Compact responsive brand layer. No model, infrastructure or secrets in public UI. */
[hidden] { display: none !important; }
:root { --paami-glow:#79e8d6; --paami-muted:#a9bfd5; --paami-line:rgba(162,193,226,.17); }
html { scroll-behavior:smooth; }
body { background:radial-gradient(ellipse 60% 35% at 50% -7%,#174f65 0%,transparent 75%),linear-gradient(165deg,#08142a,#0a1023 70%);min-height:100vh; }
header {max-width:1120px;padding:13px 22px;min-height:68px;border-bottom:1px solid var(--paami-line);}
.brand {font-size:20px;letter-spacing:-.4px;white-space:nowrap;}
.header-actions {display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.header-actions a {color:#a3f0e8;text-decoration:none;font-size:13px;}
.compact-label {margin:0;display:flex;align-items:center;gap:4px;}
#uiLanguage {margin:0;width:auto;min-height:37px;max-width:160px;padding:7px 10px;border-radius:10px;background:#132642;font-size:13px;}
.header-actions button {padding:8px 12px;font-size:12px;}
main {max-width:1120px;padding:9px 22px 34px;}
.hero {max-width:none;padding:24px 290px 19px 0;position:relative;min-height:198px;isolation:isolate;}
.hero .eyebrow {font-size:10px;letter-spacing:.17em;}
h1 {font-size:clamp(27px,3.5vw,43px);line-height:1.13;letter-spacing:-.035em;margin:10px 0;}
.hero h1 {background:linear-gradient(110deg,#f0f9ff 22%,#8dfde8 64%,#d4b4ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ocean-art {position:absolute;right:-14px;top:-18px;width:min(340px,34vw);height:240px;pointer-events:none;z-index:-1;filter:drop-shadow(0 0 18px #22f3e534);}
.ocean-art img {display:block;width:100%;height:100%;object-fit:contain;animation:oceanFloat 6s ease-in-out infinite;}
.ocean-illustration {width:100%;height:100%;overflow:visible;}
.jellyfish {transform-origin:52% 47%;animation:oceanFloat 5s ease-in-out infinite;}
.ocean-fish {transform-origin:30% 65%;animation:oceanSwim 7s ease-in-out infinite;}
.ocean-shell {transform-origin:80% 65%;animation:oceanFloat 6s ease-in-out -1s infinite;}
.sound-wave {animation:oceanPulse 2.4s ease-in-out infinite;}
.ocean-sticker {position:absolute;display:grid;place-items:center;width:37px;height:37px;font-size:21px;border-radius:13px;border:1px solid #a0f4e25c;background:linear-gradient(140deg,#ffffff33,#65d7eb0b);backdrop-filter:blur(7px);box-shadow:0 3px 20px #1af9e321;animation:oceanFloat 5s ease-in-out infinite;}
.sticker-one {right:28px;bottom:4px;}.sticker-two{left:16px;bottom:28px;animation-delay:-2s;}.sticker-three{right:38px;top:3px;animation-delay:-3s;}
@keyframes oceanFloat {0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-8px) rotate(3deg);}}
@keyframes oceanSwim {0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes oceanPulse {0%,100%{opacity:.52}50%{opacity:1}}
h2 {font-size:19px;margin-bottom:12px;}
h3 {font-size:15px;margin:0 0 5px;color:#effffe;}
.hero p {font-size:14px;line-height:1.65;margin:4px 0;}
.panel {padding:21px;border-radius:19px;border-color:var(--paami-line);box-shadow:0 12px 32px #0002;}
label {font-size:12.5px;margin:11px 0;}
input:not([type=checkbox],[type=range]),select,textarea {min-height:40px;margin-top:6px;padding:9px 12px;font-size:14px;border-radius:10px;}
textarea {min-height:100px;}
button,.file-btn {padding:10px 14px;border-radius:10px;font-size:13px;transition:transform .15s,filter .15s,background .15s;}
button:not(:disabled):hover {filter:brightness(1.08);transform:translateY(-1px);}
button:focus-visible,a:focus-visible {outline:2px solid var(--paami-glow);outline-offset:3px;}
.room-nav {display:flex;flex-wrap:wrap;align-items:stretch;gap:9px;margin:4px 0 20px;}
.room-card {flex:1 1 174px;min-width:0;display:flex;align-items:center;gap:8px;text-decoration:none;color:#effaff;position:relative;overflow:hidden;padding:8px 12px 8px 7px;border:1px solid #355776;border-radius:15px;background:linear-gradient(135deg,#163052,#142039);box-shadow:inset 0 1px #ffffff14,0 6px 18px #0002;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.room-card::after {content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#b5fffa18 50%,transparent 80%);transform:translateX(-110%);transition:transform .5s ease;pointer-events:none;}
.room-card:hover::after,.room-card:focus-visible::after {transform:translateX(110%);}
.room-card img {width:56px;height:56px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 8px #48d5e933);transition:transform .2s ease;}
.room-card:hover,.room-card:focus-visible {transform:translateY(-2px);border-color:#6efbea;box-shadow:0 0 22px #47dfd026,inset 0 1px #ffffff26;}
.room-card:hover img {transform:scale(1.07) rotate(-4deg);}
.room-card:active,button:active:not(:disabled) {transform:scale(.97);filter:brightness(1.18);}
.room-card.active,.room-card[aria-current="location"] {border-color:#7efae5;background:linear-gradient(130deg,#1e5360,#203358);box-shadow:0 0 0 1px #71eadd59,0 0 23px #27f7d52b,inset 0 1px #ffffff3a;}
.room-card.active::before {content:"";position:absolute;left:23px;right:23px;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,#6afce7,#bf8dff);box-shadow:0 0 11px #58ffde;}
.room-card strong {display:block;font-size:12.5px;line-height:1.4;}.room-card small {display:block;color:#aac4de;font-size:10px;line-height:1.45;margin-top:3px;}
.room-panel,.demo-room,.auth-shell {scroll-margin-top:90px;}
.room-panel:target,.demo-room:target,.auth-shell:target {animation:roomFlash .8s ease-out;}
@keyframes roomFlash {0% {filter:drop-shadow(0 0 18px #63ffdf74)}100% {filter:drop-shadow(0 0 0 transparent)}}
.record-review {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 6px;padding:9px;border:1px solid #346980;border-radius:12px;background:#0b2940;}
.record-review audio {width:min(100%,360px);height:36px;flex:1 1 205px;}
.danger-outline {color:#ffc3cd;border-color:#d45a7999 !important;background:linear-gradient(130deg,#552d49,#2d2947) !important;}
.danger-outline:hover {box-shadow:0 0 15px #fa6e8751;}
#recordHint {margin:4px 0 10px;}
.actions {margin:12px 0;}
.muted {color:var(--paami-muted);font-size:12.5px;}
.columns {grid-template-columns:1fr 1.12fr;gap:16px;}
.estimates {padding:10px;gap:8px;margin:12px 0;}
.estimates strong {font-size:18px;}
.estimates small {font-size:10px;}
.auth-shell {display:grid;grid-template-columns:minmax(315px,480px) 1fr;gap:25px;align-items:center;margin:4px 0 22px;}
.auth-panel {background:linear-gradient(150deg,#182c45,#101d37 75%);}
.auth-panel h2 {margin-bottom:7px;}
.auth-tabs,.mode-tabs {display:flex;flex-wrap:wrap;gap:7px;margin:15px 0 12px;}
.auth-tabs button,.mode-tabs button {flex:1;min-width:85px;padding:9px 10px;}
.tab-selected {background:#7be5d2 !important;color:#07333c !important;border-color:transparent !important;}
.auth-message {padding:22px 18px 22px 4px;max-width:460px;}
.auth-message p {line-height:1.8;color:#c2cfe1;font-size:14px;}
.google-login {width:100%;text-align:center;background:#eaf1f8 !important;color:#183048 !important;border-color:#d4e4f0 !important;}
.google-intro {text-align:center;margin-top:18px;margin-bottom:10px;}
#googleButtonHost {min-height:46px;margin-top:12px;display:flex;justify-content:center;}
#accountStatus {min-height:19px;}
.marketing {margin:7px 0 23px;padding:17px;border-radius:18px;border:1px solid var(--paami-line);background:#11233aa6;}
.marketing h2 {font-size:18px;margin:0 0 5px;}
.marketing .marketing-intro p {margin:0 0 13px;font-size:13px;color:#afc4df;}
.plan-cards {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.plan-cards>div {padding:13px 15px;border-radius:12px;background:linear-gradient(140deg,#15384a,#162742);border:1px solid #286b72;box-shadow:inset 0 1px #ffffff16;}
.plan-cards>div:nth-child(2) {background:linear-gradient(140deg,#29406a,#142447);border-color:#59589e;}
.plan-cards>div:nth-child(3) {background:linear-gradient(140deg,#402b59,#1d2447);border-color:#8961a0;}
.plan-cards>div:nth-child(2) strong{color:#c0b0ff;}.plan-cards>div:nth-child(3) strong{color:#ffb4dc;}
.plan-cards strong {display:block;font-size:19px;color:#86f0e0;}
.plan-cards small {display:block;font-size:11px;color:#b5cadc;margin-top:4px;}
.marketing>.muted {margin:10px 0 0;}
.demo-room {margin:11px 0 24px;}
.demo-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.demo-heading h2 {margin-bottom:8px;}
.demo-heading p {margin-top:0;}
.demo-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.demo-list>.muted {grid-column:1/-1;padding:12px 15px;border:1px dashed #31536c;border-radius:13px;}
.demo-card {min-width:0;padding:14px 15px;border:1px solid var(--paami-line);border-radius:15px;background:#14223b;}
.demo-card:hover {border-color:#68bdb49c;background:#1a2e45;}
.demo-card span {display:block;font-size:11px;color:#b9e9e8;margin-top:11px;}
.demo-card audio {width:100%;height:39px;margin-top:4px;}
.studio-bar {display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.studio-bar h2 {margin:0;}
.admin-limits {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:11px 0;border:1px solid #33536d;border-radius:11px;padding:10px;}
.metric-cards {display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:0 0 12px;}
.metric-cards>div {padding:12px 9px;border:1px solid #315674;border-radius:12px;background:#15283e;}
.metric-cards strong {display:block;font-size:22px;color:#83e5d8;}
.metric-cards small {font-size:10px;color:#bccfe3;}
.owner-overview {padding:0 0 13px;}
.admin-limits small {grid-column:1/-1;color:#a9c7d6;font-size:11px;}
.admin-limits input,.admin-limits select {min-width:0;margin:0;}
.admin-limits button {grid-column:1/-1;}
.demo-admin-item {border-top:1px solid #315474;padding:10px 0;}
#pendingShell {max-width:680px;margin:12px auto 22px;}
#advancedControls {margin:12px 0;padding:14px;border:1px solid #2f5976;border-radius:12px;background:#0c2036;}
#advancedControls input[type=range] {display:block;width:100%;margin:10px 0;accent-color:#77e0d7;}
#strengthValue {float:right;color:#81ebdc;}
footer {font-size:11px;padding:21px 0 5px;}
@media(max-width:850px) {.auth-shell {grid-template-columns:1fr;}.auth-message {display:none;}.demo-list{grid-template-columns:repeat(2,minmax(0,1fr));}.columns{grid-template-columns:1fr;}.metric-cards{grid-template-columns:repeat(3,1fr);}.hero{padding-right:240px;}.ocean-art{width:245px;}}
@media(max-width:580px) {header{min-height:58px;padding:10px 15px;flex-direction:row;align-items:center;}main{padding:6px 14px 30px;}.hero{padding:17px 0 12px;min-height:185px;}.hero h1,.hero p,.hero .eyebrow{position:relative;z-index:1;}.hero p{font-size:13px;max-width:76%;}.ocean-art{width:185px;height:175px;right:-15px;top:7px;opacity:.71;}.room-nav{gap:7px;}.room-card{flex:1 1 calc(50% - 8px);padding:7px 9px 7px 4px;}.room-card img{width:42px;height:42px;}.room-card strong{font-size:11px;}.room-card small{font-size:9px;}.marketing{padding:13px;margin-bottom:18px;}.plan-cards{gap:7px;}.plan-cards>div{padding:11px 8px;}.plan-cards strong{font-size:14px;}.plan-cards small{font-size:9px;}.demo-list{grid-template-columns:1fr;}.panel{padding:16px;}.header-actions{gap:6px;}.brand{font-size:17px;}.auth-tabs button{font-size:12px;}.input-grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}button,.room-card,.room-card img{transition:none;}.jellyfish,.ocean-fish,.ocean-shell,.sound-wave,.ocean-sticker,.ocean-art img,.room-panel:target,.demo-room:target,.auth-shell:target{animation:none;}}
