/* DEARTAG TOKENS */
:root{--paper:#f6f3ed;--surface:#fbfaf7;--ink:#183d36;--muted:#63716a;--red:#b54536;--line:#dcded5;--soft:#e8eee5;--white:#ffffff;--green:var(--ink);--danger:var(--red);}
/* END DEARTAG TOKENS */

/* Shared brand. Page-specific files keep their layout and behavior. */
:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
body.page-home,body.page-account,body.page-admin,body.page-card,body.page-error{background:var(--paper);color:var(--ink)}
.deartag-brand{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:30px;font-weight:700;line-height:1;letter-spacing:-1.3px;text-decoration:none;flex-shrink:0}
.deartag-brand img{display:block;flex:none;width:38px;height:38px}
.deartag-brand .brand-word{white-space:nowrap}
.deartag-brand .brand-dot{color:var(--red)}
.deartag-brand:hover{text-decoration:none}
.site-footer .deartag-brand{font-size:24px}
.site-footer .deartag-brand img{width:30px;height:30px}
.brand-context{font-size:11px;letter-spacing:.08em;color:var(--muted);margin-right:auto}
.page-account .customer-main,.page-admin .admin-main{max-width:1260px;padding:0 40px 60px}
.page-account .app-header,.page-admin .app-header{min-height:104px;margin:0 0 38px;padding:0;gap:24px;border:0}
.page-card main{max-width:720px;padding:0 24px 48px}
.page-card .app-header{min-height:104px;margin:0 0 24px;padding:0;border:0}

/* Typography and controls match the landing page. */
:is(.page-account,.page-admin,.page-card,.page-error) h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1.4px;color:var(--ink)}
:is(.page-account,.page-admin,.page-card,.page-error) h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.5px;color:var(--ink)}
:is(.page-account,.page-admin,.page-card) h3,:is(.page-account,.page-admin,.page-card) h4{color:var(--ink)}
:is(.page-account,.page-admin,.page-card) a{color:var(--ink)}
:is(.page-account,.page-admin,.page-card) button{font-family:Arial,Helvetica,sans-serif;border-radius:7px;border-color:var(--line);color:var(--ink);background:var(--surface);font-weight:600}
:is(.page-account,.page-admin,.page-card) button:hover{background:var(--soft);border-color:#b4c2b5}
:is(.page-account,.page-admin,.page-card) :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--red);outline-offset:3px}
:is(.page-account,.page-admin,.page-card) :is(input,select,textarea){color:var(--ink);border-color:var(--line);border-radius:7px;background:var(--surface);font-family:Arial,Helvetica,sans-serif;accent-color:var(--ink)}
:is(.page-account,.page-admin,.page-card) :is(input,select,textarea):focus{border-color:var(--ink)}
:is(.page-account,.page-admin,.page-card) :is(.muted,.hint,.field-hint,.account-email,.privacy-note){color:var(--muted)}
:is(.page-account,.page-admin,.page-card) :is(.eyebrow,.section-kicker){color:var(--red);font-size:10px;font-weight:700;letter-spacing:.15em}
:is(.page-account,.page-admin,.page-card) .primary{background:var(--ink);border-color:var(--ink);color:var(--white);border-radius:7px}
:is(.page-account,.page-admin,.page-card) .primary:hover{background:#28544a;border-color:#28544a;color:var(--white)}
:is(.page-account,.page-admin,.page-card) :is(.quiet,.back-button,.text-button,.password-toggle){background:transparent;border-color:transparent;color:var(--ink)}
:is(.page-account,.page-admin,.page-card) :is(.quiet,.back-button,.text-button,.password-toggle):hover{background:var(--soft);border-color:transparent}
:is(.page-account,.page-admin,.page-card) :is(.panel,.editor-section,.form-entry,.entry,.tag-ledger,.tag-entry){border-color:var(--line);border-radius:10px;background:var(--surface);box-shadow:none}
:is(.page-account,.page-admin,.page-card) .panel h2{line-height:1.25}
:is(.page-account,.page-admin,.page-card) :is(.critical,.notice[data-tone=error],.error-notice){color:#8e342a;border-color:#d8a195;background:#fbede6}
:is(.page-account,.page-admin,.page-card) .critical{border-left:4px solid var(--red)}
:is(.page-account,.page-admin,.page-card) .item+.item{border-color:var(--line)}
:is(.page-account,.page-admin,.page-card) :is(.notice,.pet-soon-panel,.pet-teaser,.pet-soon-button,.optional-section,.translation[open]){background:var(--soft);border-color:var(--line);border-radius:10px}
:is(.page-account,.page-admin,.page-card) .notice[data-tone=success]{color:var(--ink);background:var(--soft)}
:is(.page-account,.page-admin,.page-card) :is(.tag-warning,.recovery-panel){background:#f5ecdc;border-color:#d9c9aa;color:#76552b}
:is(.page-account,.page-admin,.page-card) :is(.remove-button,.entry button.remove,.field-error,#admin-status,#status){color:var(--red)}
:is(.page-account,.page-admin,.page-card) .field [aria-invalid=true]{border-color:var(--red);background:#fff8f4}
:is(.page-account,.page-admin,.page-card) dialog{background:var(--surface);border-color:var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 70px #183d3626}
:is(.page-account,.page-admin,.page-card) dialog::backdrop{background:#183d3666}
:is(.page-account,.page-admin,.page-card) .save-bar{background:#fbfaf7f5;border-color:var(--line);border-radius:10px;box-shadow:0 8px 24px #183d360d}

/* Account, activation and recovery. */
.page-account .auth-intro{margin:40px auto 24px;max-width:620px}
.page-account .auth-intro h1{font-size:48px;line-height:1.08;letter-spacing:-1.7px}
.page-account .auth-intro h1 span:last-of-type{font-style:italic;color:var(--red)}
.page-account .auth-intro>p:last-child{font-size:15px;line-height:1.75;max-width:480px;margin-top:22px}
.page-account .auth-panel{max-width:500px;padding:30px;background:var(--surface);border-radius:10px}
.page-account .auth-panel h2{font-size:30px}
.page-account .auth-panel .primary{min-height:52px}
.page-account .account-nav{gap:6px;margin:25px 0}
.page-account .account-nav a{color:var(--muted);border:1px solid transparent;border-radius:7px}
.page-account .account-nav a[aria-current=page]{color:var(--ink);background:var(--soft);border-color:var(--line)}
.page-account .notice{color:var(--ink)}
.page-account .notice[data-tone=error]{color:#8e342a;background:#fbede6;border-color:#d8a195}
.page-account .dashboard-heading h1{font-size:43px}
.page-account .profile-card{background:var(--surface);border-color:var(--line);border-radius:10px;box-shadow:none}
.page-account .profile-card:hover{background:#fffdf8;border-color:#b5beb0;box-shadow:0 8px 24px #183d3608}
.page-account .profile-avatar{border-radius:50%;background:var(--soft);color:var(--ink)}
.page-account .profile-avatar[data-color="1"]{background:#f3e5df;color:var(--red)}
.page-account .profile-avatar[data-color="2"]{background:#e8eee5;color:var(--ink)}
.page-account .profile-avatar[data-color="3"]{background:#eee6d9;color:#765b3c}
.page-account .badge{background:#edece4;color:var(--muted);border-radius:5px}
.page-account .badge.is-live{background:var(--soft);color:var(--ink)}
.page-account :is(.pet-icon,.pet-soon-badge){background:#dce5d7;color:var(--ink);border-radius:7px}
.page-account :is(.form-step,#review-step){background:var(--surface);border-color:var(--line);border-radius:10px}
.page-account .form-entry{background:var(--paper)}
.page-account .form-entry :is(input,select,textarea){background:var(--surface)}
.page-account .editor-sidebar button{background:transparent;border-radius:7px}
.page-account .editor-sidebar button[aria-current=step]{background:var(--soft);border-color:var(--line);color:var(--ink)}
.page-account .step-number{background:#e9e8df;color:var(--muted)}
.page-account .editor-sidebar button[aria-current=step] .step-number{background:var(--ink);color:var(--white)}
.page-account :is(.translation summary,.card-open-label,.save-status){color:var(--ink)}
.page-account .add-button{background:var(--paper);border-color:#b2bead;color:var(--ink);border-radius:7px}
.page-account .save-status.is-dirty{color:#8e652d}
.page-account .readiness-item{background:var(--soft);color:var(--ink);border-radius:7px}
.page-account .readiness-item.is-missing{background:#f5ecdc;color:#76552b}
.page-account .card-preview{background:var(--paper);border-color:var(--line);border-radius:10px}
.page-account .preview-toolbar{border-color:var(--line)}
.page-account #preview-card h1{font-family:Georgia,'Times New Roman',serif;font-weight:400}
.page-account #preview-card h2{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:0}
.page-account .check input,.page-admin .check input{accent-color:var(--ink)}

/* Production desk and emergency card retain their task-focused layouts. */
.page-admin .workspace-heading h1{font-size:38px}
.page-admin .login-panel{max-width:480px;padding:30px;margin:50px auto}
.page-admin .login-panel .primary{min-height:52px}
.page-admin #profiles button[aria-current=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.page-admin :is(.workbench-row,.batch-candidate,.request-entry,.client-entry,#batch-detail){border-color:var(--line)}
.page-admin :is(.preview,.access-panel){background:var(--paper);border-color:var(--line);border-radius:10px}
.page-admin .preview h2{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:0}
.page-admin .tag-actions a{background:var(--surface);border-color:var(--line);border-radius:7px;color:var(--ink)}
.page-admin :is(input[readonly],textarea[readonly]){font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
:is(.page-card,.page-admin,.page-account) .contact-row{background:var(--soft);border-radius:8px}
:is(.page-card,.page-admin,.page-account) .contact-details{color:var(--ink)}
:is(.page-card,.page-admin,.page-account) .call-button{background:var(--ink);border-color:var(--ink);color:var(--white);border-radius:7px;min-height:52px}
:is(.page-card,.page-admin,.page-account) .call-button:hover{background:#28544a}
.page-card h1{font-size:36px}
.page-card #gate h1,.page-card #availability h1{font-size:34px}
.page-card .panel h2{font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:700;letter-spacing:0}
.page-card #gate .primary{min-height:52px}
.page-card footer{color:var(--muted)}
.page-card #language,.page-error #language{border:0;background:transparent;padding:12px 4px;color:var(--ink);font:700 12px Arial,Helvetica,sans-serif;cursor:pointer}
.page-card :is(.identity,.panel){overflow-wrap:anywhere}
.page-error a{color:var(--ink)}
.page-error main{max-width:1180px;width:calc(100% - 80px);margin:auto}
.page-error .app-header{min-height:104px;display:flex;align-items:center;justify-content:space-between}
.error-content{max-width:570px;margin:100px 0}
.error-content h1{font-size:55px;line-height:1.08;margin:20px 0}
.error-content p{font-size:16px;line-height:1.7;color:var(--muted)}
.error-content .button{display:inline-flex;align-items:center;min-height:52px;padding:14px 24px;background:var(--ink);color:white;text-decoration:none;border-radius:7px;margin-top:16px}

@media(max-width:700px){
 .deartag-brand{font-size:26px;letter-spacing:-1.1px;gap:5px}.deartag-brand img{width:32px;height:32px}
 .page-account .customer-main,.page-admin .admin-main{padding:0 20px 40px}
 .page-account .app-header,.page-admin .app-header,.page-card .app-header{min-height:82px;margin-bottom:28px;gap:12px}
 .page-account .header-actions{gap:2px;flex-wrap:nowrap}.page-account .header-actions button{padding:9px 7px;font-size:12px;min-height:42px}
 .brand-context{display:none}.page-account .auth-intro{margin-top:32px}
 .page-account .auth-intro h1{font-size:40px;letter-spacing:-1.4px}
 .page-account .auth-intro>p:last-child{font-size:14px}
 .page-account .auth-panel,.page-admin .login-panel{padding:24px 20px}
 .page-account .auth-panel h2{font-size:28px}.page-account .dashboard-heading h1{font-size:35px}
 .page-account .card-heading h1{font-size:31px}.page-account .form-step h2{font-size:26px}
 .page-account .form-step,.page-account #review-step{padding:22px 18px}
 .page-admin .workspace-heading h1{font-size:32px}.page-admin .login-panel h1{font-size:34px}
 .page-card main{padding:0 20px 40px}.page-card h1{font-size:32px}
 .page-card #gate h1,.page-card #availability h1{font-size:30px}
 .page-error main{width:calc(100% - 40px)}.page-error .app-header{min-height:82px}.error-content{margin:60px 0}.error-content h1{font-size:42px}
}
@media(max-width:360px){.page-account .header-actions button{padding-inline:5px}.page-account .deartag-brand{font-size:24px;gap:3px}.page-account .deartag-brand img{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}