:root{--navy:#092b67;--teal:#13bec3;--teal-soft:#dff8f7;--purple:#8473c6;--lavender:#efeafd;--coral:#ff7769;--peach:#fff0e9;--ink:#17264c;--muted:#9388b9;--card:#fff;--line:#eee8f2;--shadow:0 14px 38px rgba(78,60,116,.14);font-family:Inter,ui-rounded,"SF Pro Rounded","Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 20% 0,#fff2f4,transparent 38%),radial-gradient(circle at 90% 10%,#fff5df,transparent 35%),#f5f2fa}button,input,select{font:inherit}button,a{touch-action:manipulation}.hidden{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.toast{position:fixed;z-index:999;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(88vw,420px);padding:12px 17px;border-radius:17px;color:#fff;background:#192650;box-shadow:var(--shadow);font-size:13px;font-weight:800;text-align:center}.toast.error{background:#ad3d54}.login-view,.app-view{position:fixed;inset:0;overflow:hidden}.login-view{display:grid;place-items:center;padding:10px}.login-card,.native-shell{width:min(100%,520px);height:min(100dvh,930px);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,251,250,.96));box-shadow:0 24px 80px rgba(58,40,93,.18);overflow:hidden}.login-card{border-radius:40px;padding:18px 26px 24px;display:flex;flex-direction:column;gap:13px}.brand-header,.app-header{display:flex;align-items:center;justify-content:space-between}.brand-logo{font-size:38px;font-weight:1000;letter-spacing:-2px;background:linear-gradient(90deg,#ff6f66 8%,#ff8d4b 30%,#15bfc5 55%,#9675db 83%);-webkit-background-clip:text;color:transparent}.brand-logo span{letter-spacing:-3px}.brand-logo small{margin-left:9px;color:#8f79cf;font-size:.48em;letter-spacing:0}.brand-logo.compact{font-size:29px}.brand-mark,.round-button{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;color:var(--teal);background:#fff;box-shadow:0 7px 20px rgba(77,61,116,.13)}.brand-mark svg,.round-button svg{width:28px;height:28px}.brand-mark.secondary,.round-button.purple{color:var(--purple)}.login-hero{position:relative;height:31%;min-height:200px;border-radius:30px;overflow:hidden;border:7px solid #fff;box-shadow:var(--shadow)}.hero-photo-grid{display:grid;grid-template-columns:1fr 1fr;height:100%}.hero-photo-grid img{width:100%;height:100%;object-fit:cover}.hero-heart{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:46px;height:46px;border:6px solid #fff;border-radius:50%;color:#fff;background:var(--coral);font-size:23px}.login-copy{text-align:center}.login-copy h1{margin:0;font-size:30px;line-height:1.12;color:var(--navy)}.login-copy h1 span{color:var(--teal)}.tiny-paws{margin-top:7px;color:var(--purple);font-size:12px}.login-form{display:grid;gap:11px}.login-form label{display:flex;align-items:center;height:58px;border:1px solid var(--line);border-radius:21px;background:#fff;box-shadow:0 8px 22px rgba(70,50,100,.08);padding:0 15px;color:var(--purple)}.login-form input{flex:1;border:0;outline:0;background:transparent;padding:0 12px;font-size:16px;color:var(--ink)}.inline-icon{border:0;background:transparent;color:var(--purple);font-size:18px}.primary-button{height:58px;border:0;border-radius:24px;color:#fff;background:linear-gradient(135deg,#13bec3,#20b7c0);font-size:18px;font-weight:900;box-shadow:0 12px 25px rgba(19,190,195,.25)}.primary-button svg{width:25px;height:25px;margin-right:10px;vertical-align:middle}.text-button{border:0;background:transparent;color:var(--purple);font-weight:800}.login-options{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden}.login-options button{height:52px;border:0;background:transparent;color:var(--navy);font-weight:850}.login-options button+button{border-left:1px dashed #ddd3e8}.native-shell{position:relative;margin:auto;display:grid;grid-template-rows:72px minmax(0,1fr) 82px;border-radius:0}.app-header{padding:10px 18px;background:rgba(255,255,255,.94);z-index:20}.app-header .round-button{width:46px;height:46px}.page-viewport{position:relative;overflow:hidden;background:linear-gradient(180deg,#fffaf8,#f9f7fd)}.app-page{position:absolute;inset:0;display:none;overflow:auto;padding:8px 18px 24px;overscroll-behavior:contain;scrollbar-width:none}.app-page::-webkit-scrollbar{display:none}.app-page.active-page{display:block}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);padding:5px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);box-shadow:0 -10px 30px rgba(74,57,111,.11);z-index:30}.bottom-nav button{border:0;border-radius:24px;background:transparent;color:var(--purple);display:grid;place-items:center;gap:1px;font-size:11px;font-weight:850}.bottom-nav svg{width:28px;height:28px}.bottom-nav button.active{color:var(--teal);background:linear-gradient(180deg,#f0ffff,#fff);box-shadow:0 7px 18px rgba(19,190,195,.12)}.camera-stage{position:relative;height:calc(100% - 68px);min-height:480px;border-radius:32px;overflow:hidden;background:#171526;box-shadow:var(--shadow);border:7px solid #fff}.camera-stage video,.camera-placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.camera-placeholder img{width:100%;height:100%;object-fit:cover}.placeholder-copy{position:absolute;inset:auto 16px 112px;padding:13px 16px;border-radius:20px;color:#fff;background:rgba(20,23,48,.65);backdrop-filter:blur(13px)}.placeholder-copy strong,.placeholder-copy small{display:block}.placeholder-copy strong{font-size:18px}.placeholder-copy small{margin-top:3px}.scan-status{position:absolute;z-index:6;top:18px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:min(88%,390px);padding:12px;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}.status-paw{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;background:var(--coral)}.status-paw svg{width:25px;height:25px}.scan-status strong,.scan-status small{display:block}.scan-status strong{color:var(--navy);font-size:15px}.scan-status small{color:var(--muted);font-size:10px;margin-top:2px}.scan-status b{padding:8px;border-radius:14px;color:#087c83;background:var(--teal-soft);font-size:10px;text-align:center}.camera-corners i{position:absolute;width:40px;height:40px;border-color:#35d0d3;border-style:solid}.camera-corners i:nth-child(1){top:86px;left:24px;border-width:5px 0 0 5px;border-radius:14px 0 0}.camera-corners i:nth-child(2){top:86px;right:24px;border-width:5px 5px 0 0;border-radius:0 14px 0 0}.camera-corners i:nth-child(3){bottom:110px;left:24px;border-width:0 0 5px 5px;border-radius:0 0 0 14px}.camera-corners i:nth-child(4){bottom:110px;right:24px;border-width:0 5px 5px 0;border-radius:0 0 14px}.camera-controls{position:absolute;z-index:8;left:12px;right:12px;bottom:18px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:8px}.control-button,.scan-button{display:grid;place-items:center;margin:auto;border:0;border-radius:50%;color:var(--purple);background:#fff;box-shadow:0 8px 23px rgba(27,27,50,.2)}.control-button{width:54px;height:54px}.control-button svg{width:27px;height:27px}.control-button.coral{color:var(--coral)}.control-button.active{color:#fff;background:var(--purple)}.control-button.recording{color:#fff;background:var(--coral);animation:pulse 1s infinite}.scan-button{width:78px;height:78px;color:#fff;background:linear-gradient(135deg,#19c4c7,#13aeb8);border:7px solid #fff}.scan-button svg{width:43px;height:43px}.scan-button.active{background:linear-gradient(135deg,#ff8c76,#ff625c)}.record-timer{position:absolute;z-index:9;left:50%;bottom:106px;transform:translateX(-50%);padding:7px 12px;border-radius:999px;color:#fff;background:rgba(22,20,38,.72);font-weight:900}.record-timer::first-letter{color:var(--coral)}.camera-note{height:60px;margin-top:8px;padding:9px 14px;border-radius:20px;background:#fff;box-shadow:0 7px 22px rgba(74,57,111,.08)}.camera-note strong,.camera-note span{display:block}.camera-note strong{color:var(--navy);font-size:13px}.camera-note span{color:var(--muted);font-size:10px;margin-top:3px}.page-heading{text-align:center;padding:9px 0 13px}.page-heading h1{margin:0;color:var(--navy);font-size:33px;letter-spacing:-1px}.page-heading p{margin:3px 0 0;color:var(--muted);font-weight:700;font-size:13px}.page-heading.split{display:flex;text-align:left;align-items:center;justify-content:space-between}.page-heading.compact-heading{text-align:left;padding-left:5px}.large-plus{display:grid;place-items:center;width:62px;height:62px;border:0;border-radius:22px;color:var(--purple);background:#fff;box-shadow:var(--shadow)}.large-plus svg{width:31px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);height:48px;padding:5px;margin-bottom:12px;border-radius:24px;background:#fff;box-shadow:0 7px 22px rgba(74,57,111,.08)}.segmented button{border:0;border-radius:20px;background:transparent;color:var(--purple);font-weight:900}.segmented button.active{color:#008f98;background:var(--teal-soft)}.moments-list,.pets-list,.breed-list{display:grid;gap:12px}.moment-card{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:10px;border-radius:25px;background:#fff;box-shadow:0 9px 28px rgba(73,54,108,.1)}.moment-thumb{position:relative;width:128px;height:128px;border-radius:20px;overflow:hidden;background:#eee}.moment-thumb img,.moment-thumb video{width:100%;height:100%;object-fit:cover}.moment-thumb span{position:absolute;left:7px;bottom:7px;padding:4px 7px;border-radius:10px;color:#fff;background:rgba(18,18,27,.68);font-size:10px}.moment-copy{min-width:0}.moment-copy h3{margin:3px 0 0;color:var(--navy);font-size:18px}.moment-copy time{color:var(--muted);font-size:10px}.moment-summary{margin-top:8px;padding:9px;border-radius:15px;background:linear-gradient(135deg,var(--teal-soft),#f8f4ff);font-size:11px;color:var(--navy)}.moment-summary strong,.moment-summary span{display:block}.moment-summary span{color:var(--muted);margin-top:2px}.mini-actions{display:flex;justify-content:space-between;margin-top:8px}.mini-actions button,.mini-actions a{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:12px;color:var(--purple);background:#f7f4fb}.mini-actions svg{width:19px;height:19px}.mini-actions .danger{color:var(--coral)}.recent-card,.quota-card,.recent-moments,.library-button{margin-top:13px;padding:13px;border-radius:23px;background:#fff;box-shadow:0 8px 25px rgba(75,57,111,.09)}.recent-card h3{margin:0 0 9px;color:var(--navy);font-size:14px}.activity-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.activity-strip article{min-width:0;padding-right:7px;border-right:1px dashed #ddd4e8}.activity-strip article:last-child{border:0}.activity-strip strong,.activity-strip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-strip strong{font-size:10px;color:var(--navy)}.activity-strip small{font-size:9px;color:var(--muted)}.pet-card{display:grid;grid-template-columns:42% 1fr;min-height:150px;border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 9px 28px rgba(73,54,108,.1)}.pet-card img{width:100%;height:100%;object-fit:cover}.pet-info{padding:18px 15px}.pet-info h3{margin:0;color:var(--navy);font-size:26px}.pet-info p{margin:5px 0;color:var(--purple);font-weight:800}.pet-counts{display:flex;gap:8px;margin-top:12px}.pet-counts span{padding:7px 9px;border-radius:12px;color:#6c61a2;background:#f5f2f9;font-size:10px;font-weight:800}.pet-info button{margin-top:12px;border:0;color:var(--teal);background:transparent;font-weight:850}.add-pet-banner,.library-button{width:100%;border:0;display:flex;align-items:center;text-align:left;color:var(--ink)}.add-pet-banner{padding:13px 16px;border-radius:25px;background:linear-gradient(90deg,#dcf8f7,#f8ffff);box-shadow:0 8px 25px rgba(75,57,111,.08)}.add-pet-banner>span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:#fff;background:var(--teal)}.add-pet-banner svg{width:29px}.add-pet-banner div{flex:1;padding-left:14px}.add-pet-banner strong,.add-pet-banner small{display:block}.add-pet-banner strong{color:#0a9da4;font-size:18px}.add-pet-banner small{color:var(--muted)}.add-pet-banner b{font-size:22px;color:#aaa}.quota-card{display:flex;align-items:center;justify-content:space-between}.quota-card>div{flex:1}.quota-card strong{color:var(--navy);font-size:13px}.progress{height:8px;margin-top:7px;border-radius:8px;background:#e9e7ee;overflow:hidden}.progress i{display:block;width:0;height:100%;background:var(--teal)}.quota-card>b{margin-left:15px;padding:10px;border-radius:15px;color:#0499a1;background:var(--teal-soft);font-size:12px}.section-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.section-line strong{color:var(--navy);font-size:13px}.section-line button{border:0;background:transparent;color:var(--purple);font-weight:800}.thumb-strip,.viewer-thumbs{display:flex;gap:7px;overflow:auto;scrollbar-width:none}.thumb-strip img,.viewer-thumbs img{flex:0 0 72px;width:72px;height:72px;border-radius:15px;object-fit:cover}.library-button{gap:12px}.library-button svg{width:35px;color:var(--purple)}.library-button span{flex:1}.library-button strong,.library-button small{display:block}.library-button strong{color:var(--navy)}.library-button small{color:var(--muted);margin-top:3px}.library-button b{color:var(--teal);font-size:28px}.back-button{position:absolute;left:18px;border:0;background:#fff;color:var(--purple);width:42px;height:42px;border-radius:50%;box-shadow:var(--shadow)}.back-button svg{width:23px}.search-box{display:flex;height:54px;align-items:center;padding:0 15px;border-radius:22px;background:#fff;box-shadow:0 7px 23px rgba(74,57,111,.09)}.search-box svg{width:26px;color:var(--purple)}.search-box input{flex:1;border:0;outline:0;padding:0 11px;background:transparent;color:var(--ink)}.letter-filter{display:flex;gap:5px;overflow:auto;margin:12px 0;padding:7px;border-radius:20px;background:#fff}.letter-filter button{flex:0 0 35px;height:34px;border:0;border-radius:14px;background:transparent;color:var(--purple);font-weight:900}.letter-filter button.active{color:#fff;background:var(--teal)}.breed-card{display:grid;grid-template-columns:74px 1fr 28px;align-items:center;gap:12px;padding:10px;border-radius:22px;background:#fff;box-shadow:0 7px 22px rgba(74,57,111,.08)}.breed-icon{display:grid;place-items:center;width:74px;height:66px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#74d8d8,#a99ae4);font-size:28px;font-weight:1000}.breed-card h3{margin:0;color:var(--navy)}.breed-card p{margin:4px 0 0;color:var(--muted);font-size:11px}.breed-card b{display:grid;place-items:center;width:27px;height:27px;border:2px solid var(--purple);border-radius:50%;color:var(--purple)}.profile-card{display:grid;grid-template-columns:120px 1fr;gap:15px;padding:18px;border-radius:30px;background:#fff;box-shadow:var(--shadow)}.profile-avatar{position:relative;width:120px;height:120px}.profile-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:6px solid #ffd5cc}.profile-avatar button{position:absolute;right:-3px;bottom:0;display:grid;place-items:center;width:42px;height:42px;border:5px solid #fff;border-radius:50%;color:#fff;background:var(--coral)}.profile-avatar svg{width:20px}.profile-copy h1{margin:2px 0;color:var(--navy);font-size:27px}.profile-copy p{margin:0;color:var(--purple);font-weight:800}.profile-copy>span{display:block;margin:8px 0;color:var(--teal);font-size:12px}.profile-copy>div{display:flex;gap:7px}.profile-copy button{display:flex;align-items:center;gap:5px;border:0;border-radius:15px;padding:9px;color:#b04e49;background:var(--peach);font-size:10px;font-weight:800}.profile-copy button+button{color:#67569c;background:var(--lavender)}.profile-copy svg{width:17px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.admin-grid>button{display:flex;gap:10px;min-height:136px;padding:13px;border:0;border-radius:24px;background:#fff;box-shadow:0 8px 25px rgba(75,57,111,.09);text-align:left}.admin-grid .wide-tile{grid-column:1/-1;min-height:100px}.tile-icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:17px}.tile-icon svg{width:31px}.tile-icon.teal{color:#0aaeb4;background:var(--teal-soft)}.tile-icon.peach{color:#f28c55;background:#fff0df}.tile-icon.lavender{color:#7764bd;background:var(--lavender)}.admin-grid button>div{display:flex;flex-direction:column}.admin-grid strong{color:var(--navy);font-size:15px}.admin-grid small{color:var(--muted);font-size:10px;margin-top:4px}.admin-grid b{margin-top:auto;color:var(--teal);font-size:11px}.logout-button{width:100%;height:48px;margin-top:14px;border:0;border-radius:18px;color:#fff;background:var(--coral);font-weight:900}.overlay,.modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:rgba(30,20,52,.42);backdrop-filter:blur(9px);padding:8px}.viewer-card,.modal-card{width:min(100%,520px);height:min(100dvh,930px);border-radius:35px;background:linear-gradient(180deg,#fffaf8,#fff);overflow:hidden;box-shadow:0 30px 90px rgba(31,22,54,.3)}.viewer-card{display:grid;grid-template-rows:68px minmax(0,1fr) auto 84px 62px;padding:0 16px 16px}.viewer-card>header{display:flex;align-items:center;justify-content:space-between}.viewer-stage{position:relative;border-radius:28px;overflow:hidden;background:#171526}.viewer-stage img,.viewer-stage video{width:100%;height:100%;object-fit:contain}.viewer-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;color:var(--purple);background:#fff}.viewer-arrow.left{left:13px}.viewer-arrow.right{right:13px;transform:translateY(-50%) rotate(180deg)}.viewer-arrow svg{width:25px}.viewer-stage>span{position:absolute;left:14px;top:14px;padding:7px 10px;border-radius:14px;color:var(--coral);background:#fff;font-weight:900}.coral-heart{color:var(--coral);font-size:22px}.viewer-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:12px 0}.viewer-actions button,.viewer-actions a{display:grid;place-items:center;gap:3px;border:0;background:transparent;color:var(--purple);text-decoration:none;font-size:8px;font-weight:800}.viewer-actions svg{width:24px;height:24px}.viewer-actions .danger{color:var(--coral)}.slideshow-button{border:0;border-radius:21px;color:#7159bd;background:linear-gradient(90deg,#f3edff,#faf7ff);font-weight:900}.modal-card{height:auto;max-height:min(88dvh,800px);padding:17px;overflow:auto}.modal-card>header{display:flex;align-items:center;justify-content:space-between}.modal-card h2{margin:0;color:var(--navy)}.modal-card>header button{border:0;background:transparent;color:var(--purple);font-size:30px}.form-grid{display:grid;gap:10px}.form-grid label{display:grid;gap:5px;color:var(--navy);font-size:11px;font-weight:800}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);border-radius:15px;padding:12px;outline:0;color:var(--ink);background:#fff}.form-grid textarea{min-height:80px}.form-grid .primary-button{height:48px}.admin-list{display:grid;gap:8px}.admin-list article{padding:11px;border-radius:16px;background:#f7f4fa}.admin-list h4{margin:0;color:var(--navy)}.admin-list small{color:var(--muted)}.admin-list div{display:flex;gap:6px;margin-top:8px}.admin-list button{border:0;border-radius:12px;padding:7px 9px;color:#fff;background:var(--purple);font-size:10px}.admin-list button.danger{background:var(--coral)}@keyframes pulse{50%{transform:scale(.92);box-shadow:0 0 0 10px rgba(255,119,105,.18)}}@media(min-width:700px){.native-shell,.login-card,.viewer-card{border-radius:42px;height:min(94dvh,930px);margin-top:3dvh}.app-view,.login-view{padding:0}.native-shell{border:1px solid rgba(255,255,255,.8)}}@media(max-width:420px){.login-card{border-radius:0;padding:12px 18px}.brand-logo{font-size:32px}.login-hero{min-height:175px}.login-copy h1{font-size:25px}.native-shell{height:100dvh}.app-header{padding:8px 13px}.app-page{padding:6px 12px 18px}.camera-stage{min-height:430px}.scan-status{top:10px}.control-button{width:48px;height:48px}.scan-button{width:70px;height:70px}.moment-card{grid-template-columns:106px 1fr}.moment-thumb{width:106px;height:118px}.profile-card{grid-template-columns:92px 1fr}.profile-avatar{width:92px;height:92px}.profile-copy h1{font-size:21px}.admin-grid>button{min-height:125px;padding:10px}.tile-icon{flex-basis:44px;width:44px;height:44px}.viewer-card{border-radius:0}}
.section-actions{display:flex;align-items:center;gap:7px}.section-actions button{border:0;border-radius:12px;padding:7px 9px;color:var(--purple);background:var(--lavender);font-size:10px;font-weight:900}.section-actions #addPhotoButton{color:#057e86;background:var(--teal-soft)}.pet-card>button{border:0;padding:0;background:#eee;overflow:hidden}.pet-card>button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ========================================================================
   ANIMORA APPROVED MOCKUP VISUAL SYSTEM — 5.1.0-approved-ui.1
   The seven owner-approved screens are the exact visual acceptance target.
   ======================================================================== */
:root{
  --approved-navy:#082a67;
  --approved-teal:#14bec5;
  --approved-teal-2:#23ccd0;
  --approved-teal-soft:#dff9f8;
  --approved-purple:#8071c3;
  --approved-purple-2:#9b8bd9;
  --approved-lavender:#f2edff;
  --approved-coral:#ff7467;
  --approved-peach:#fff1eb;
  --approved-cream:#fffaf7;
  --approved-ink:#112750;
  --approved-muted:#9488bd;
  --approved-line:#eee9f3;
  --approved-shadow:0 18px 46px rgba(71,53,105,.13);
  --approved-soft-shadow:0 10px 28px rgba(71,53,105,.09);
  --approved-radius:34px;
  --approved-font:ui-rounded,"SF Pro Rounded","Avenir Next Rounded","Nunito","Segoe UI",sans-serif;
  font-family:var(--approved-font);
}
html,body{
  background:
    radial-gradient(circle at 13% 0%,rgba(255,219,231,.6),transparent 34%),
    radial-gradient(circle at 90% 6%,rgba(255,232,197,.56),transparent 32%),
    linear-gradient(180deg,#fffdfd 0%,#fff9f7 48%,#f9f5ff 100%);
}
body{color:var(--approved-ink)}
button,input,select,textarea{font-family:var(--approved-font)}
.login-view,.app-view{padding:0 10px}
.login-card,.native-shell,.viewer-card{
  width:min(100%,600px);
  height:min(100dvh,1060px);
  border-radius:44px;
  border:1px solid rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 12% 0,rgba(255,224,234,.45),transparent 28%),
    radial-gradient(circle at 90% 4%,rgba(255,236,204,.46),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,251,249,.99));
  box-shadow:0 28px 90px rgba(54,38,88,.18);
}
.login-card{
  padding:24px 31px 30px;
  gap:16px;
}
.brand-header,.app-header{min-height:82px}
.brand-logo{
  font-size:50px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-4px;
  background:linear-gradient(90deg,#ff6b69 5%,#ff8757 25%,#f8a84f 42%,#12bfc6 60%,#6aa9dc 72%,#9a78db 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 0 rgba(255,255,255,.75));
}
.brand-logo span{letter-spacing:-4px}
.brand-logo small{
  margin-left:12px;
  color:#8974ca;
  font-size:.43em;
  font-weight:950;
  letter-spacing:0;
}
.brand-logo.compact{font-size:40px}
.brand-mark,.round-button{
  width:62px;
  height:62px;
  border:8px solid rgba(255,255,255,.92);
  color:var(--approved-teal);
  background:rgba(255,255,255,.98);
  box-shadow:0 10px 28px rgba(77,61,116,.14);
}
.brand-mark.secondary,.round-button.purple{color:var(--approved-purple)}
.brand-mark svg,.round-button svg{width:31px;height:31px;stroke-width:3.2}
.login-hero{
  min-height:310px;
  height:36%;
  border-radius:39px;
  border:8px solid #fff;
  box-shadow:var(--approved-shadow);
}
.hero-photo-grid{gap:0}
.hero-photo-grid img{object-position:center 38%}
.hero-heart{
  top:-2px;
  width:72px;
  height:72px;
  border:9px solid #fff;
  background:var(--approved-coral);
  font-size:35px;
  box-shadow:0 9px 20px rgba(255,116,103,.25);
}
.login-copy{padding:5px 0 0}
.login-copy h1{
  font-size:39px;
  line-height:1.18;
  letter-spacing:-1.4px;
  color:var(--approved-navy);
}
.login-copy h1 span{color:var(--approved-teal)}
.tiny-paws{
  margin-top:12px;
  color:var(--approved-purple-2);
  font-size:14px;
  letter-spacing:4px;
}
.login-form{gap:15px}
.login-form label{
  height:68px;
  border:2px solid #f0ecf1;
  border-radius:28px;
  padding:0 20px;
  color:var(--approved-purple);
  background:rgba(255,255,255,.98);
  box-shadow:var(--approved-soft-shadow);
}
.login-form label>span{font-size:25px}
.login-form input{font-size:19px;padding:0 15px}
.primary-button{
  height:70px;
  border-radius:31px;
  background:linear-gradient(135deg,var(--approved-teal-2),#11b9c1);
  font-size:24px;
  box-shadow:0 15px 30px rgba(20,190,197,.28);
}
.primary-button svg{width:33px;height:33px}
.text-button{font-size:18px;text-decoration:underline dotted;text-underline-offset:8px}
.login-options{
  border-radius:28px;
  box-shadow:var(--approved-soft-shadow);
}
.login-options button{height:64px;font-size:16px}
.native-shell{
  display:grid;
  grid-template-rows:92px minmax(0,1fr) 104px;
  overflow:hidden;
}
.app-header{
  padding:13px 24px 8px;
  background:transparent;
}
.app-header .round-button{width:56px;height:56px;border-width:7px}
.page-viewport{
  background:
    radial-gradient(circle at 14% 0,rgba(255,226,235,.33),transparent 27%),
    radial-gradient(circle at 90% 2%,rgba(255,237,207,.34),transparent 31%),
    linear-gradient(180deg,#fffdfd,#fffaf7 56%,#faf7ff);
}
.app-page{
  padding:8px 24px 28px;
  scroll-padding-bottom:28px;
}
.bottom-nav{
  margin:0 15px 10px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  border-radius:35px;
  background:rgba(255,255,255,.98);
  box-shadow:0 -2px 24px rgba(78,60,116,.08),0 15px 38px rgba(78,60,116,.13);
}
.bottom-nav button{
  min-height:78px;
  border-radius:27px;
  gap:4px;
  color:var(--approved-purple);
  font-size:14px;
  font-weight:900;
}
.bottom-nav svg{width:35px;height:35px;stroke-width:3.1}
.bottom-nav button.active{
  color:var(--approved-teal);
  background:linear-gradient(180deg,#f0ffff,#fff);
  box-shadow:0 10px 24px rgba(20,190,197,.13);
}
.bottom-nav button.active:after{
  content:"";
  width:56px;
  height:5px;
  border-radius:999px;
  background:var(--approved-teal);
}
.page-heading{
  position:relative;
  padding:17px 0 22px;
}
.page-heading h1{
  font-size:50px;
  line-height:1;
  letter-spacing:-2px;
  color:var(--approved-navy);
  text-shadow:0 3px 0 rgba(255,255,255,.8);
}
.page-heading p{
  margin-top:9px;
  color:var(--approved-purple-2);
  font-size:17px;
  font-weight:850;
}
.page-heading:not(.split):not(.compact-heading)::before,
.page-heading:not(.split):not(.compact-heading)::after{
  content:"";
  position:absolute;
  top:40px;
  width:40px;
  height:30px;
  border-top:5px solid var(--approved-teal);
  border-radius:50%;
  opacity:.95;
}
.page-heading:not(.split):not(.compact-heading)::before{left:11%;transform:rotate(-18deg)}
.page-heading:not(.split):not(.compact-heading)::after{right:11%;transform:rotate(18deg);border-color:var(--approved-purple)}
.page-heading.split{
  align-items:center;
  padding:20px 4px 22px;
}
.page-heading.split h1{font-size:39px}
.page-heading.split p{font-size:16px}
.large-plus{
  width:76px;
  height:76px;
  border-radius:28px;
  color:var(--approved-purple);
  box-shadow:var(--approved-shadow);
}
.large-plus svg{width:39px;height:39px}
.segmented{
  height:61px;
  padding:7px;
  margin:0 10px 20px;
  border-radius:31px;
  box-shadow:var(--approved-soft-shadow);
}
.segmented button{
  border-radius:25px;
  font-size:18px;
}
.segmented button.active{
  color:#079ba3;
  background:linear-gradient(135deg,#d8faf8,#ebffff);
}
.camera-stage{
  height:100%;
  min-height:560px;
  border:8px solid #fff;
  border-radius:43px;
  box-shadow:var(--approved-shadow);
  background:#dfd7ce;
}
.camera-placeholder img{object-position:center center}
.placeholder-copy{
  left:50%;
  right:auto;
  bottom:132px;
  width:min(78%,390px);
  transform:translateX(-50%);
  text-align:center;
  border-radius:24px;
  background:rgba(255,255,255,.91);
  color:var(--approved-navy);
  box-shadow:var(--approved-shadow);
}
.placeholder-copy strong{font-size:20px}
.placeholder-copy small{color:var(--approved-purple);font-size:13px}
.scan-status{
  top:24px;
  width:min(78%,430px);
  padding:14px 17px;
  border-radius:28px;
  box-shadow:0 14px 38px rgba(62,46,97,.17);
}
.status-paw{width:54px;height:54px;background:var(--approved-coral)}
.status-paw svg{width:31px;height:31px}
.scan-status strong{font-size:19px;color:var(--approved-navy)}
.scan-status small{font-size:12px;color:var(--approved-purple-2)}
.scan-status b{
  padding:10px 13px;
  border-radius:17px;
  color:#098d95;
  background:var(--approved-teal-soft);
  font-size:11px;
}
.camera-corners i{width:58px;height:58px;border-width:0;border-color:var(--approved-teal-2)}
.camera-corners i:nth-child(1){top:38px;left:27px;border-width:7px 0 0 7px;border-radius:18px 0 0}
.camera-corners i:nth-child(2){top:38px;right:27px;border-width:7px 7px 0 0;border-radius:0 18px 0 0}
.camera-corners i:nth-child(3){bottom:142px;left:27px;border-width:0 0 7px 7px;border-radius:0 0 0 18px}
.camera-corners i:nth-child(4){bottom:142px;right:27px;border-width:0 7px 7px 0;border-radius:0 0 18px}
.camera-controls{
  left:26px;
  right:26px;
  bottom:25px;
  gap:10px;
}
.control-button{width:66px;height:66px}
.control-button svg{width:32px;height:32px}
.scan-button{
  width:94px;
  height:94px;
  border:8px solid #fff;
  background:linear-gradient(145deg,#20c8cb,#10b5be);
}
.scan-button svg{width:50px;height:50px}
.camera-note{display:none}
.record-timer{bottom:132px}
.moments-list,.pets-list,.breed-list{gap:17px}
.moment-card{
  grid-template-columns:minmax(160px,42%) 1fr;
  min-height:200px;
  gap:16px;
  padding:12px;
  border-radius:31px;
  box-shadow:var(--approved-soft-shadow);
}
.moment-thumb{
  width:100%;
  height:100%;
  min-height:176px;
  border-radius:24px;
}
.moment-thumb span{
  left:10px;
  bottom:10px;
  padding:6px 10px;
  border-radius:13px;
  font-size:12px;
}
.moment-copy{padding:5px 6px 4px 0}
.moment-copy h3{font-size:25px;color:var(--approved-navy)}
.moment-copy time{font-size:13px;color:var(--approved-purple-2);font-weight:800}
.moment-summary{
  margin-top:12px;
  padding:12px 14px;
  border-radius:19px;
  background:linear-gradient(135deg,#e2fbfa,#f5ffff);
}
.moment-summary strong{font-size:15px;color:var(--approved-navy)}
.moment-summary span{font-size:12px;color:var(--approved-purple)}
.mini-actions{margin-top:12px;justify-content:space-between}
.mini-actions button,.mini-actions a{
  width:38px;
  height:38px;
  border-radius:14px;
  background:#f8f6fc;
}
.mini-actions svg{width:23px;height:23px}
.recent-card,.quota-card,.recent-moments,.library-button{
  margin-top:17px;
  border-radius:28px;
  background:#fff;
  box-shadow:var(--approved-soft-shadow);
}
.recent-card{padding:14px 17px}
.recent-card h3{font-size:17px;color:var(--approved-navy)}
.activity-strip{gap:0}
.activity-strip article{
  position:relative;
  min-height:58px;
  padding:6px 10px 6px 44px;
  border-right:1px dashed #d8d0e6;
}
.activity-strip article:last-child{border-right:0}
.activity-strip article:before{
  content:"♥";
  position:absolute;
  left:5px;
  top:9px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  color:#fff;
  background:var(--approved-teal);
  font-size:13px;
}
.activity-strip strong{font-size:11px;color:var(--approved-navy)}
.activity-strip small{font-size:10px;color:var(--approved-purple)}
.pet-card{
  grid-template-columns:43% 1fr;
  min-height:196px;
  border-radius:32px;
  box-shadow:var(--approved-soft-shadow);
}
.pet-card>button{border-radius:27px;margin:12px;background:#f4f0ef}
.pet-card img{border-radius:22px}
.pet-info{padding:29px 20px 20px 4px;position:relative}
.pet-info h3{font-size:34px;letter-spacing:-1px;color:var(--approved-navy)}
.pet-info p{font-size:18px;color:var(--approved-purple-2)}
.pet-counts{margin-top:14px;gap:9px}
.pet-counts span{padding:9px 12px;border-radius:15px;font-size:12px}
.pet-info button{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:54px;
  overflow:hidden;
  color:transparent;
  font-size:0;
}
.pet-info button:after{content:"›";color:var(--approved-purple);font-size:44px;line-height:1}
.add-pet-banner{
  margin-top:18px;
  min-height:100px;
  padding:16px 22px;
  border-radius:31px;
  background:linear-gradient(100deg,#dffafa,#f8ffff);
}
.add-pet-banner>span{width:72px;height:72px}
.add-pet-banner svg{width:38px;height:38px}
.add-pet-banner strong{font-size:24px}
.add-pet-banner small{font-size:14px}
.add-pet-banner b{font-size:31px}
.quota-card{padding:18px 22px}
.quota-card strong{font-size:16px}
.quota-card>b{font-size:15px;padding:12px 15px}
.progress{height:11px}
.recent-moments{padding:15px 17px}
.section-line strong{font-size:16px}
.thumb-strip img,.viewer-thumbs img{
  flex-basis:86px;
  width:86px;
  height:86px;
  border-radius:18px;
  border:3px solid #fff;
  box-shadow:0 7px 16px rgba(62,47,91,.11);
}
.library-button{padding:16px 20px}
.library-button svg{width:41px;height:41px}
.library-button strong{font-size:18px}
.search-box{
  height:70px;
  border-radius:29px;
  padding:0 23px;
  box-shadow:var(--approved-soft-shadow);
}
.search-box svg{width:32px;height:32px}
.search-box input{font-size:18px}
.letter-filter{
  margin:18px 0;
  padding:9px;
  border-radius:27px;
  box-shadow:var(--approved-soft-shadow);
}
.letter-filter button{flex-basis:44px;height:42px;border-radius:18px;font-size:16px}
.breed-card{
  grid-template-columns:112px 1fr 34px;
  min-height:112px;
  padding:13px 18px 13px 13px;
  border-radius:29px;
  box-shadow:var(--approved-soft-shadow);
}
.breed-icon{
  width:100px;
  height:86px;
  border-radius:25px;
  background:linear-gradient(135deg,#d9faf8,#f2ebff);
  color:var(--approved-teal);
  font-size:34px;
}
.breed-card h3{font-size:22px;color:var(--approved-navy)}
.breed-card p{font-size:13px;color:var(--approved-purple-2)}
.breed-card b{width:32px;height:32px;border-width:3px}
.profile-card{
  grid-template-columns:158px 1fr;
  min-height:220px;
  gap:24px;
  padding:28px;
  border-radius:36px;
  box-shadow:var(--approved-shadow);
}
.profile-avatar{width:158px;height:158px}
.profile-avatar img{border:8px solid #ffd5cc}
.profile-avatar button{width:52px;height:52px}
.profile-copy h1{font-size:37px}
.profile-copy p{font-size:18px}
.profile-copy>span{font-size:16px;margin:13px 0}
.profile-copy>div{gap:12px;flex-wrap:wrap}
.profile-copy button{padding:13px 16px;border-radius:19px;font-size:13px}
.compact-heading{text-align:left;padding:28px 6px 18px}
.compact-heading h1{font-size:38px}
.compact-heading p{font-size:16px}
.admin-grid{gap:16px}
.admin-grid>button{
  min-height:174px;
  padding:20px;
  border-radius:30px;
  box-shadow:var(--approved-soft-shadow);
}
.admin-grid .wide-tile{min-height:126px}
.tile-icon{flex-basis:70px;width:70px;height:70px;border-radius:23px}
.tile-icon svg{width:39px;height:39px}
.admin-grid strong{font-size:21px}
.admin-grid small{font-size:13px;line-height:1.35}
.admin-grid b{font-size:14px}
.logout-button{height:58px;border-radius:24px;font-size:16px}
.overlay,.modal{padding:10px}
.viewer-card{
  grid-template-rows:86px minmax(0,1fr) 106px 104px 74px;
  padding:0 22px 20px;
}
.viewer-card>header{padding:8px 0}
.viewer-stage{border-radius:37px;background:#efe8df;border:7px solid #fff;box-shadow:var(--approved-shadow)}
.viewer-stage img,.viewer-stage video{object-fit:cover}
.viewer-arrow{width:62px;height:62px;box-shadow:var(--approved-shadow)}
.viewer-stage>span{padding:9px 13px;border-radius:17px;font-size:15px}
.viewer-actions{gap:6px;padding:16px 0}
.viewer-actions button,.viewer-actions a{font-size:11px}
.viewer-actions svg{width:31px;height:31px}
.slideshow-button{font-size:18px;border-radius:28px}
.modal-card{width:min(100%,590px);border-radius:35px;padding:22px}
.form-grid input,.form-grid select,.form-grid textarea{border-radius:19px;padding:15px;font-size:15px}
@media(min-width:760px){
  .login-card,.native-shell,.viewer-card{height:min(96dvh,1060px);margin-top:2dvh}
  .app-page{padding-left:30px;padding-right:30px}
}
@media(max-width:520px){
  .login-view,.app-view{padding:0}
  .login-card,.native-shell,.viewer-card{width:100%;height:100dvh;border-radius:0;border:0}
  .login-card{padding:16px 19px 22px}
  .brand-logo{font-size:39px}
  .brand-logo.compact{font-size:31px}
  .brand-mark,.round-button{width:52px;height:52px;border-width:6px}
  .login-hero{min-height:240px;border-radius:31px}
  .login-copy h1{font-size:31px}
  .login-form label{height:60px;border-radius:24px}
  .primary-button{height:61px;font-size:20px}
  .native-shell{grid-template-rows:75px minmax(0,1fr) 91px}
  .app-header{padding:8px 15px}
  .app-header .round-button{width:48px;height:48px}
  .app-page{padding:4px 14px 22px}
  .bottom-nav{margin:0 6px 5px;border-radius:28px}
  .bottom-nav button{min-height:68px;font-size:12px}
  .bottom-nav svg{width:30px;height:30px}
  .page-heading h1{font-size:40px}
  .page-heading p{font-size:14px}
  .page-heading.split h1{font-size:32px}
  .large-plus{width:62px;height:62px;border-radius:23px}
  .camera-stage{min-height:480px;border-radius:34px}
  .scan-status{top:14px;width:86%;padding:11px 12px}
  .scan-status strong{font-size:15px}
  .scan-status small{font-size:10px}
  .status-paw{width:43px;height:43px}
  .control-button{width:52px;height:52px}
  .scan-button{width:76px;height:76px}
  .camera-controls{left:12px;right:12px;bottom:18px;gap:4px}
  .moment-card{grid-template-columns:42% 1fr;min-height:158px;gap:10px;padding:9px}
  .moment-thumb{min-height:140px}
  .moment-copy h3{font-size:19px}
  .moment-summary{padding:9px 10px;margin-top:8px}
  .moment-summary strong{font-size:12px}
  .moment-summary span{font-size:10px}
  .mini-actions{margin-top:7px}
  .mini-actions button,.mini-actions a{width:31px;height:31px}
  .pet-card{min-height:158px;border-radius:26px}
  .pet-card>button{margin:9px;border-radius:21px}
  .pet-info{padding:20px 12px 14px 1px}
  .pet-info h3{font-size:25px}
  .pet-info p{font-size:14px}
  .pet-counts span{padding:6px 7px;font-size:9px}
  .add-pet-banner{min-height:82px;padding:12px 15px}
  .add-pet-banner>span{width:58px;height:58px}
  .add-pet-banner strong{font-size:19px}
  .add-pet-banner small{font-size:11px}
  .thumb-strip img,.viewer-thumbs img{flex-basis:68px;width:68px;height:68px}
  .breed-card{grid-template-columns:82px 1fr 28px;min-height:91px;padding:10px}
  .breed-icon{width:72px;height:67px;border-radius:20px;font-size:27px}
  .breed-card h3{font-size:17px}
  .breed-card p{font-size:10px}
  .profile-card{grid-template-columns:104px 1fr;min-height:160px;gap:14px;padding:16px}
  .profile-avatar{width:104px;height:104px}
  .profile-copy h1{font-size:25px}
  .profile-copy p{font-size:13px}
  .profile-copy>span{font-size:11px;margin:8px 0}
  .profile-copy button{padding:8px 10px;font-size:9px}
  .admin-grid>button{min-height:132px;padding:12px}
  .tile-icon{flex-basis:50px;width:50px;height:50px}
  .admin-grid strong{font-size:16px}
  .admin-grid small{font-size:10px}
  .admin-grid b{font-size:10px}
  .viewer-card{grid-template-rows:70px minmax(0,1fr) 91px 79px 61px;padding:0 12px 12px}
  .viewer-stage{border-radius:29px}
  .viewer-arrow{width:47px;height:47px}
  .viewer-actions button,.viewer-actions a{font-size:8px}
  .viewer-actions svg{width:24px;height:24px}
}


/* ========================================================================
   ANIMORA CAMERA COMPACT OUTSIDE-MESSAGE LAYOUT — 5.1.1-camera-layout.1
   Keeps every existing photo and function. Only size and placement change.
   ======================================================================== */
.native-shell{
  grid-template-rows:78px minmax(0,1fr) 78px;
}
.app-header{
  min-height:70px;
  padding:8px 18px 6px;
}
.app-header .round-button{
  width:42px;
  height:42px;
  border-width:5px;
}
.app-header .round-button svg{
  width:22px;
  height:22px;
}
.brand-logo.compact{font-size:32px}
.bottom-nav{
  margin:0 12px 7px;
  padding:5px 7px calc(5px + env(safe-area-inset-bottom));
  border-radius:27px;
}
.bottom-nav button{
  min-height:56px;
  border-radius:20px;
  gap:1px;
  font-size:10px;
}
.bottom-nav svg{
  width:24px;
  height:24px;
}
.bottom-nav button.active:after{
  width:39px;
  height:3px;
}
#cameraPage.active-page{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  gap:8px;
  overflow:hidden;
  padding:3px 20px 9px;
}
#cameraPage .scan-status{
  position:relative;
  z-index:8;
  top:auto;
  left:auto;
  transform:none;
  width:100%;
  min-height:52px;
  padding:7px 10px;
  border-radius:18px;
  gap:8px;
  box-shadow:0 8px 20px rgba(62,46,97,.11);
}
#cameraPage .status-paw{
  width:34px;
  height:34px;
}
#cameraPage .status-paw svg{
  width:20px;
  height:20px;
}
#cameraPage .scan-status strong{
  font-size:14px;
  line-height:1.1;
}
#cameraPage .scan-status small{
  margin-top:1px;
  font-size:9px;
  line-height:1.15;
}
#cameraPage .scan-status b{
  padding:6px 8px;
  border-radius:12px;
  font-size:9px;
}
#cameraPage .camera-stage{
  position:relative;
  height:auto;
  min-height:0;
  border-width:6px;
  border-radius:30px;
}
#cameraPage .camera-placeholder img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
#cameraPage .camera-message-bottom{
  position:relative;
  z-index:8;
  inset:auto;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  min-height:44px;
  transform:none;
  margin:0;
  padding:7px 12px;
  border-radius:16px;
  color:var(--approved-navy);
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 20px rgba(62,46,97,.1);
  text-align:center;
  backdrop-filter:none;
}
#cameraPage .camera-message-bottom strong{
  font-size:14px;
  line-height:1.15;
}
#cameraPage .camera-message-bottom small{
  margin-top:1px;
  font-size:9px;
  line-height:1.15;
  color:var(--approved-purple);
}
#cameraPage .camera-controls{
  position:relative;
  z-index:8;
  left:auto;
  right:auto;
  bottom:auto;
  min-height:54px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  gap:6px;
}
#cameraPage .control-button{
  width:42px;
  height:42px;
}
#cameraPage .control-button svg{
  width:22px;
  height:22px;
}
#cameraPage .scan-button{
  width:56px;
  height:56px;
  border-width:5px;
}
#cameraPage .scan-button svg{
  width:30px;
  height:30px;
}
#cameraPage .camera-corners i{
  width:42px;
  height:42px;
}
#cameraPage .camera-corners i:nth-child(1){
  top:18px;
  left:18px;
  border-width:5px 0 0 5px;
}
#cameraPage .camera-corners i:nth-child(2){
  top:18px;
  right:18px;
  border-width:5px 5px 0 0;
}
#cameraPage .camera-corners i:nth-child(3){
  bottom:18px;
  left:18px;
  border-width:0 0 5px 5px;
}
#cameraPage .camera-corners i:nth-child(4){
  bottom:18px;
  right:18px;
  border-width:0 5px 5px 0;
}
#cameraPage .record-timer{
  bottom:12px;
  padding:5px 9px;
  font-size:10px;
}
#cameraPage .camera-note{display:none}

