* {
    font-family: "Inter", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: white;
    background: #0e1116;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 45px 45px;
    mask-image: radial-gradient(circle, black 55%, transparent 100%);
    pointer-events: none;
}

.glass {
    background: #171b22;
    border: 1px solid #2a2f3a;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.widget {
    transition: .35s;
}
.widget:hover{
    transform:translateY(-2px);

    border-color:#4f8cff;

    box-shadow:
    0 16px 40px rgba(0,0,0,.32);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 20px;
}

.todo-done span {
    text-decoration: line-through;
    opacity: .45;
}

.timer-number {
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

button {
    transition: .25s;
}

button:active {
    transform: scale(.96);
}

.panel{
    border-radius:16px;
}

.hero-icon{
    width:9rem;
    height:9rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#171b22;
    border:1px solid #2a2f3a;
}

.greeting{
    margin-bottom:12px;
    color:#8b949e;
    text-transform:uppercase;
    letter-spacing:.32em;
    font-size:.75rem;
    font-weight:600;
}

.clock{
    font-size:4.5rem;
    font-weight:700;
    line-height:1;
    color:#f5f7fa;
}

.date{
    margin-top:12px;
    color:#9aa4b2;
    font-size:1.05rem;
}

.widget-title{
    font-size:1.15rem;
    font-weight:600;
    color:#f3f4f6;
}

.muted{
    color:#8b949e;
    font-size:.9rem;
}

.task-input{
    padding:12px 16px;
    border-radius:12px;
    border:1px solid #2a2f3a;
    background:#11161d;
    color:#f3f4f6;
    outline:none;
    transition:.18s;
}

.task-input:focus{
    border-color:#4f8cff;
}

.add-task-btn{
    padding:0 20px;
    border-radius:12px;
    background:#4f46e5;
    transition:.18s;
}

.add-task-btn:hover{
    background:#6366f1;
}

.timer-btn{
    padding:12px 0;
    border-radius:12px;
    font-weight:600;
    transition:.18s;
}

.start-btn{
    background:#16a34a;
}

.start-btn:hover{
    background:#22c55e;
}

.pause-btn{
    background:#d97706;
}

.pause-btn:hover{
    background:#f59e0b;
}

.reset-btn{
    background:#dc2626;
}

.reset-btn:hover{
    background:#ef4444;
}

.command-palette{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:10vh;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(6px);
    z-index:1000;
}

.hidden{
    display:none;
}

.palette-box{
    width:min(700px,90vw);
    background:#171b22;
    border:1px solid #2a2f3a;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.palette-input{
    width:100%;
    padding:18px 22px;
    background:transparent;
    color:#fff;
    border:none;
    outline:none;
    font-size:1rem;
}

#commandResults{
    border-top:1px solid #2a2f3a;
    max-height:320px;
    overflow-y:auto;
}

.command-item{
    padding:15px 22px;
    cursor:pointer;
    transition:.15s;
}

.command-item:hover{
    background:#202631;
}

.notes-area{
    width:100%;
    height:220px;
    resize:none;
    padding:16px;
    background:#11161d;
    border:1px solid #2a2f3a;
    border-radius:12px;
    color:#fff;
    outline:none;
    transition:.2s;
}

.notes-area:focus{
    border-color:#4f8cff;
}

.notes-area::placeholder{
    color:#6b7280;
}

.weather-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:180px;
    padding:20px;
    border-radius:16px;
    background:#171b22;
    border:1px solid #2a2f3a;
}

.weather-icon{
    font-size:48px;
    color:#60a5fa;
    margin-bottom:12px;
}

#temperature{
    font-size:2rem;
    font-weight:700;
    margin-bottom:4px;
}

#weatherCondition,
#weatherLocation{
    text-align:center;
}