/* Extra optional systems use the same warm paper/wood vocabulary as the rest of the hub. */
.extras-page{max-width:960px;margin:0 auto;display:grid;gap:16px;padding-bottom:28px;color:#603e2a}
.extras-page>header{display:flex;align-items:center;gap:17px;background:linear-gradient(125deg,#fbecd3,#efcf9c);border:2px solid #bd9361;border-radius:18px;padding:18px;box-shadow:0 4px 0 #9d713c24}
.extras-page>header>span{display:grid;place-items:center;flex:none;width:76px;height:76px;background:#f7dfb5;border:3px solid #c39a66;border-radius:18px;font-size:42px}
.extras-page h3{font:800 27px/1.15 Patrick,'Segoe UI',sans-serif;margin:4px 0;color:#694025}
.extras-page p{line-height:1.45;margin:5px 0;color:#72543b}
.extras-page small{color:#775537;font-size:12px;font-weight:800;letter-spacing:.05em}
.extras-note{background:#f9eccf;border:1px dashed #bc915d;border-radius:12px;padding:15px;margin:0!important}
.extras-current{display:flex;align-items:center;gap:22px;padding:17px 20px;border-radius:16px;background:linear-gradient(#fdf4df,#f7e5c3);border:2px solid #d9ba88}
.signature-glass{font-size:65px;flex:none;filter:drop-shadow(1px 3px 2px #6e493540)}
.extras-current strong{color:#47763e}
.signature-form{background:linear-gradient(#f9e9c9,#f5dfb9);border:2px solid #ba9064;border-radius:19px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:15px}
.signature-form>label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:800}
.signature-form label:first-child,.signature-form fieldset,.signature-form button,.signature-form>small{grid-column:1/-1}
.signature-form input:not([type=checkbox]):not([type=radio]),.signature-form select{height:44px;width:100%;border:2px solid #c7a379;border-radius:11px;padding:9px 11px;font-size:16px;background:#fff9eb;color:#553b2e;min-width:0}
.signature-form fieldset{margin:0;padding:12px;display:flex;gap:12px;flex-wrap:wrap;border:1px solid #cba875;border-radius:12px}
.signature-form legend{font-size:13px;font-weight:800;padding:0 6px}
.signature-form fieldset label{display:flex;align-items:center;gap:7px;background:#fffaef;border:1px solid #e4c99a;padding:8px 11px;border-radius:11px;font-size:13px}
.signature-form input[type=checkbox]{width:20px;height:20px;accent-color:#648848}
.signature-page{max-width:1020px}
.signature-page>header{background:linear-gradient(125deg,#fff2d9 0%,#efd09b 58%,#d6a96d 100%);position:relative;overflow:hidden}
.signature-page>header:after{content:"";position:absolute;right:-26px;bottom:-44px;width:190px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff5cf55 0 25%,transparent 26% 100%);background-size:34px 34px;transform:rotate(-8deg)}
.signature-page>header>span{font-size:40px;background:linear-gradient(145deg,#fffaf0,#e6bd7e);box-shadow:inset 0 2px 0 #fff9,0 3px 0 #98704433}
.signature-intro{border-style:solid;border-color:#d5b27d;background:#fff8e9;box-shadow:inset 4px 0 #739050}
.signature-form{grid-template-columns:minmax(245px,.82fr) minmax(0,1.5fr);align-items:start;gap:16px;background:#f7e4bd;padding:16px}
.signature-preview-panel{grid-column:1;grid-row:1 / span 4;position:sticky;top:8px;display:grid;justify-items:center;gap:10px;min-height:440px;padding:20px 16px;border:2px solid #9f774c;border-radius:17px;background:linear-gradient(180deg,#5d3827 0 15%,#89583a 15% 18%,#f7e4bd 18% 80%,#bc8953 80% 84%,#7b4b30 84%);box-shadow:inset 0 2px #fff4,0 5px 0 #754a2822;color:#fff8e8}
.signature-live-cup{display:grid;justify-items:center;align-content:start;position:relative;min-width:180px}
.signature-live-cup canvas{display:block;width:180px;height:250px;filter:drop-shadow(0 7px 5px #3d281b35)}
.signature-live-cup>span{margin-top:-8px;padding:6px 10px;border-radius:999px;background:#fff7df;color:#64442f;font-size:12px;font-weight:900;letter-spacing:.025em;box-shadow:0 2px 0 #5a382b22;text-align:center}
.signature-preview-copy{width:100%;padding:12px 13px;border:1px solid #b68b5a;border-radius:13px;background:#fff8e9;color:#66452f;text-align:left}
.signature-preview-copy>small{display:block;color:#637a3a}
.signature-preview-copy>strong{display:block;margin:4px 0 5px;font:800 24px/1.15 Patrick,'Segoe UI',sans-serif;color:#623d27;overflow-wrap:anywhere}
.signature-preview-copy>p{font-size:13px;margin:0;color:#76563e}
.signature-preview-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.signature-preview-chips span{padding:4px 7px;border-radius:999px;background:#e9d4ac;border:1px solid #c49b68;font-size:12px;font-weight:900}
.signature-form>.signature-name,.signature-form>.signature-builder,.signature-form>.signature-finish,.signature-form>button,.signature-form>small{grid-column:2}
.signature-name{padding:13px 14px;border-radius:14px;background:#fff7e5;border:1px solid #d1ac76}
.signature-form .signature-name input{margin-top:3px;height:48px;font-size:18px;background:#fffdf6;border-color:#9d754b}
.signature-builder{margin:0!important;padding:14px!important;border:1px solid #c49b67!important;border-radius:14px!important;background:#fff5df}
.signature-builder legend{font:800 18px Patrick,'Segoe UI',sans-serif!important;color:#694329;background:#f7e4bd;border-radius:999px;padding:4px 10px!important}
.signature-builder>p{font-size:12px;margin:0 0 10px;color:#71563f}
.signature-builder>select{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.signature-ingredient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.signature-ingredient{position:relative;display:grid!important;grid-template-columns:39px minmax(0,1fr) 21px;align-items:center;gap:8px!important;min-height:61px;padding:8px!important;border:2px solid #dfc69d!important;border-radius:12px!important;background:#fffdf5!important;cursor:pointer;transition:border-color .16s,transform .16s,box-shadow .16s}
.signature-ingredient:hover{transform:translateY(-1px);border-color:var(--ingredient)!important;box-shadow:0 3px 0 color-mix(in srgb,var(--ingredient) 24%,transparent)}
.signature-ingredient input{position:absolute;inset:0;z-index:2;opacity:0;width:100%!important;height:100%!important;margin:0;cursor:pointer}
.signature-ingredient-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;background:color-mix(in srgb,var(--ingredient) 24%,#fff);border:2px solid color-mix(in srgb,var(--ingredient) 70%,#79583e);font-size:19px}
.signature-ingredient>span:nth-of-type(2){min-width:0;display:grid}
.signature-ingredient b{font-size:13px;color:#5d402d;line-height:1.25}
.signature-ingredient small{font-size:12px!important;line-height:1.25;color:#705742!important;letter-spacing:0!important}
.signature-ingredient i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e9dfcd;color:#675949;font-style:normal;font-size:12px}
.signature-ingredient:has(input:checked){border-color:var(--ingredient)!important;background:color-mix(in srgb,var(--ingredient) 10%,#fffdf5)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ingredient) 35%,transparent)}
.signature-ingredient:has(input:checked) i{background:#668347;color:#fff}
.signature-syrup-flavors{margin-top:11px;padding-top:11px;border-top:1px dashed #c9a979}
.signature-syrup-flavors[hidden]{display:none}
.signature-syrup-flavors>small{display:block;margin-bottom:7px;color:#705239}
.signature-syrup-flavors>div{display:flex;gap:7px;flex-wrap:wrap}
.signature-syrup-flavors label{display:flex!important;align-items:center;gap:5px!important;padding:6px 8px!important;border:1px solid #d5b78b!important;border-radius:999px!important;background:#fff!important;cursor:pointer;font-size:12px!important}
.signature-syrup-flavors input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.signature-syrup-flavors label>span{width:16px;height:16px;border-radius:50%;background:var(--syrup);border:2px solid #fff;box-shadow:0 0 0 1px #8d6d55}
.signature-syrup-flavors label:has(input:checked){outline:2px solid var(--syrup);outline-offset:1px}
.signature-finish{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.signature-finish label{display:grid;gap:5px;font-size:13px;font-weight:900}
.signature-form>button{width:100%;font-size:19px;background:linear-gradient(#7fa052,#58783a);box-shadow:0 3px 0 #3d5a28}
.signature-form>button:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.65}
.signature-created{padding:18px 24px;background:linear-gradient(110deg,#fff4dc,#f0d2a0)}
.signature-created .signature-live-cup canvas{width:132px;height:184px}
.signature-created .signature-live-cup{min-width:140px}
.signature-created h3{font-size:31px}
.extras-page button{font:800 17px Patrick,'Segoe UI',sans-serif;border-radius:11px;border:2px solid #46602f;color:#fff9ec;background:linear-gradient(#5c7c37,#43632c);padding:10px 16px;min-height:42px;cursor:pointer}
.extras-page button:focus-visible{outline:3px solid #2e6c59;outline-offset:3px}
.extras-decor-preview{display:flex;align-items:center;gap:17px;background:linear-gradient(110deg,#f4e1be,#f7ebd5);border:2px solid #c79b68;border-radius:16px;padding:12px 16px;margin-bottom:12px;color:#6d4931}
.extras-decor-preview small{display:block;color:#775338;font-size:12px;font-weight:800}
.extras-decor-preview b{font:800 23px Patrick,'Segoe UI',sans-serif}
.extras-decor-preview p{font-size:12px;line-height:1.4;margin:2px 0 0}
.extras-preview-art{display:flex;gap:6px;align-items:center;justify-content:center;min-width:160px;min-height:92px;background:linear-gradient(#bc946e 0 63%,#a9774e 64% 80%,#7d4f38 81%);border:5px solid #855a37;border-radius:11px;font-size:27px}
.vip-invite{display:flex;gap:17px;padding:17px;border:2px solid #bb8b51;border-radius:17px;background:#fff0d0;box-shadow:0 4px 0 #ae90562c}
.vip-invite>span{font-size:53px}
.vip-invite button+button,.relic-remove{color:#67482f!important;background:#ebd7b6!important;border-color:#ab845c!important}
.vip-invite>div>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.keepsake-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:12px}
.keepsake-card{display:flex;flex-direction:column;gap:5px;border-radius:15px;background:#fff4db;border:2px solid #d7b88b;padding:15px;min-height:205px}
.keepsake-card>span{font-size:40px}
.keepsake-card>.relic-illustration{width:76px;height:76px;display:grid;place-items:center;flex:none;border-radius:12px;background:radial-gradient(circle at 46% 35%,#fffaf0,#f1deb9);border:1px solid #d2ab75}
.relic-illustration svg{width:68px;height:68px;display:block;filter:drop-shadow(0 2px 1px #78553c38)}
.extras-page>header>.relic-header-art svg{width:100%;height:100%;max-width:64px;max-height:64px;display:block}
.relic-location{font-size:12px;font-weight:700;color:#5a683c!important;margin-top:7px!important}
.keepsake-card>b{font-size:17px;color:#5f422e}
.keepsake-card>p{font-size:13px;flex:1}
.keepsake-card.locked{filter:saturate(.62);background:#ece3d0}
.keepsake-card button{align-self:stretch;font-size:14px}
.relic-remove{justify-self:start}
.pet-page{max-width:1110px;gap:18px}
.pet-active{display:flex;align-items:center;gap:24px;padding:17px 24px;border:2px solid #ca9b65;border-radius:20px;background:linear-gradient(125deg,#f8e4c2 0%,#f9efda 60%,#e8c795 100%);box-shadow:0 6px 0 #724b2c17}
.pet-active-art{width:205px;height:184px;flex:none;display:grid;place-items:center;border:4px solid #ae8254;border-radius:19px;background:radial-gradient(ellipse at 52% 33%,#fff9eb 0%,#f3dbb1 65%,#d7ad7c 100%);box-shadow:inset 0 2px 11px #8d593b30,0 4px 0 #a7835b26}
.pet-active-art img{height:172px;width:195px;object-fit:contain;filter:drop-shadow(0 4px 3px #53362126)}
.pet-active-art{position:relative;cursor:pointer}
.pet-active-art:focus-visible{outline:3px solid #739e5f;outline-offset:3px}
.pet-active-art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 3px #53362126)}
.pet-active h3{font-size:31px}.pet-active p{font-size:14px}
.pet-active>div:last-child>b{display:inline-block;background:#e7f0da;color:#416c3c;border:1px solid #b7c99e;border-radius:9px;padding:6px 10px;font-size:15px}
.pet-section-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#6e4730;padding:4px 3px 0}
.pet-section-caption>b{font:800 24px Patrick,'Segoe UI',sans-serif}
.pet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.pet-card{min-width:0;display:flex;flex-direction:column;border:2px solid #d9b38a;border-radius:17px;background:linear-gradient(165deg,#fff9e9,#f2dec0);overflow:hidden;box-shadow:0 4px 0 #684b3020;transition:transform .15s,border-color .15s}
.pet-card.equipped{border-color:#72934f;box-shadow:0 4px 0 #60864742;background:linear-gradient(160deg,#f8f9e5,#efdfbe)}
.pet-portrait{position:relative;min-height:195px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 43%,#fff8e7 0%,#f4d7a6 70%,#e5bd90 100%);border-bottom:2px solid #e3c69f}
.pet-portrait.dog{background:radial-gradient(ellipse at 50% 43%,#f9f8eb 0%,#dbe7d5 74%,#b6cba9 100%)}
.pet-portrait img{position:relative;z-index:1;width:min(88%,242px);height:180px;object-fit:contain;filter:drop-shadow(0 5px 5px #6c4c3033)}
.pet-portrait[role=button]{cursor:pointer;outline-offset:-4px}
.pet-portrait:focus-visible{outline:3px solid #6f965b}
.pet-portrait canvas{position:absolute;z-index:1;width:min(100%,240px);height:195px;object-fit:contain;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;filter:drop-shadow(0 5px 5px #6c4c3033)}
.pet-portrait>span{position:absolute;z-index:2;bottom:9px;right:10px;background:#fff5ddb8;border:1px solid #b89a6a;padding:4px 9px;border-radius:100px;color:#735339;font-size:12px;font-weight:800;backdrop-filter:blur(4px)}
.pet-saving-goal{border:1px solid #d4b38a;background:linear-gradient(130deg,#fbf5e9,#eee4cb);border-radius:15px;padding:13px 16px;display:grid;gap:8px}
.pet-saving-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pet-saving-head span{display:grid;gap:2px}
.pet-saving-head small{font-size:12px;font-weight:800;letter-spacing:.025em;color:#705843}
.pet-saving-head b{font:800 19px Patrick,'Segoe UI',sans-serif;color:#644b31}
.pet-saving-head strong{font-size:15px;color:#556f3e}
.pet-saving-track{height:12px;overflow:hidden;border-radius:12px;background:#e2d4bb;box-shadow:inset 0 1px 3px #8c664a30}
.pet-saving-track i{display:block;height:100%;background:linear-gradient(90deg,#8db66c,#587e52);border-radius:12px;transition:width .24s ease}
.pet-saving-goal p{margin:0;font-size:12px;line-height:1.5;color:#745e4b}
.pet-saving-goal.is-complete{background:#e9f0dc}
.pet-card-info{padding:13px 14px 7px;display:grid;gap:5px;flex:1}
.pet-card-info small{font-size:12px;font-weight:800;color:#76563b;letter-spacing:.035em}
.pet-card-info>b{color:#68412d;font:800 23px/1.15 Patrick,'Segoe UI',sans-serif}
.pet-card-info>p{margin:0;font-size:13px;line-height:1.3;color:#55784b;font-weight:800;min-height:34px}
.pet-card-footer{padding:10px 13px 13px;display:flex;align-items:center;gap:9px;justify-content:space-between;border-top:1px dashed #dabb8b}
.pet-card-footer strong{color:#6a4028;font-size:15px;white-space:nowrap}
.pet-card-footer button{min-height:38px;font-size:14px;padding:7px 10px;white-space:nowrap}
.pet-card-footer button:disabled{background:#dcd8bf;border-color:#c7c09c;color:#748568;cursor:default}
.pet-card.equipped .pet-card-footer button:disabled{color:#406b3a;background:#d3e3c7}
@media(min-width:1080px){.pet-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1250px){.pet-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:730px){.pet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pet-active{gap:12px;padding:12px}.pet-active-art{width:135px;height:138px}.pet-active-art img{width:132px;height:130px}.pet-card-footer{flex-wrap:wrap}.pet-card-footer button{width:100%}}
@media(max-width:440px){.pet-grid{gap:9px}.pet-portrait{min-height:138px}.pet-portrait img{height:140px}.pet-portrait>span{font-size:11px;bottom:5px;right:5px}.pet-card-info{padding:10px 8px 5px}.pet-card-info>b{font-size:20px}.pet-card-info>p{font-size:11px}.pet-card-footer{padding:8px}.pet-active-art{width:110px;height:115px}.pet-active-art img{height:106px;width:107px}.pet-active h3{font-size:22px}.pet-active p{font-size:12px}.pet-section-caption{align-items:flex-start;flex-direction:column;gap:0}}
@media(max-width:440px){.pet-portrait canvas{height:140px;width:min(100%,177px)}.pet-saving-goal{padding:10px}.pet-saving-head strong{font-size:13px}}
@media(max-width:760px){.signature-form{grid-template-columns:1fr}.signature-preview-panel{position:relative;top:auto;grid-column:1;grid-row:auto;min-height:auto;grid-template-columns:150px 1fr;align-items:center;padding:11px;background:linear-gradient(90deg,#744a31 0 32%,#f6e1b9 32%)}.signature-live-cup{min-width:140px}.signature-live-cup canvas{width:140px;height:194px}.signature-preview-copy{align-self:stretch}.signature-form>.signature-name,.signature-form>.signature-builder,.signature-form>.signature-finish,.signature-form>button,.signature-form>small{grid-column:1}.signature-created{align-items:flex-start}}
@media(max-width:620px){.extras-page{padding:0 4px 20px}.signature-form{grid-template-columns:1fr;padding:10px;gap:10px}.signature-form>label{grid-column:1}.signature-preview-panel{grid-template-columns:112px 1fr;background:linear-gradient(90deg,#744a31 0 34%,#f6e1b9 34%)}.signature-live-cup{min-width:104px}.signature-live-cup canvas{width:110px;height:153px}.signature-live-cup>span{font-size:11px;padding:4px 6px}.signature-preview-copy{padding:9px}.signature-preview-copy>strong{font-size:19px}.signature-preview-copy>p{font-size:11px}.signature-ingredient-grid{grid-template-columns:1fr}.signature-finish{grid-template-columns:1fr 1fr}.extras-page>header{padding:12px}.extras-page>header>span{height:55px;width:55px;font-size:30px}.extras-page h3{font-size:23px}.extras-current{padding:12px;gap:10px}.signature-created .signature-live-cup canvas{width:96px;height:134px}.signature-created .signature-live-cup{min-width:98px}.signature-glass{font-size:44px}.keepsake-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.keepsake-card{padding:9px;min-height:180px}.keepsake-card button{padding:7px 3px}.extras-decor-preview{flex-direction:column;align-items:stretch}.extras-preview-art{width:100%}}