@media(max-width:520px){
  .native-shell{
    grid-template-rows:64px minmax(0,1fr) 68px;
  }
  .app-header{
    min-height:58px;
    padding:5px 11px 4px;
  }
  .app-header .round-button{
    width:37px;
    height:37px;
    border-width:4px;
  }
  .app-header .round-button svg{
    width:19px;
    height:19px;
  }
  .brand-logo.compact{font-size:27px}
  .bottom-nav{
    margin:0 6px 4px;
    padding:4px 5px calc(4px + env(safe-area-inset-bottom));
    border-radius:23px;
  }
  .bottom-nav button{
    min-height:48px;
    border-radius:17px;
    font-size:9px;
  }
  .bottom-nav svg{
    width:21px;
    height:21px;
  }
  .bottom-nav button.active:after{
    width:32px;
    height:3px;
  }
  #cameraPage.active-page{
    gap:6px;
    padding:2px 10px 7px;
  }
  #cameraPage .scan-status{
    min-height:46px;
    padding:6px 8px;
    border-radius:15px;
    gap:6px;
  }
  #cameraPage .status-paw{
    width:30px;
    height:30px;
  }
  #cameraPage .status-paw svg{
    width:18px;
    height:18px;
  }
  #cameraPage .scan-status strong{font-size:12px}
  #cameraPage .scan-status small{font-size:8px}
  #cameraPage .scan-status b{
    padding:5px 6px;
    border-radius:10px;
    font-size:8px;
  }
  #cameraPage .camera-stage{
    min-height:0;
    border-width:5px;
    border-radius:26px;
  }
  #cameraPage .camera-message-bottom{
    min-height:39px;
    padding:6px 10px;
    border-radius:14px;
  }
  #cameraPage .camera-message-bottom strong{font-size:12px}
  #cameraPage .camera-message-bottom small{font-size:8px}
  #cameraPage .camera-controls{
    min-height:48px;
    gap:4px;
  }
  #cameraPage .control-button{
    width:36px;
    height:36px;
  }
  #cameraPage .control-button svg{
    width:19px;
    height:19px;
  }
  #cameraPage .scan-button{
    width:48px;
    height:48px;
    border-width:4px;
  }
  #cameraPage .scan-button svg{
    width:26px;
    height:26px;
  }
  #cameraPage .camera-corners i{
    width:34px;
    height:34px;
  }
  #cameraPage .camera-corners i:nth-child(1){
    top:14px;
    left:14px;
  }
  #cameraPage .camera-corners i:nth-child(2){
    top:14px;
    right:14px;
  }
  #cameraPage .camera-corners i:nth-child(3){
    bottom:14px;
    left:14px;
  }
  #cameraPage .camera-corners i:nth-child(4){
    bottom:14px;
    right:14px;
  }
}

