/* Photoreal machined-metal artwork supplies the material and bevels. */
body button{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#171612;border:0;border-radius:12px;color:#fff1cc;box-shadow:0 5px 2px #030403,0 10px 18px #0008;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;text-shadow:0 1px 1px #000;font-weight:700}
body button::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#242624 url('/assets/metal-button.png') center/100% 100% no-repeat;filter:grayscale(1) brightness(.38)}
body .btn{background:#30200c;border:0;border-radius:14px;padding:19px 25px;min-height:64px;color:#231807;text-shadow:0 1px 0 #ffe9a099;font-weight:800;letter-spacing:.25px;box-shadow:0 5px 1px #080703,0 11px 20px #0009,0 0 20px #dc9d2914}
body .btn::before{filter:none}
body .btn.secondary{background:#202322;color:#181d20;border:0;text-shadow:0 1px 0 #fff8;box-shadow:0 5px 1px #070909,0 11px 20px #0008}
body .btn.secondary::before{filter:grayscale(1) brightness(1.17)}
body .subtle,body .managementbar button,body .quick button,body nav button,body button.extra{background:#191d18;border:0;color:#f6e8c6;box-shadow:0 3px 1px #050605,0 6px 10px #0006;text-shadow:0 1px 2px #000}
body .subtle{padding:12px 17px;min-height:43px;border-radius:10px}
body .managementbar button.selected::before,body nav button.active::before{filter:none}
body .managementbar button.selected,body nav button.active{color:#231807;text-shadow:0 1px 0 #fff5}
body .phone .keypad{gap:16px;margin:24px 0 28px}
body .phone .keypad button{background:#161b1c;border:0;border-radius:16px;min-height:83px;color:#f9e7bb;text-shadow:0 2px 2px #000;box-shadow:0 6px 1px #030405,0 10px 17px #0009;font-weight:600}
body .phone .keypad button::before{filter:grayscale(.72) brightness(.5);background-size:100% 100%}
body .keypad small{color:#e6d5af;margin-top:4px;text-shadow:0 1px 2px #000}
body .book-tabs{gap:8px}
body .book-tabs .btn{min-height:51px;padding:12px 10px;font-size:12px;border-radius:10px}
body .book-tabs .btn.secondary{color:#eee6ce;text-shadow:0 1px 2px #000}
body .book-tabs .btn.secondary::before{filter:grayscale(.9) brightness(.4)}
body .close{position:absolute;top:10px;right:12px;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;line-height:1}
body .btn.danger{background:#34110c!important;border:0!important;color:#fff4e4!important;box-shadow:0 5px 1px #140403,0 10px 15px #0008!important;text-shadow:0 1px 2px #330500}
body .btn.danger::before{filter:sepia(1) saturate(5) hue-rotate(320deg) brightness(.65)}
/* Moving reflection over the real metal artwork; buttons remain native HTML. */
body .btn:not(.book-tabs .btn)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 35%,#fff0 40%,#fff8 48%,#fff1 53%,transparent 62%) -180% 0/60% 100% no-repeat;mix-blend-mode:screen;animation:metal-reflection 7s ease-in-out infinite}
body .btn.secondary::after{animation-delay:1.3s}
@keyframes metal-reflection{0%,65%{background-position:-180% 0;opacity:0}70%{opacity:.65}85%,100%{background-position:280% 0;opacity:0}}
@media(hover:hover){body button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.13)}}
body button:not(:disabled):active{transform:translateY(4px);filter:brightness(.91);box-shadow:0 1px 1px #050504,0 3px 8px #0006}
body button:focus-visible{outline:3px solid #ffd485;outline-offset:5px}
body button:disabled{cursor:not-allowed;opacity:.45;filter:grayscale(1);transform:none}
body button:disabled::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){body button,body button::after{animation:none!important;transition:none!important}}
