.sarjakortti{max-width:var(--max-w);margin:0 auto;padding:0 2.5rem}.sarjakortti__back{font-family:var(--font-mono);font-size:.8125rem;color:var(--c-text-3);text-decoration:none;letter-spacing:.02em;transition:color .2s ease;display:inline-block;margin-bottom:2rem}.sarjakortti__back:hover{color:var(--c-accent)}.sarjakortti__title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--c-text);font-variation-settings:'opsz' 72;margin-bottom:.75rem}.sarjakortti__desc{font-size:1.0625rem;color:var(--c-text-2);line-height:1.6;max-width:640px;margin-bottom:2.5rem}.sarjakortti__form{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:6px;padding:1.5rem;margin-bottom:2.5rem;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-end}.sarjakortti__field{display:flex;flex-direction:column;gap:.5rem}.sarjakortti__field--name{flex:1 1 200px}.sarjakortti__field--visits{flex:none}.sarjakortti__field--price{flex:none}.sarjakortti__field--duration{flex:1 1 100%}.sarjakortti__label{font-family:var(--font-mono);font-size:.6875rem;font-weight:400;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.08em}.sarjakortti__input{font-family:var(--font-body);font-size:.9375rem;color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border);border-radius:4px;padding:.5rem .75rem;outline:none;transition:border-color .2s ease}.sarjakortti__input:focus{border-color:var(--c-accent)}.sarjakortti__input--short{width:5.5rem}.sarjakortti__input::-webkit-inner-spin-button,.sarjakortti__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sarjakortti__input[type=number]{-moz-appearance:textfield}.sarjakortti__input-group{display:flex;align-items:center;gap:.375rem}.sarjakortti__input-suffix{font-family:var(--font-mono);font-size:.875rem;color:var(--c-text-3);flex-shrink:0}.sarjakortti__pills{display:flex;flex-wrap:wrap;gap:.375rem}.sarjakortti__pill{font-family:var(--font-mono);font-size:.8125rem;font-weight:400;color:var(--c-text-2);background:var(--c-tag-bg);border:1px solid var(--c-tag-border);border-radius:100px;padding:.375rem .875rem;cursor:pointer;letter-spacing:.02em;transition:all .2s ease;line-height:1.4}.sarjakortti__pill:hover{color:var(--c-text);border-color:var(--c-accent)}.sarjakortti__pill--active{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}.sarjakortti__pill--active:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover);color:#fff}.sarjakortti__add{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:#fff;background:var(--c-accent);border:none;border-radius:100px;padding:.5rem 1.5rem;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:background .2s ease;align-self:flex-end}.sarjakortti__add:hover{background:var(--c-accent-hover)}.sarjakortti__section-title{font-family:var(--font-mono);font-size:.75rem;font-weight:400;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem;margin-top:.5rem}.sarjakortti__empty{font-size:.9375rem;color:var(--c-text-3);text-align:center;padding:3rem 1rem}.sarjakortti__card{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:6px;padding:1.5rem;margin-bottom:.75rem;transition:border-color .2s ease}.sarjakortti__card--completed{opacity:.55}.sarjakortti__card--completed:hover{opacity:.75}.sarjakortti__card-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}.sarjakortti__card-name{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--c-text);font-variation-settings:'opsz' 48;line-height:1.3}.sarjakortti__card-badge{font-family:var(--font-mono);font-size:.75rem;color:var(--c-text-2);background:var(--c-tag-bg);border:1px solid var(--c-tag-border);border-radius:100px;padding:.25rem .625rem;flex-shrink:0;letter-spacing:.02em}.sarjakortti__punch-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;padding:.75rem 0}.sarjakortti__punch{width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--c-border);background:0 0;transition:all .3s var(--ease);flex-shrink:0}.sarjakortti__punch--used{background:var(--c-accent);border-color:var(--c-accent)}@keyframes sarjakortti-punch{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}.sarjakortti__punch--animating{animation:sarjakortti-punch .35s var(--ease)}.sarjakortti__card-status{font-family:var(--font-mono);font-size:.8125rem;color:var(--c-text-2);margin-bottom:.25rem;letter-spacing:.01em}.sarjakortti__card-meta{font-family:var(--font-mono);font-size:.75rem;color:var(--c-text-3);letter-spacing:.01em;margin-bottom:1rem}.sarjakortti__card-actions{margin-bottom:.5rem}.sarjakortti__record{font-family:var(--font-mono);font-size:.875rem;font-weight:500;color:#fff;background:var(--c-accent);border:none;border-radius:100px;padding:.75rem 1.5rem;width:100%;cursor:pointer;letter-spacing:.02em;transition:background .2s ease}.sarjakortti__record:hover{background:var(--c-accent-hover)}.sarjakortti__record:active{transform:scale(.98)}.sarjakortti__history-toggle{font-family:var(--font-mono);font-size:.75rem;color:var(--c-text-3);background:0 0;border:none;cursor:pointer;padding:.375rem 0;letter-spacing:.02em;transition:color .2s ease}.sarjakortti__history-toggle:hover{color:var(--c-accent)}.sarjakortti__history{display:none;padding:.5rem 0 .25rem}.sarjakortti__history--open{display:block}.sarjakortti__history-item{font-family:var(--font-mono);font-size:.8125rem;color:var(--c-text-2);padding:.25rem 0;line-height:1.5}.sarjakortti__delete{font-family:var(--font-mono);font-size:.6875rem;color:var(--c-text-3);background:0 0;border:1px solid var(--c-border);border-radius:100px;padding:.25rem .75rem;cursor:pointer;margin-top:.75rem;letter-spacing:.02em;transition:all .2s ease}.sarjakortti__delete:hover{color:var(--c-accent);border-color:var(--c-accent)}.sarjakortti__info{padding-top:2rem;border-top:1px solid var(--c-border);margin-top:1rem;margin-bottom:4rem}.sarjakortti__info p{font-size:.9375rem;color:var(--c-text-3);line-height:1.7;max-width:640px}.sarjakortti__toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%)translateY(calc(100% + 2rem));opacity:0;z-index:900;display:flex;align-items:center;gap:1rem;background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:6px;padding:.875rem 1.25rem;box-shadow:0 4px 24px rgba(0,0,0,.12);font-family:var(--font-mono);font-size:.8125rem;color:var(--c-text);pointer-events:none;transition:transform .35s var(--ease),opacity .35s var(--ease);max-width:calc(100vw - 2rem);overflow:hidden}.sarjakortti__toast--visible{transform:translateX(-50%)translateY(0);opacity:1;pointer-events:auto}.sarjakortti__toast-message{color:var(--c-text-2);letter-spacing:.02em;white-space:nowrap}.sarjakortti__toast-undo{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--c-accent);background:0 0;border:none;cursor:pointer;padding:.25rem .5rem;border-radius:4px;letter-spacing:.02em;text-transform:uppercase;transition:background .2s ease;white-space:nowrap;flex-shrink:0}.sarjakortti__toast-undo:hover{background:var(--c-tag-bg)}.sarjakortti__toast-undo:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}.sarjakortti__toast-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--c-accent);transform-origin:left;transform:scaleX(0)}.sarjakortti__toast-progress--active{animation:sarjakortti-toast-progress 5s linear forwards}@keyframes sarjakortti-toast-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}.sarjakortti__backup{margin-top:2rem;border-top:1px solid var(--c-border);padding-top:1rem}.sarjakortti__backup-toggle{font-family:var(--font-mono);font-size:.75rem;font-weight:400;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.08em;background:0 0;border:none;cursor:pointer;padding:.375rem 0;display:flex;align-items:center;gap:.5rem;transition:color .2s ease;width:100%}.sarjakortti__backup-toggle:hover{color:var(--c-accent)}.sarjakortti__backup-chevron{transition:transform .2s ease;flex-shrink:0}.sarjakortti__backup-toggle[aria-expanded=true] .sarjakortti__backup-chevron{transform:rotate(180deg)}.sarjakortti__backup-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}.sarjakortti__backup-body--open{grid-template-rows:1fr}.sarjakortti__backup-inner{overflow:hidden}.sarjakortti__backup-section{padding:1rem 0 .5rem}.sarjakortti__backup-desc{font-size:.875rem;color:var(--c-text-3);line-height:1.6;margin-bottom:1rem}.sarjakortti__backup-actions{display:flex;flex-wrap:wrap;gap:.75rem}.sarjakortti__backup-btn{font-family:var(--font-mono);font-size:.75rem;font-weight:400;color:var(--c-text-2);background:var(--c-bg);border:1px solid var(--c-border);border-radius:100px;padding:.5rem 1.25rem;cursor:pointer;letter-spacing:.02em;transition:all .2s ease;text-align:center}.sarjakortti__backup-btn:hover{color:var(--c-text);border-color:var(--c-accent)}.sarjakortti__backup-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sarjakortti__backup-status{font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;padding:.75rem 1rem;border-radius:4px;margin-top:.75rem}.sarjakortti__backup-status--success{color:var(--c-text-2);background:var(--c-tag-bg);border:1px solid var(--c-tag-border)}.sarjakortti__backup-status--error{color:#a33;background:rgba(170,51,51,8%);border:1px solid rgba(170,51,51,.2)}body.dark-theme .sarjakortti__backup-status--error{color:#e88;background:rgba(238,136,136,8%);border-color:rgba(238,136,136,.2)}.sarjakortti__backup-confirm{margin-top:.75rem;padding:1rem;background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:6px}.sarjakortti__backup-confirm-text{font-size:.875rem;color:var(--c-text-2);line-height:1.6;margin-bottom:1rem}.sarjakortti__backup-confirm-actions{display:flex;flex-wrap:wrap;gap:.5rem}.sarjakortti__backup-confirm-btn{font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:#fff;background:var(--c-accent);border:none;border-radius:100px;padding:.5rem 1.25rem;cursor:pointer;letter-spacing:.02em;transition:background .2s ease}.sarjakortti__backup-confirm-btn:hover{background:var(--c-accent-hover)}.sarjakortti__backup-confirm-btn--cancel{color:var(--c-text-2);background:0 0;border:1px solid var(--c-border)}.sarjakortti__backup-confirm-btn--cancel:hover{color:var(--c-text);border-color:var(--c-accent);background:0 0}@media(max-width:768px){.sarjakortti{padding:0 1.5rem}.sarjakortti__form{padding:1.25rem}.sarjakortti__card{padding:1.25rem}.sarjakortti__punch{width:1.25rem;height:1.25rem}.sarjakortti__punch-row{gap:.375rem}}@media(max-width:480px){.sarjakortti{padding:0 1rem}.sarjakortti__form{padding:1rem;gap:1rem}.sarjakortti__pill{font-size:.75rem;padding:.3125rem .625rem}.sarjakortti__card-name{font-size:1.1rem}.sarjakortti__punch{width:1.1rem;height:1.1rem}.sarjakortti__punch-row{gap:.3rem}.sarjakortti__toast{left:1rem;right:1rem;transform:translateX(0)translateY(calc(100% + 2rem));max-width:none}.sarjakortti__toast--visible{transform:translateX(0)translateY(0)}.sarjakortti__backup-actions{flex-direction:column}.sarjakortti__backup-confirm-actions{flex-direction:column}}@media(prefers-reduced-motion:reduce){.sarjakortti__punch--animating{animation:none}.sarjakortti__punch,.sarjakortti__pill,.sarjakortti__back,.sarjakortti__input,.sarjakortti__record,.sarjakortti__delete,.sarjakortti__history-toggle,.sarjakortti__card,.sarjakortti__card--completed,.sarjakortti__toast,.sarjakortti__toast-undo,.sarjakortti__backup-toggle,.sarjakortti__backup-chevron,.sarjakortti__backup-body,.sarjakortti__backup-btn,.sarjakortti__backup-confirm-btn{transition:none}.sarjakortti__toast-progress--active{animation:none;transform:scaleX(0)}}