/* ANIMORA BROAD HUMAN / ANIMAL / NEITHER DETECTOR — V5.3.0 */
.detection-canvas{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  height:100%;
  pointer-events:none;
}
#scanStatus[data-detector-state="human"] .status-paw{
  background:#8171c9;
}
#scanStatus[data-detector-state="animal"] .status-paw,
#scanStatus[data-detector-state="human_and_animal"] .status-paw{
  background:#13bec3;
}
#scanStatus[data-detector-state="neither"] .status-paw,
#scanStatus[data-detector-state="verifying"] .status-paw,
#scanStatus[data-detector-state="loading"] .status-paw{
  background:#ff9c6e;
}
#scanStatus[data-detector-state="error"] .status-paw{
  background:#c65f6f;
}
#scanStatus[data-detector-state="human"] b{
  color:#6957ae;
  background:#eee9ff;
}
#scanStatus[data-detector-state="animal"] b,
#scanStatus[data-detector-state="human_and_animal"] b{
  color:#047e85;
  background:#dcf9f7;
}
#scanStatus[data-detector-state="neither"] b,
#scanStatus[data-detector-state="verifying"] b,
#scanStatus[data-detector-state="loading"] b{
  color:#9a5b2d;
  background:#fff0df;
}
#scanStatus[data-detector-state="error"] b{
  color:#9b394d;
  background:#ffe8ec;
}


