*{box-sizing:border-box}
:root{color-scheme:dark;background:#080504;color:#fff4df;font-family:Georgia,'Times New Roman',serif}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{display:flex;flex-direction:column;align-items:center;background:#090502}
.screen{position:relative;width:min(100%,520px);aspect-ratio:941/1672;overflow:hidden;background:#0c0604;container-type:inline-size}
.approved-art{display:block;position:absolute;width:100%;height:100%;inset:0;object-fit:fill;user-select:none;pointer-events:none}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.back-control{position:absolute;z-index:2;left:4.65%;top:2.5%;width:10.9%;height:5.25%;border:0;border-radius:22%;background:transparent;cursor:pointer}
.back-control:focus-visible,.action:focus-visible{outline:3px solid #ffe4a0;outline-offset:2px}
.artwork-panel{position:absolute;overflow:hidden;isolation:isolate;border-radius:4.1%/11%}
.panel-art{position:absolute;pointer-events:none;user-select:none;max-width:none;width:112.965%;height:auto;left:-5.64%}
.plan-panel{left:4.995%;top:25.90%;width:88.52%;height:19.86%;container-type:inline-size}
.plan-art{top:-130.42%}
.plan-mask{position:absolute;left:29.6%;right:2.4%;top:9%;bottom:6%;background:linear-gradient(90deg,#090503 0%,rgba(8,4,2,.99) 74%,rgba(8,4,2,.90) 100%);border-radius:3%}
.plan-content{position:absolute;inset:0;font-size:3.8cqw}
.plan-heading,.plan-name,.plan-state,.valid-label,.valid-date{position:absolute;margin:0;white-space:nowrap;line-height:1.15}
.plan-heading{left:30.7%;top:12.9%;font-size:3.47cqw;letter-spacing:.08em;color:#f6e5bc}
.plan-name{left:30.7%;top:27%;font-size:7.0cqw;font-weight:700;color:#fff7eb;max-width:35%;overflow:hidden;text-overflow:ellipsis}
.plan-state{left:69.3%;right:3.6%;top:29.4%;height:22%;display:flex;justify-content:center;align-items:center;border:1px solid #f7d48e;border-radius:100px;background:linear-gradient(#ffe9ad,#dca55d);box-shadow:inset 0 1px 0 #fff7d1;color:#170c03;font-size:3.94cqw;font-weight:700}
.plan-divider{position:absolute;left:30.7%;right:4%;top:57%;height:1px;background:linear-gradient(90deg,#d5aa6b,#a36f38,transparent)}
.valid-label{left:30.7%;top:64%;font-size:3.64cqw;color:#cab89c}
.valid-date{left:30.7%;top:78%;font-size:3.82cqw;color:#fff3e2;max-width:64%;overflow:hidden;text-overflow:ellipsis}
.actions{display:contents}
.action{left:4.995%;width:88.52%;height:13.40%;display:block;color:#fff6e4;text-decoration:none;container-type:inline-size;border-radius:4%/12%;cursor:pointer;transition:filter .15s}
.action:active{filter:brightness(1.25)}
.action.renew{top:50.05%}
.action.history{top:64.87%}
.renew-art{top:-373.7%}
.history-art{top:-484.4%}
.action-mask{position:absolute;left:29.1%;right:13%;top:14%;bottom:12%;border-radius:2%;background:linear-gradient(90deg,#090503 5%,rgba(7,4,3,.99) 78%,rgba(7,4,3,.50))}
.action-content{position:absolute;left:30.6%;top:23%;right:9%;display:flex;flex-direction:column;gap:1.8cqw;line-height:1.15}
.action-title{font-size:6.25cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-subtitle{font-size:3.6cqw;color:#dccabb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-notice{width:100%;max-width:520px;text-align:center;font:11px/1.5 system-ui,sans-serif;color:#bc9b65;letter-spacing:.04em;padding:8px 16px 20px;margin:0}
dialog{background:#1a0e07;color:#f6e4bd;width:min(92vw,460px);border:1px solid #b9965e;border-radius:18px;padding:0;box-shadow:0 25px 65px #000a}
dialog::backdrop{background:#000b}
.dialog-inner{padding:26px}
.dialog-inner h2{font-size:27px;margin:10px 0}
.dialog-inner p:not(.mini){font:15px/1.6 system-ui,sans-serif;color:#e2d3b9}
.dialog-inner .mini{font:10px system-ui,sans-serif;letter-spacing:.18em;color:#d6ac6c}
.dialog-inner button{border:1px solid #d9a95f;background:linear-gradient(180deg,#f8d49b,#c88e47);color:#201108;border-radius:11px;padding:13px 18px;font:bold 15px system-ui,sans-serif;cursor:pointer}
@media(min-width:700px){body{padding-top:16px}.screen{box-shadow:0 0 70px #000c}}
@media(prefers-reduced-motion:reduce){.action{transition:none}}
