*{box-sizing:border-box}
:root{font-family:Arial,sans-serif}
html,body{margin:0;width:100%;height:100%;overflow:hidden}

body{
    background:
        radial-gradient(circle at top, #16335c, transparent 40%),
        radial-gradient(circle at bottom, #06452d, transparent 35%);
    color:#fff;
}

.app{
    height:100dvh;
    display:flex;
    flex-direction:column;
    padding:12px;
    gap:9px;
}

.top{
    height:50px;
    display:grid;
    grid-template-columns:50px 1fr 50px;
    align-items:center;
    flex:none;
}

.top h1{
    text-align:center;
    font-size:22px;
    margin:0;
    text-transform:capitalize;
}

button{
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:linear-gradient(145deg,#263248,#111827);
    color:#fff;
    cursor:pointer;
    transition:.18s ease;
}

button:hover{
    border-color:rgba(255,255,255,.28);
    transform:translateY(-1px);
}

.top button{
    font-size:30px;
    height:44px;
}

.weekdays,
.calendar{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:6px;
}

.weekdays{
    height:24px;
    flex:none;
    text-align:center;
    color:rgba(255,255,255,.55);
    font-size:11px;
    align-items:center;
    letter-spacing:.5px;
}

.calendar{
    flex:1;
    min-height:0;
    grid-template-rows:repeat(6,minmax(0,1fr));
}

.day{
    position:relative;
    min-width:0;
    min-height:0;
    overflow:hidden;
    padding:8px;
    cursor:pointer;

    background:linear-gradient(
        145deg,
        #263248,
        #111827
    );

    border:1px solid rgba(255,255,255,.15);
    border-radius:18px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.day:hover{
    border-color:rgba(255,255,255,.3);
    transform:translateY(-1px);
}

.day.empty{
    background:transparent;
    border-color:transparent;
    cursor:default;
}

.day.future{
    opacity:.68;
}

.day.today{
    border-color:rgba(255,255,255,.65);
    box-shadow:0 0 22px rgba(255,255,255,.08);
}

.dayNumber{
    font-weight:700;
    font-size:15px;
    position:relative;
    z-index:2;
}

.taskCount{
    position:absolute;
    right:8px;
    top:8px;
    font-size:11px;
    opacity:.75;
}


.day::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:18px;
    opacity:var(--glow-opacity,0);
    background:
        radial-gradient(
            circle at 50% 105%,
            var(--day-color,#fff) 0%,
            color-mix(in srgb, var(--day-color,#fff) 45%, transparent) 38%,
            transparent 120%
        );
    filter:blur(1px);
}


.dayCounterPreview{
    position:absolute;
    right:8px;
    top:26px;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    font-size:11px;
    line-height:1.2;
}

.dayCounterPreview div{
    min-width:28px;
    text-align:right;
}

.dayCounterPreview b{
    white-space:nowrap;
}

.counterRow{
    display:flex;
    align-items:center;
    gap:6px;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.counterName{
    flex:1;
    min-width:70px;
    word-break:break-word;
    outline:none;
}

.counterControls{
    display:flex;
    align-items:center;
    gap:4px;
}

.counterBtn,
.counterDelete{
    width:34px;
    height:34px;
    padding:0;
    border-radius:10px;
}

.counterBtn{font-size:20px}

.counterValue{
    width:68px;
    height:34px;
    text-align:center;
    padding:0 6px;
    font-size:15px;
}

.counterAffix{
    width:48px;
    height:34px;
    padding:0 5px;
    text-align:center;
    font-size:12px;
}

.counterDelete{font-size:16px}


.counterAffixInputs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:8px;
}
.counterAffixInputs input{
    width:100%;
    box-sizing:border-box;
}
@media(max-width:520px){
    .counterAffixInputs{grid-template-columns:1fr;}
}

#addCounter{
    width:100%;
    height:42px;
    margin-top:10px;
}

.monthCounters{
    display:flex;
    flex-direction:column;
    gap:7px;
    flex:none;
    align-items:flex-start;
}

.monthCounter{
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    background:linear-gradient(145deg,#263248,#111827);
    font-size:14px;
    width:fit-content;
    max-width:100%;
}

.monthCounter span b{
    font-weight:800;
}

.actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    flex:none;
}

.actions button{
    height:42px;
    font-size:14px;
    font-weight:600;
    padding:0 8px;
}

dialog{
    border:1px solid rgba(255,255,255,.15);
    border-radius:20px;
    background:
        radial-gradient(circle at top, #16335c, transparent 55%),
        #101722;
    color:#fff;
    width:min(460px,calc(100% - 24px));
    padding:18px;
    box-shadow:0 20px 70px #000b;
}

dialog::backdrop{
    background:#000a;
    backdrop-filter:blur(4px);
}

.dialogHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.dialogHead h2{
    margin:0 0 12px;
    font-size:19px;
}

.dialogHead button{
    font-size:25px;
    background:transparent;
    border:0;
}

.task{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.task input[type=checkbox]{
    width:20px;
    height:20px;
    accent-color:#4ade80;
}

.taskName{
    flex:1;
    min-width:0;
    word-break:break-word;
    outline:none;
}

.delete{
    background:transparent;
    border:0;
    font-size:18px;
}

.primary{
    background:linear-gradient(145deg,#e8fff3,#b7f7d0);
    color:#0b1510;
    font-weight:700;
}

#addTask{
    width:100%;
    height:44px;
    margin-top:14px;
}

input{
    width:100%;
    height:44px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:12px;
    background:linear-gradient(145deg,#172235,#0d1420);
    color:#fff;
    padding:0 12px;
    font-size:16px;
    outline:none;
}

input:focus{
    border-color:rgba(255,255,255,.35);
}

.dialogButtons{
    display:flex;
    gap:8px;
    margin-top:14px;
}

.dialogButtons button{
    height:42px;
    flex:1;
}

@media(max-width:600px){
    .app{padding:7px;gap:5px}
    .calendar,.weekdays{gap:3px}
    .day{padding:6px;border-radius:13px}
    .day::after{border-radius:13px}
    .dayNumber{font-size:12px}
    .taskCount{font-size:9px;right:6px;top:6px}
    .top h1{font-size:18px}
    .actions button{font-size:12px;padding:0 5px}
    .counterAffix{width:40px}
    .counterValue{width:58px}
    .dayCounterPreview{left:auto;right:6px;top:24px;bottom:auto;font-size:8px;align-items:flex-end}
    .counterControls{gap:3px}
    .counterBtn,.counterDelete{width:31px;height:31px}
    .counterValue{width:58px;height:31px}
}


/* Telegram Mini App */
body{
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--tg-theme-bg-color, transparent),
               radial-gradient(circle at top, #16335c, transparent 40%),
               radial-gradient(circle at bottom, #06452d, transparent 35%);
}
.app{
    padding-top:max(12px, env(safe-area-inset-top));
    padding-bottom:max(12px, env(safe-area-inset-bottom));
}
dialog{
    color:#fff;
}
dialog::backdrop{
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(4px);
}