/* ANIMORA BROAD ANIMAL DEVICE VALIDATION — V5.3.0 */
.detector-validation-tile .tile-icon svg{
  stroke-width:4;
}
.detector-validation-overlay{
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(24,32,75,.58);
  backdrop-filter:blur(10px);
}
.detector-validation-card{
  width:min(720px,100%);
  max-height:min(92dvh,920px);
  overflow:auto;
  border-radius:34px;
  padding:22px;
  background:linear-gradient(145deg,#fffdfc 0%,#fff7fb 48%,#f4ffff 100%);
  box-shadow:0 30px 90px rgba(24,32,75,.28);
  color:#102a63;
}
.detector-validation-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
}
.detector-validation-header h2{
  margin:0;
  font-size:clamp(22px,4vw,32px);
}
.detector-validation-header p{
  margin:4px 0 0;
  color:#8a78c9;
  font-size:13px;
}
.detector-model-badge{
  min-width:88px;
  padding:9px 12px;
  border-radius:999px;
  background:#eee9ff;
  color:#705cb8;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.detector-model-badge[data-status="ready"]{
  background:#dcfbf8;
  color:#009ca4;
}
.detector-model-badge[data-status="error"]{
  background:#ffe6e2;
  color:#d24f45;
}
.detector-live-strip{
  display:grid;
  grid-template-columns:1.2fr 1.2fr .7fr;
  gap:10px;
  margin:18px 0 12px;
}
.detector-live-strip>div{
  min-width:0;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 24px rgba(72,57,128,.09);
}
.detector-live-strip small{
  display:block;
  color:#927fcf;
  font-size:11px;
  font-weight:800;
}
.detector-live-strip strong{
  display:block;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}
