:root{--counter-accent:#b9f27c;--counter-line:#29363e}.counter-shell{max-width:1050px;margin:0 auto;padding:66px 28px 28px}.counter-intro{margin-bottom:40px}.counter-eyebrow{display:flex;align-items:center;gap:9px;color:#c1cdd2;font:600 12px var(--mono);letter-spacing:1.4px}.counter-eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--counter-accent);box-shadow:0 0 10px #b9f27c88}.counter-intro h1{margin:19px 0 12px;font-size:53px;line-height:1.15;letter-spacing:-2px}.counter-intro h1 em{color:var(--counter-accent);font-style:normal}.counter-intro p{font-size:16px;color:#b9c5ca}.counter-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.counter-toolbar>div{display:flex;align-items:baseline;gap:11px}.counter-toolbar strong{font-size:21px}.counter-toolbar span{color:#b1bec4;font-size:14px}.counter-toolbar button{display:flex;align-items:center;gap:8px;border:1px solid #7ea851;background:#b9f27c;color:#14200c;border-radius:9px;padding:11px 16px;font-size:14px;font-weight:800;cursor:pointer}.counter-toolbar button:hover{filter:brightness(1.08);transform:translateY(-1px)}.counter-toolbar button b{font-size:18px}.counter-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.counter-card{position:relative;padding:22px;border:1px solid var(--counter-line);border-radius:15px;background:linear-gradient(145deg,#141d24,#10171d);box-shadow:0 12px 30px #0002;animation:counter-in .28s ease both}.counter-card-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}.counter-name{flex:1;min-width:0;border:0;border-bottom:1px solid transparent;background:transparent;color:#e9f0f2;font-size:17px;font-weight:700;padding:4px 2px;outline:none}.counter-name:focus{border-color:#86a95e}.delete-counter{width:34px;height:34px;border:1px solid #3b464e;border-radius:8px;background:#0c1318;color:#aab6bc;font-size:19px;cursor:pointer}.delete-counter:hover{border-color:#e27878;color:#ffaaaa}.counter-value{min-height:92px;display:grid;place-items:center;border:1px solid #2a383e;border-radius:12px;background:radial-gradient(ellipse at 50% 0%,#b9f27c0e,transparent 70%),#0c1318;color:#f3f7f4;font:500 clamp(34px,5vw,50px) var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.counter-actions{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:9px;margin-top:12px}.counter-actions button{height:49px;border:1px solid #35434a;border-radius:9px;background:#121b21;color:#e5edef;font-size:22px;font-weight:700;cursor:pointer;transition:.18s}.counter-actions button:hover{transform:translateY(-2px);border-color:var(--counter-accent);color:var(--counter-accent);background:#18231d}.counter-actions .reset-counter{font-size:12px;color:#bdc8cd;background:transparent}.counter-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.counter-settings label{color:#b7c3c8;font-size:12px}.counter-settings input{display:block;width:100%;height:41px;margin-top:6px;border:1px solid #34424a;border-radius:8px;background:#0b1217;color:#f1f5f6;padding:0 10px;font:14px var(--mono);outline:none}.counter-settings input:focus{border-color:#93b969}.apply-settings{grid-column:1/-1;height:38px;border:1px solid #405149;border-radius:8px;background:#1a2620;color:#d5edb7;font-size:12px;font-weight:700;cursor:pointer}.apply-settings:hover{background:#243528}.counter-help{margin-top:58px;padding-top:30px;border-top:1px solid #26333b}.counter-help h2{font-size:28px;margin:10px 0 22px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.guide-grid article{min-height:160px;padding:18px;border:1px solid #29363e;border-radius:12px;background:#10171d}.guide-grid article>b{color:var(--counter-accent);font:600 13px var(--mono)}.guide-grid h3{font-size:16px;margin:13px 0 7px}.guide-grid p{margin:0;color:#b7c3c9;font-size:13px;line-height:1.7}.counter-note{text-align:center;color:#a7b4ba;font-size:13px;margin:25px 0 0}@keyframes counter-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.counter-shell{padding:48px 18px 22px}.counter-list{grid-template-columns:1fr}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.counter-intro h1{font-size:45px}}@media(max-width:460px){.counter-intro h1{font-size:39px}.counter-toolbar strong{font-size:18px}.counter-toolbar span{font-size:12px}.counter-card{padding:16px}.counter-value{min-height:82px}.guide-grid{grid-template-columns:1fr}.guide-grid article{min-height:0}.counter-settings{gap:8px}}
.counter-actions button[data-action="minus"],.counter-actions button[data-action="plus"]{height:56px;border:1px solid #50605f;border-radius:12px;font-size:26px;font-weight:800;box-shadow:inset 0 1px #ffffff12,0 5px 12px #0003;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease}.counter-actions button[data-action="minus"]{background:linear-gradient(145deg,#2a2025,#1b171c);color:#ffb0a8;border-color:#60464a}.counter-actions button[data-action="plus"]{background:linear-gradient(145deg,#273a2a,#1b2b22);color:#d7f7ae;border-color:#55734c}.counter-actions button[data-action="minus"]:hover{background:linear-gradient(145deg,#42292c,#2a1d21);border-color:#dc8984;color:#ffd4d0;box-shadow:0 7px 18px #d15a4b26}.counter-actions button[data-action="plus"]:hover{background:linear-gradient(145deg,#354d30,#253c2b);border-color:#b9f27c;color:#edffd4;box-shadow:0 7px 18px #8dc65c2c}.counter-actions button[data-action]:active{transform:translateY(2px) scale(.97);box-shadow:inset 0 2px 6px #0005}.counter-value{transition:color .16s ease}.counter-actions .reset-counter{height:56px;border-color:#39464d;border-radius:12px;background:linear-gradient(145deg,#192229,#121a20);font-size:13px;font-weight:700;color:#d0dadd}.counter-actions .reset-counter:hover{transform:translateY(-1px);border-color:#a2b1a5;color:#f0f5f1}
