@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--ink:#59616d;--silver:#c4cbd4;--highlight:#f4f6f8;--white:#fff;--line:#dfe3e8;--shadow:0 18px 48px rgba(89,97,109,.12);--r-sm:8px;--r-md:16px;--r-lg:24px;--pill:999px;--chrome-hi:#fff;--chrome-light:#f4f6f8;--chrome-mid:#dfe3e8;--chrome-deep:#aeb7c2}
*{box-sizing:border-box}html{background:var(--white);color:var(--ink);font-family:Inter,system-ui,sans-serif}body{background:var(--white)!important;color:var(--ink)!important;-webkit-font-smoothing:antialiased}a{color:inherit}button,.btn,input,textarea,select{font:inherit}button,.btn{min-height:44px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--silver);outline-offset:3px}.display,h1,h2,h3,.brand,.logo{font-family:Cinzel,Georgia,serif}.chrome{background:linear-gradient(145deg,var(--chrome-hi) 0%,var(--chrome-light) 42%,var(--silver) 100%);border:1px solid var(--silver);box-shadow:inset 0 1px var(--chrome-hi),0 8px 24px rgba(89,97,109,.1)}
/* Shared silver chrome control: layered highlight, bevel and reflected lower edge. */
button:not(.toggle),.btn,.bt,.save,.tool,.add,.cta,.gatebox button,.qrbox button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:44px;padding:.65em 1.15em;border:1px solid var(--chrome-deep)!important;border-radius:var(--pill)!important;background:linear-gradient(155deg,var(--chrome-hi) 0%,var(--chrome-light) 32%,var(--chrome-mid) 68%,var(--chrome-deep) 100%)!important;color:var(--ink)!important;box-shadow:inset 0 1px 0 var(--chrome-hi),inset 0 -2px 0 rgba(89,97,109,.2),0 3px 0 #8e98a5,0 7px 14px rgba(89,97,109,.14);text-shadow:0 1px 0 var(--chrome-hi);font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.btn::before,.bt::before,.save::before,.tool::before,.add::before,.cta::before,.gatebox button::before,.qrbox button::before,button:not(.toggle)::before{content:'';position:absolute;z-index:-1;inset:1px 1px 52%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none}.btn:hover,.bt:hover,.save:hover,.tool:hover,.add:hover,.cta:hover,.gatebox button:hover,.qrbox button:hover,button:not(.toggle):hover{filter:brightness(1.03);transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--chrome-hi),inset 0 -2px 0 rgba(89,97,109,.2),0 4px 0 #8e98a5,0 10px 18px rgba(89,97,109,.18)}.btn:active,.bt:active,.save:active,.tool:active,.add:active,.cta:active,.gatebox button:active,.qrbox button:active,button:not(.toggle):active{transform:translateY(2px);background:linear-gradient(155deg,var(--chrome-deep),var(--chrome-mid) 42%,var(--chrome-light) 100%)!important;box-shadow:inset 0 2px 4px rgba(89,97,109,.32),inset 0 -1px 0 var(--chrome-hi),0 1px 0 #8e98a5,0 3px 8px rgba(89,97,109,.12)}.btn-p,.bt.p,.save{background:linear-gradient(155deg,#fff 0%,var(--silver) 38%,#aeb7c2 72%,#eef1f4 100%)!important}.btn:disabled,.bt:disabled,.save:disabled,button:disabled,[aria-disabled=true]{opacity:.5;cursor:not-allowed;filter:grayscale(1);transform:none!important;box-shadow:inset 0 1px 0 var(--chrome-hi),0 1px 0 #8e98a5}.btn[aria-busy=true],.bt[aria-busy=true],button[aria-busy=true]{cursor:wait}.btn[aria-busy=true]::after,.bt[aria-busy=true]::after,button[aria-busy=true]::after{content:'';width:1em;height:1em;border:2px solid var(--silver);border-top-color:var(--ink);border-radius:50%;animation:chrome-spin .7s linear infinite}@keyframes chrome-spin{to{transform:rotate(360deg)}}
/* Compact navigation still uses the same material without changing layout. */.nav button{min-height:44px}.nav button.active{box-shadow:inset 0 1px 0 var(--chrome-hi),inset 3px 0 var(--chrome-deep),0 2px 0 #8e98a5!important}.toggle{border:1px solid var(--chrome-deep)!important;box-shadow:inset 0 1px 2px rgba(89,97,109,.22)}.toggle:focus-visible{outline:3px solid var(--silver);outline-offset:3px}.eyebrow,.label{color:var(--ink)!important;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;font-weight:600}.muted,.status,.em,small{color:#737d89!important}.empty{border:1px dashed var(--silver);border-radius:var(--r-md);padding:28px;text-align:center;color:#737d89;background:var(--highlight)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.btn:hover,.bt:hover,.save:hover,.tool:hover,.add:hover,.cta:hover,button:not(.toggle):hover{transform:none}}