.detector-validation-intro{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:14px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(90deg,#e8fffd,#f5efff);
}
.detector-validation-intro strong{
  font-size:15px;
}
.detector-validation-intro span{
  color:#7565af;
  font-size:12px;
  line-height:1.45;
}
.detector-validation-steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.detector-validation-steps.is-running{
  pointer-events:none;
  opacity:.56;
}
.detector-validation-steps article{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  min-height:92px;
  padding:14px;
  border:2px solid transparent;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 28px rgba(72,57,128,.09);
}
.detector-validation-steps article.passed{
  border-color:#53d8cf;
  background:#f2fffd;
}
.detector-validation-steps article.failed{
  border-color:#ff9a8e;
  background:#fff7f5;
}
.validation-step-number{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#eee9ff;
  color:#6f5ab7;
  font-weight:900;
}
.detector-validation-steps article>div{
  min-width:0;
}
.detector-validation-steps strong,
.detector-validation-steps small,
.detector-validation-steps b{
  display:block;
}
.detector-validation-steps small{
  margin-top:2px;
  color:#8e7cc8;
  font-size:11px;
}
.detector-validation-steps b{
  margin-top:7px;
  color:#12aeb5;
  font-size:11px;
}
.detector-validation-steps article.failed b{
  color:#dd5a50;
}
.detector-validation-steps article>button{
  min-width:58px;
  height:36px;
  border:0;
  border-radius:14px;
  background:#18bec3;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.detector-validation-progress{
  margin-top:14px;
  padding:16px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 28px rgba(72,57,128,.1);
}
.detector-validation-progress>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.validation-progress-track{
  height:10px;
  margin:13px 0 10px;
  overflow:hidden;
  border-radius:999px;
  background:#ebe7f5;
}
.validation-progress-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#16bec4,#ff826e);
  transition:width .12s linear;
}
.detector-validation-progress p{
  margin:0;
  color:#7565af;
  font-size:12px;
}
.detector-validation-progress .text-button{
  margin:10px 0 0;
}
.detector-validation-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.detector-validation-actions button{
  min-height:44px;
  border-radius:16px;
}
.detector-validation-actions .primary-button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.detector-validation-card footer{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  background:#fff4e8;
  color:#8a5d3a;
  font-size:11px;
  line-height:1.4;
  text-align:center;
}
@media(max-width:620px){
  .detector-validation-overlay{
    padding:8px;
  }
  .detector-validation-card{
    max-height:96dvh;
    padding:15px;
    border-radius:25px;
  }
  .detector-validation-header{
    grid-template-columns:auto 1fr;
  }
  .detector-model-badge{
    grid-column:1/-1;
    justify-self:stretch;
  }
  .detector-live-strip{
    grid-template-columns:1fr 1fr;
  }
  .detector-live-strip>div:last-child{
    grid-column:1/-1;
  }
  .detector-validation-steps{
    grid-template-columns:1fr;
  }
}


/* ANIMORA BROAD ANIMAL INTELLIGENCE FOUNDATION */
#scanStatus[data-detector-source="image_classifier"] b{
  color:#6d58b7;
  background:#f0ebff;
}
.detector-validation-intro em{
  display:block;
  margin-top:6px;
  color:#0a8b92;
  font-style:normal;
  font-size:12px;
  font-weight:800;
}


/* ANIMORA MULTI-ANIMAL TEMPORAL TRACKING V5.4.0 */
.tracking-status{
  display:grid;
  grid-template-columns:minmax(130px,.9fr) minmax(0,1.5fr);
  align-items:center;
  gap:8px;
  min-height:43px;
  padding:6px 10px;
  border:1px solid rgba(19,190,195,.22);
  border-radius:15px;
  background:linear-gradient(90deg,rgba(232,255,253,.98),rgba(247,242,255,.98));
  box-shadow:0 7px 18px rgba(62,46,97,.08);
}
.tracking-status>div:first-child{
  min-width:0;
}
.tracking-status strong,
.tracking-status small{
  display:block;
}
.tracking-status strong{
  color:#092b67;
  font-size:11px;
  line-height:1.1;
}
.tracking-status small{
  margin-top:2px;
  color:#7b69b3;
  font-size:8px;
  line-height:1.1;
}
.tracking-chips{
  display:flex;
  gap:5px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.tracking-chips::-webkit-scrollbar{display:none}
.tracking-chips span{
  flex:0 0 auto;
  max-width:205px;
  overflow:hidden;
  padding:5px 8px;
  border-radius:999px;
  color:#087c83;
  background:#fff;
  box-shadow:0 4px 12px rgba(34,53,91,.08);
  font-size:8px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tracking-chips span[data-subject="human"]{
  color:#6c58b5;
  background:#f2edff;
}
@media(max-width:520px){
  .tracking-status{
    grid-template-columns:112px minmax(0,1fr);
    min-height:37px;
    padding:5px 7px;
    border-radius:13px;
  }
  .tracking-status strong{font-size:9px}
  .tracking-status small{font-size:7px}
  .tracking-chips span{
    max-width:165px;
    padding:4px 6px;
    font-size:7px;
  }
}


/* ==========================================================================
   ANIMORA CAMERA COMMAND CENTER — 5.4.1-camera-command-center.1
   Centered compact scan frame, side controls, top detection, bottom translation.
   ========================================================================== */
#cameraPage.active-page{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  overflow:hidden;
  padding:5px 18px 10px;
}
#cameraPage .detection-zone{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:10px;
  align-items:stretch;
}
#cameraPage .scan-status,
#cameraPage .tracking-status{
  min-height:58px;
}
#cameraPage .scan-status{
  width:100%;
  padding:9px 12px;
  border-radius:18px;
}
#cameraPage .scan-status strong{
  font-size:16px;
  line-height:1.15;
}
#cameraPage .scan-status small{
  margin-top:2px;
  font-size:11px;
  line-height:1.25;
}
#cameraPage .scan-status b{
  min-width:76px;
  padding:7px 10px;
  font-size:10px;
  text-align:center;
}
#cameraPage .tracking-status{
  grid-template-columns:minmax(120px,.85fr) minmax(0,1.15fr);
  padding:8px 11px;
}
#cameraPage .tracking-status strong{
  font-size:12px;
}
#cameraPage .tracking-status small{
  font-size:9px;
  line-height:1.2;
}
#cameraPage .tracking-chips span{
  font-size:9px;
}

#cameraPage .camera-workspace{
  min-height:0;
  display:grid;
  grid-template-columns:82px minmax(260px,760px) 82px;
  justify-content:center;
  align-items:center;
  gap:14px;
  overflow:hidden;
}
#cameraPage .camera-center-stack{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  justify-items:center;
  align-items:center;
  gap:7px;
}
#cameraPage .camera-stage{
  width:min(100%,760px);
  height:auto;
  max-height:min(47dvh,500px);
  aspect-ratio:4 / 3;
  align-self:center;
  border-width:5px;
  border-radius:28px;
}
#cameraPage .camera-placeholder img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
#cameraPage .camera-side-controls{
  height:100%;
  max-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}
#cameraPage .camera-side-controls .control-button{
  width:58px;
  height:58px;
  display:grid;
  grid-template-rows:auto auto;
  place-items:center;
  align-content:center;
  gap:2px;
  border-radius:20px;
}
#cameraPage .camera-side-controls .control-button svg{
  width:24px;
  height:24px;
}
#cameraPage .camera-side-controls .control-button span{
  display:block;
  font-size:8px;
  font-weight:900;
  line-height:1;
}
#cameraPage .scan-button{
  position:relative;
  width:62px;
  height:62px;
  display:grid;
  grid-template-rows:auto auto;
  place-items:center;
  align-content:center;
  gap:1px;
  border-width:5px;
}
#cameraPage .scan-button svg{
  width:29px;
  height:29px;
}
#cameraPage .scan-button span{
  display:block;
  font-size:8px;
  font-weight:900;
  line-height:1;
}
#cameraPage .camera-controls{
  display:none !important;
}

#cameraPage .translation-zone{
  min-height:58px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:1px solid rgba(255,130,110,.24);
  border-radius:18px;
  background:linear-gradient(90deg,rgba(255,246,239,.98),rgba(245,240,255,.98));
  box-shadow:0 8px 22px rgba(62,46,97,.09);
}
#cameraPage .translation-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(145deg,#ff8c71,#7b67c1);
}
#cameraPage .translation-icon svg{
  width:21px;
  height:21px;
}
#cameraPage .translation-zone strong,
#cameraPage .translation-zone small{
  display:block;
}
#cameraPage .translation-zone strong{
  color:#102a63;
  font-size:14px;
  line-height:1.15;
}
#cameraPage .translation-zone small{
  margin-top:2px;
  color:#7968b1;
  font-size:10px;
  line-height:1.25;
}
#cameraPage .translation-zone b{
  min-width:66px;
  padding:7px 9px;
  border-radius:12px;
  color:#9b5d39;
  background:#fff0df;
  font-size:9px;
  text-align:center;
}
#cameraPage #cameraPrompt{
  display:none !important;
}

@media(max-width:760px){
  #cameraPage.active-page{
    gap:7px;
    padding:3px 9px 7px;
  }
  #cameraPage .detection-zone{
    grid-template-columns:1fr;
    gap:5px;
  }
  #cameraPage .scan-status{
    min-height:51px;
    padding:7px 9px;
  }
  #cameraPage .scan-status strong{
    font-size:14px;
  }
  #cameraPage .scan-status small{
    font-size:9px;
  }
  #cameraPage .scan-status b{
    min-width:60px;
    padding:6px 7px;
    font-size:8px;
  }
  #cameraPage .tracking-status{
    min-height:35px;
    grid-template-columns:100px minmax(0,1fr);
    padding:4px 7px;
  }
  #cameraPage .tracking-status strong{
    font-size:9px;
  }
  #cameraPage .tracking-status small{
    font-size:7px;
  }
  #cameraPage .tracking-chips span{
    font-size:7px;
  }
  #cameraPage .camera-workspace{
    grid-template-columns:48px minmax(0,1fr) 48px;
    gap:6px;
  }
  #cameraPage .camera-stage{
    width:100%;
    max-height:min(40dvh,390px);
    border-width:4px;
    border-radius:22px;
  }
  #cameraPage .camera-side-controls{
    gap:12px;
  }
  #cameraPage .camera-side-controls .control-button{
    width:42px;
    height:42px;
    border-radius:15px;
  }
  #cameraPage .camera-side-controls .control-button svg{
    width:19px;
    height:19px;
  }
  #cameraPage .camera-side-controls .control-button span{
    font-size:6px;
  }
  #cameraPage .scan-button{
    width:48px;
    height:48px;
    border-width:4px;
  }
  #cameraPage .scan-button svg{
    width:23px;
    height:23px;
  }
  #cameraPage .scan-button span{
    font-size:6px;
  }
  #cameraPage .translation-zone{
    min-height:48px;
    padding:7px 8px;
    border-radius:15px;
    gap:7px;
  }
  #cameraPage .translation-icon{
    width:31px;
    height:31px;
    border-radius:11px;
  }
  #cameraPage .translation-icon svg{
    width:18px;
    height:18px;
  }
  #cameraPage .translation-zone strong{
    font-size:12px;
  }
  #cameraPage .translation-zone small{
    font-size:8px;
  }
  #cameraPage .translation-zone b{
    min-width:48px;
    padding:5px 6px;
    font-size:7px;
  }
}

@media(max-width:430px){
  #cameraPage .camera-workspace{
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:4px;
  }
  #cameraPage .camera-stage{
    max-height:min(35dvh,290px);
    aspect-ratio:4 / 3;
  }
  #cameraPage .camera-side-controls .control-button{
    width:38px;
    height:38px;
  }
  #cameraPage .translation-zone small{
    max-width:210px;
  }
}

@media(min-width:1000px){
  #cameraPage .camera-stage{
    width:min(62vw,760px);
  }
}


/* ==========================================================================
   ANIMORA CAMERA RESPONSIVE READABILITY RECOVERY
   5.4.3-responsive-readability.1
   Prevent horizontal overflow, keep the camera centered, and make both
   message panels readable on phone and desktop.
   ========================================================================== */

html,
body,
.app-view,
.native-shell,
.page-viewport,
.app-page{
  max-width:100%;
  min-width:0;
  overflow-x:hidden !important;
  overscroll-behavior-x:none;
}

.native-shell{
  width:min(100%,520px);
  max-width:100vw;
}

#cameraPage.active-page{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden !important;
  touch-action:pan-y;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:9px;
  padding:6px 14px 10px;
}

#cameraPage > *,
#cameraPage .detection-zone,
#cameraPage .scan-status,
#cameraPage .tracking-status,
#cameraPage .camera-workspace,
#cameraPage .camera-center-stack,
#cameraPage .camera-stage,
#cameraPage .translation-zone{
  min-width:0;
  max-width:100%;
}

#cameraPage .detection-zone{
  width:100%;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
}

#cameraPage .scan-status{
  position:relative;
  inset:auto;
  transform:none;
  width:100%;
  min-height:66px;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:10px;
  padding:10px 12px;
  border-radius:19px;
}

#cameraPage .scan-status > div,
#cameraPage .translation-zone > div{
  min-width:0;
}

#cameraPage .status-paw{
  width:40px;
  height:40px;
}

#cameraPage .status-paw svg{
  width:23px;
  height:23px;
}

#cameraPage .scan-status strong{
  font-size:16px;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
}

#cameraPage .scan-status small{
  margin-top:3px;
  font-size:11px;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}

#cameraPage .scan-status b{
  min-width:68px;
  max-width:88px;
  padding:8px 9px;
  border-radius:13px;
  font-size:9px;
  line-height:1.2;
  white-space:normal;
}

#cameraPage .tracking-status{
  width:100%;
  grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);
  min-height:44px;
  padding:7px 10px;
}

#cameraPage .tracking-status strong{
  font-size:11px;
}

#cameraPage .tracking-status small,
#cameraPage .tracking-chips span{
  font-size:8px;
  line-height:1.25;
}

#cameraPage .camera-workspace{
  width:100%;
  max-width:100%;
  min-height:0;
  grid-template-columns:minmax(44px,58px) minmax(0,1fr) minmax(44px,58px);
  justify-content:stretch;
  align-items:center;
  gap:8px;
  overflow:hidden;
}

#cameraPage .camera-center-stack{
  width:100%;
  overflow:hidden;
}

#cameraPage .camera-stage{
  width:100%;
  max-width:100%;
  max-height:min(42dvh,390px);
  aspect-ratio:4 / 3;
  margin-inline:auto;
}

#cameraPage .camera-side-controls{
  width:100%;
  min-width:0;
  max-height:290px;
  gap:14px;
}

#cameraPage .camera-side-controls .control-button{
  width:min(52px,100%);
  aspect-ratio:1;
  height:auto;
  min-height:42px;
  border-radius:17px;
}

#cameraPage .camera-side-controls .control-button span{
  font-size:7px;
}

#cameraPage .scan-button{
  flex:0 0 auto;
}

#cameraPage .translation-zone{
  width:100%;
  min-height:66px;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:10px;
  padding:10px 12px;
  border-radius:19px;
}

#cameraPage .translation-icon{
  width:40px;
  height:40px;
  border-radius:14px;
}

#cameraPage .translation-icon svg{
  width:22px;
  height:22px;
}

#cameraPage .translation-zone strong{
  font-size:15px;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
}

#cameraPage .translation-zone small{
  max-width:none;
  margin-top:3px;
  font-size:11px;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}

#cameraPage .translation-zone b{
  min-width:58px;
  max-width:76px;
  padding:8px 9px;
  border-radius:13px;
  font-size:9px;
  line-height:1.2;
  white-space:normal;
}

@media(max-width:520px){
  .native-shell{
    width:100%;
    border-radius:0;
  }

  #cameraPage.active-page{
    gap:7px;
    padding:4px 8px 8px;
  }

  #cameraPage .scan-status{
    min-height:64px;
    grid-template-columns:36px minmax(0,1fr) 64px;
    gap:8px;
    padding:9px 10px;
  }

  #cameraPage .status-paw{
    width:36px;
    height:36px;
  }

  #cameraPage .status-paw svg{
    width:21px;
    height:21px;
  }

  #cameraPage .scan-status strong{
    font-size:15px;
  }

  #cameraPage .scan-status small{
    font-size:10px;
  }

  #cameraPage .scan-status b{
    min-width:64px;
    max-width:64px;
    padding:7px 6px;
    font-size:8px;
  }

  #cameraPage .tracking-status{
    grid-template-columns:105px minmax(0,1fr);
    min-height:40px;
    padding:6px 8px;
  }

  #cameraPage .camera-workspace{
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:5px;
  }

  #cameraPage .camera-stage{
    max-height:min(34dvh,285px);
    border-radius:22px;
  }

  #cameraPage .camera-side-controls{
    gap:11px;
  }

  #cameraPage .camera-side-controls .control-button{
    width:40px;
    min-height:40px;
    border-radius:15px;
  }

  #cameraPage .camera-side-controls .control-button svg{
    width:18px;
    height:18px;
  }

  #cameraPage .camera-side-controls .control-button span{
    font-size:6px;
  }

  #cameraPage .translation-zone{
    min-height:64px;
    grid-template-columns:36px minmax(0,1fr) 54px;
    gap:8px;
    padding:9px 10px;
  }

  #cameraPage .translation-icon{
    width:36px;
    height:36px;
    border-radius:13px;
  }

  #cameraPage .translation-zone strong{
    font-size:14px;
  }

  #cameraPage .translation-zone small{
    font-size:10px;
  }

  #cameraPage .translation-zone b{
    min-width:54px;
    max-width:54px;
    padding:7px 5px;
    font-size:8px;
  }
}

@media(max-width:390px){
  #cameraPage.active-page{
    padding-inline:6px;
  }

  #cameraPage .camera-workspace{
    grid-template-columns:38px minmax(0,1fr) 38px;
    gap:4px;
  }

  #cameraPage .camera-side-controls .control-button{
    width:37px;
    min-height:37px;
  }

  #cameraPage .scan-status{
    grid-template-columns:34px minmax(0,1fr) 60px;
  }

  #cameraPage .translation-zone{
    grid-template-columns:34px minmax(0,1fr) 50px;
  }

  #cameraPage .scan-status b{
    min-width:60px;
    max-width:60px;
  }

  #cameraPage .translation-zone b{
    min-width:50px;
    max-width:50px;
  }
}

@media(min-width:761px){
  #cameraPage .detection-zone{
    grid-template-columns:minmax(0,1fr);
  }

  #cameraPage .camera-workspace{
    grid-template-columns:58px minmax(0,1fr) 58px;
    gap:10px;
  }

  #cameraPage .camera-stage{
    width:100%;
    max-height:min(45dvh,390px);
  }
}


/* ==========================================================================\n   ANIMORA ON-DEVICE DETECTOR DIAGNOSTICS\n   5.5.1-detector-diagnostics.1\n   ========================================================================== */\n.detector-diagnostics-overlay{\n  align-items:center;\n  justify-content:center;\n  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));\n  overflow:hidden;\n}\n.detector-diagnostics-card{\n  width:min(760px,100%);\n  max-height:calc(100dvh - 24px);\n  overflow-y:auto;\n  overflow-x:hidden;\n  background:#fffaf8;\n  border:1px solid rgba(99,80,160,.14);\n  border-radius:28px;\n  box-shadow:0 24px 70px rgba(75,53,120,.24);\n  padding:16px;\n  display:grid;\n  gap:12px;\n}\n.detector-diagnostics-header{\n  display:grid;\n  grid-template-columns:46px minmax(0,1fr) auto;\n  align-items:center;\n  gap:10px;\n}\n.detector-diagnostics-header h2{margin:0;color:#2f2850;font-size:20px;line-height:1.15}\n.detector-diagnostics-header p{margin:3px 0 0;color:#736b8f;font-size:11px;line-height:1.35}\n.detector-diagnostics-privacy{\n  display:grid;gap:3px;padding:11px 12px;border-radius:17px;background:#eefafa;color:#355d62;\n}\n.detector-diagnostics-privacy strong{font-size:12px}\n.detector-diagnostics-privacy span{font-size:10px;line-height:1.4}\n.detector-diagnostics-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}\n.detector-diagnostics-metrics article{padding:10px;border-radius:16px;background:#fff;border:1px solid rgba(99,80,160,.12);min-width:0}\n.detector-diagnostics-metrics small{display:block;color:#82799d;font-size:9px}\n.detector-diagnostics-metrics strong{display:block;margin-top:3px;color:#342b58;font-size:14px;overflow-wrap:anywhere}\n.detector-diagnostics-live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}\n.detector-diagnostics-live div{padding:9px 10px;border-radius:14px;background:#f6f1ff;min-width:0}\n.detector-diagnostics-live small{display:block;color:#8579a7;font-size:8px}\n.detector-diagnostics-live strong{display:block;margin-top:2px;color:#43366d;font-size:11px;line-height:1.3;overflow-wrap:anywhere}\n.detector-diagnostics-progress{padding:11px 12px;border-radius:17px;background:#fff;border:1px solid rgba(20,190,195,.24)}\n.detector-diagnostics-progress>div:first-child{display:flex;justify-content:space-between;gap:10px;color:#31585b;font-size:11px}\n.detector-diagnostics-progress p{margin:6px 0 0;color:#706a86;font-size:10px}\n.detector-diagnostics-result{padding:12px;border-radius:18px;background:#fff1e8;border:1px solid rgba(241,139,105,.18)}\n.detector-diagnostics-result strong{display:block;color:#653d33;font-size:14px}\n.detector-diagnostics-result p{margin:4px 0 0;color:#7f6259;font-size:10px;line-height:1.45}\n.detector-diagnostics-timeline{display:grid;gap:6px;max-height:190px;overflow-y:auto}\n.detector-diagnostics-timeline>span{padding:12px;text-align:center;color:#847b99;font-size:10px}\n.detector-diagnostics-timeline article{display:grid;grid-template-columns:72px minmax(0,.75fr) minmax(0,1.25fr);gap:8px;align-items:center;padding:8px 10px;border-radius:13px;background:#fff;border:1px solid rgba(99,80,160,.10);min-width:0}\n.detector-diagnostics-timeline small{font-size:8px;color:#968da9}\n.detector-diagnostics-timeline strong{font-size:10px;color:#40345f;overflow-wrap:anywhere}\n.detector-diagnostics-timeline span{font-size:9px;color:#746b89;line-height:1.3;overflow-wrap:anywhere}\n.detector-diagnostics-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}\n.detector-diagnostics-actions button{min-width:0;padding:10px 8px;font-size:10px}\n.detector-diagnostics-card footer{padding-top:8px;border-top:1px solid rgba(99,80,160,.12);color:#8a819d;font-size:9px;line-height:1.4;text-align:center}\n.detector-diagnostics-tile b{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n@media(max-width:600px){\n  .detector-diagnostics-card{max-height:calc(100dvh - 12px);border-radius:22px;padding:12px;gap:9px}\n  .detector-diagnostics-header{grid-template-columns:40px minmax(0,1fr) auto}\n  .detector-diagnostics-header h2{font-size:16px}\n  .detector-diagnostics-header p{font-size:9px}\n  .detector-diagnostics-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}\n  .detector-diagnostics-live{grid-template-columns:minmax(0,1fr)}\n  .detector-diagnostics-timeline article{grid-template-columns:58px minmax(0,1fr);gap:4px}\n  .detector-diagnostics-timeline article span{grid-column:2}\n  .detector-diagnostics-actions{grid-template-columns:repeat(2,minmax(0,1fr))}\n}\n

/* ==========================================================================
   ANIMORA CAMERA ACCURACY TEST ACCESS
   5.5.2-camera-test-access.1
   Visible admin-only entry for the existing text-only detector diagnostic.
   ========================================================================== */

#cameraPage .camera-diagnostics-strip{
  width:100%;
  min-width:0;
  max-width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid rgba(112,87,184,.16);
  border-radius:16px;
  background:linear-gradient(135deg,#f6f1ff,#eefafa);
  box-shadow:0 7px 18px rgba(74,55,120,.08);
}

#cameraPage .camera-diagnostics-strip.hidden{
  display:none !important;
}

#cameraPage .camera-diagnostics-strip > button{
  min-width:104px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 10px;
  border:0;
  border-radius:13px;
  background:#7664c7;
  color:#fff;
  font:700 10px/1.1 inherit;
  box-shadow:0 6px 14px rgba(91,71,170,.20);
}

#cameraPage .camera-diagnostics-strip > button:disabled{
  opacity:.68;
}

#cameraPage .camera-diagnostics-strip > button svg{
  width:17px;
  height:17px;
  fill:currentColor;
}

#cameraPage .camera-diagnostics-strip > div{
  min-width:0;
}

#cameraPage .camera-diagnostics-strip strong{
  display:block;
  color:#3d3363;
  font-size:11px;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
}

#cameraPage .camera-diagnostics-strip small{
  display:block;
  margin-top:2px;
  color:#746c8d;
  font-size:9px;
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
}

#cameraPage .camera-diagnostics-strip b{
  min-width:50px;
  max-width:70px;
  padding:7px 8px;
  border-radius:12px;
  background:#fff;
  color:#62549d;
  font-size:8px;
  line-height:1.15;
  text-align:center;
  overflow-wrap:anywhere;
}

#cameraPage .camera-diagnostics-strip[data-state="running"]{
  border-color:rgba(20,190,195,.35);
  background:linear-gradient(135deg,#eafafa,#f4f0ff);
}

#cameraPage .camera-diagnostics-strip[data-state="running"] > button{
  background:#19aeb3;
}

#cameraPage .camera-diagnostics-strip[data-state="report"]{
  border-color:rgba(241,139,105,.28);
  background:linear-gradient(135deg,#fff3eb,#f6f1ff);
}

#cameraPage .camera-diagnostics-strip[data-state="report"] > button{
  background:#ef8d70;
}

@media(max-width:520px){
  #cameraPage .camera-diagnostics-strip{
    grid-template-columns:92px minmax(0,1fr) 46px;
    gap:7px;
    padding:7px 8px;
  }

  #cameraPage .camera-diagnostics-strip > button{
    min-width:92px;
    min-height:34px;
    padding:7px 8px;
    font-size:9px;
  }

  #cameraPage .camera-diagnostics-strip strong{
    font-size:10px;
  }

  #cameraPage .camera-diagnostics-strip small{
    font-size:8px;
  }

  #cameraPage .camera-diagnostics-strip b{
    min-width:46px;
    max-width:46px;
    padding:6px 5px;
    font-size:7px;
  }
}

@media(max-width:390px){
  #cameraPage .camera-diagnostics-strip{
    grid-template-columns:84px minmax(0,1fr) 42px;
    gap:5px;
    padding:6px;
  }

  #cameraPage .camera-diagnostics-strip > button{
    min-width:84px;
    padding-inline:6px;
  }

  #cameraPage .camera-diagnostics-strip > button svg{
    width:15px;
    height:15px;
  }

  #cameraPage .camera-diagnostics-strip b{
    min-width:42px;
    max-width:42px;
  }
}


/* ANIMORA MESSAGE BOXES TOUCH + READABILITY V1.1 */
@media(max-width:520px){
  #cameraPage.active-page{gap:0!important;padding-top:2px!important;padding-bottom:6px!important}
  #cameraPage .detection-zone{margin:0!important;padding:0!important}
  #cameraPage .scan-status{min-height:68px!important;margin:0!important;padding:10px 11px!important;border-radius:18px 18px 12px 12px!important}
  #cameraPage .scan-status strong{font-size:17px!important;line-height:1.12!important}
  #cameraPage .scan-status small{font-size:12px!important;line-height:1.28!important;margin-top:4px!important}
  #cameraPage .scan-status b{font-size:10px!important;padding:8px 6px!important}
  #cameraPage .camera-workspace{flex:1 1 auto!important;gap:2px!important;margin:0!important;padding:0!important;justify-content:center!important}
  #cameraPage .detector-diagnostics-live,
  #cameraPage .detector-validation-live,
  #cameraPage .accuracy-test-panel,
  #cameraPage [data-camera-test],
  #cameraPage .camera-test-card{margin:0!important}
  #cameraPage .camera-center-stack{gap:2px!important;margin:0!important}
  #cameraPage .camera-stage{max-height:29dvh!important;margin:0 auto!important}
  #cameraPage .scan-button{margin:0!important}
  #cameraPage .translation-zone{min-height:68px!important;margin:0!important;padding:10px 11px!important;border-radius:12px 12px 18px 18px!important}
  #cameraPage .translation-zone strong{font-size:17px!important;line-height:1.12!important}
  #cameraPage .translation-zone small{font-size:12px!important;line-height:1.28!important;margin-top:4px!important}
  #cameraPage .translation-zone b{font-size:10px!important;padding:8px 6px!important}
  #cameraPage .status-paw,
  #cameraPage .translation-icon{width:40px!important;height:40px!important}
  #cameraPage .status-paw svg,
  #cameraPage .translation-icon svg{width:23px!important;height:23px!important}
}
@media(max-width:390px){
  #cameraPage .scan-status strong,
  #cameraPage .translation-zone strong{font-size:16px!important}
  #cameraPage .scan-status small,
  #cameraPage .translation-zone small{font-size:11.5px!important}
  #cameraPage .camera-stage{max-height:27.5dvh!important}
}


/* ANIMORA TAP-TO-ENLARGE MESSAGE OVERLAY */
.message-zoom-trigger{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.message-zoom-trigger:focus-visible{outline:3px solid rgba(49,198,199,.55);outline-offset:3px}
.message-zoom-trigger:active{transform:scale(.992)}
.message-zoom-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));background:rgba(29,23,67,.48);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.message-zoom-overlay.hidden{display:none!important}
.message-zoom-card{position:relative;width:min(92vw,560px);max-height:min(78dvh,680px);overflow:auto;padding:34px 28px 30px;border:2px solid rgba(255,255,255,.9);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(255,247,252,.98));box-shadow:0 28px 80px rgba(40,25,95,.32)}
.message-zoom-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#38266f;box-shadow:0 8px 24px rgba(61,41,118,.18);font-size:30px;line-height:1;font-weight:600}
.message-zoom-icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:18px;border-radius:24px;background:linear-gradient(145deg,#ff8375,#ffb26b);color:#fff;font-size:36px}
.message-zoom-icon svg{width:38px;height:38px;fill:none;stroke:currentColor}
.message-zoom-copy h2{margin:0;color:#082b67;font-size:clamp(27px,6.6vw,38px);line-height:1.08;letter-spacing:-.025em}
.message-zoom-copy p{margin:16px 0 0;color:#6452a2;font-size:clamp(19px,4.7vw,25px);line-height:1.45;font-weight:600}
.message-zoom-badge{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:22px;padding:10px 18px;border-radius:999px;background:#fff0dc;color:#8f4f23;font-size:16px;font-weight:800}
body.message-zoom-open{overflow:hidden!important}
@media(max-width:520px){
  .message-zoom-overlay{padding-left:14px;padding-right:14px}
  .message-zoom-card{width:100%;padding:32px 22px 26px;border-radius:26px}
  .message-zoom-copy h2{font-size:30px}
  .message-zoom-copy p{font-size:20px}
}

.intelligence-feedback{width:min(100%,760px);margin:4px auto 0;padding:8px 12px;border:1px solid rgba(84,76,132,.14);border-radius:16px;background:rgba(255,255,255,.93);text-align:center}.intelligence-feedback.hidden{display:none!important}.intelligence-feedback>span{display:block;font-size:13px;font-weight:700;color:#4e486e;margin-bottom:6px}.intelligence-feedback>div{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.intelligence-feedback button{min-height:34px;padding:6px 11px;border:0;border-radius:999px;background:#f2effb;color:#554c79;font-size:12px;font-weight:700}.intelligence-feedback small{display:block;margin-top:6px;font-size:10px;color:#79748d}.intelligence-feedback.saved{outline:3px solid rgba(66,190,174,.28)}

.target-lock-layer{position:absolute;inset:0;z-index:18;pointer-events:none;overflow:hidden;border-radius:inherit}.target-lock-box{position:absolute;border:3px solid #24d3b0;border-radius:18px;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 7px rgba(36,211,176,.18),0 10px 30px rgba(13,112,97,.25);transition:left .12s linear,top .12s linear,width .12s linear,height .12s linear}.target-lock-box.hidden,.target-unlock-button.hidden{display:none!important}.target-lock-badge{position:absolute;top:-2px;left:-2px;max-width:calc(100% + 4px);padding:6px 10px;border-radius:14px 0 12px 0;background:#24d3b0;color:#063b35;font-size:12px;font-weight:800;white-space:nowrap}.target-unlock-button{position:absolute;right:10px;bottom:10px;z-index:22;min-height:36px;padding:7px 13px;border:0;border-radius:999px;background:rgba(255,255,255,.95);color:#41396d;font-size:12px;font-weight:800;box-shadow:0 8px 24px rgba(44,35,88,.2)}@media(max-width:640px){.target-lock-box{border-width:2px;border-radius:14px}.target-lock-badge{padding:5px 8px;font-size:10px}.target-unlock-button{right:7px;bottom:7px;min-height:32px;padding:5px 10px;font-size:11px}}