:root{
    --bg:#f3f6fb;
    --surface:#fff;
    --surface-2:#f7f9fc;
    --text:#172033;
    --muted:#6b7487;
    --border:#e5eaf2;
    --blue:#1c1;
    --green:#159b72;
    --orange:#f08a35;
    --purple:#7756df;
    --pink:#d75182;
    --shadow:0 12px 35px rgba(35,51,87,.07);
    --radius:18px
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'DM Sans',sans-serif;
    font-size:16px;
    line-height:1.5;
    min-height:100vh
}
.ambient{
    position:fixed;
    border-radius:50%;
    filter:blur(80px);
    opacity:.15;
    pointer-events:none
}
.ambient-one{
    width:380px;
    height:380px;
    background:#2c6bed;
    top:-160px;
    right:10%
}
.ambient-two{
    width:300px;
    height:300px;
    background:#8f64f4;
    bottom:-170px;
    left:8%
}
.topbar{
    height:92px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
    display:grid;
    grid-template-columns:300px 1fr auto;
    align-items:center;
    gap:30px;
    padding:0 38px;
    position:sticky;
    top:0;
    z-index:20
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--text)
}
.brand-mark{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(145deg,#2c2,#181);
    color:#fff;
    font:800 21px Manrope;
    box-shadow:0 8px 18px rgba(44,107,237,.25)
}
.brand-mark img{
    height:24px
}
.brand strong,.brand small{
    display:block
}
.brand strong{
    font:800 18px Manrope
}
.brand small{
    font-size:12px;
    color:var(--muted);
    margin-top:-2px
}
.ad{
    background:linear-gradient(135deg,var(--surface-2),#fff);
    color:#97a0b3;
    display:flex;
    align-items:center;
    justify-content:center
}
.ad span{
    font-size:10px;
    letter-spacing:.14em
}
.ad strong{
    font-size:12px
}
.ad-header{
    width:468px;
    height:60px;
    justify-self:center;
    gap:12px
}
.header-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.live-clock{
    font:700 14px Manrope;
    color:var(--muted)
}
.icon-button,.refresh-button,.text-button,.primary-button,.secondary-button,.password-output button{
    font:600 14px 'DM Sans';
    cursor:pointer;
    border:0
}
.icon-button{
    width:40px;
    height:40px;
    border-radius:12px;
    background:var(--surface-2);
    color:var(--text);
    font-size:19px
}
.page-shell{
    max-width:1520px;
    margin:0 auto;
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:36px;
    padding:42px 38px 28px
}
.sidebar{
    position:sticky;
    top:134px;
    height:max-content
}
.eyebrow{
    font:700 12px Manrope;
    letter-spacing:.1em;
    color:var(--blue)
}
.welcome h1{
    font:800 clamp(27px,2.3vw,39px)/1.12 Manrope;
    margin:12px 0 16px;
    letter-spacing:-.04em
}
.welcome h1 em{
    font-style:normal;
    color:var(--blue)
}
.welcome p{
    color:var(--muted);
    margin:0 0 22px
}
.status{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    color:var(--muted)
}
.status i,.live-badge i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#28b783;
    box-shadow:0 0 0 4px rgba(40,183,131,.12)
}
.ad-sidebar{
    height:250px;
    margin:30px 0 22px;
    flex-direction:column;
    gap:7px
}
.ad-sidebar strong{
    font-size:18px;
    color:#7f899c
}
.ad-sidebar small{
    font-size:12px
}
.quick-nav{
    border-top:1px solid var(--border)
}
.quick-nav a{
    display:flex;
    justify-content:space-between;
    padding:14px 4px;
    border-bottom:1px solid var(--border);
    text-decoration:none;
    color:var(--muted);
    font-weight:600;
    font-size:14px
}
.quick-nav a:hover{
    color:var(--blue)
}
.privacy-note{
    font-size:12px;
    color:#8b94a6;
    margin-top:18px
}
.dashboard-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px
}
.dashboard-heading h2{
    font:800 clamp(25px,2vw,34px) Manrope;
    margin:5px 0 0;
    letter-spacing:-.035em
}
.refresh-button{
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    padding:11px 15px;
    border-radius:12px;
    box-shadow:0 5px 14px rgba(30,40,70,.04)
}
.section-label{
    display:flex;
    align-items:center;
    gap:14px;
    margin:26px 0 13px
}
.section-label span{
    font:700 13px Manrope;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--muted);
    white-space:nowrap
}
.section-label i{
    height:1px;
    background:var(--border);
    width:100%
}
.card-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}
.card-grid:has(.weather-card){
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease
}
.card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(35,51,87,.1)
}
.card:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:var(--accent,var(--blue));
    opacity:.9
}
.accent-blue{
    --accent:var(--blue)
}
.accent-green{
    --accent:var(--green)
}
.accent-orange{
    --accent:var(--orange)
}
.accent-purple{
    --accent:var(--purple)
}
.accent-pink{
    --accent:var(--pink)
}
.card-top{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.card-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:color-mix(in srgb,var(--accent,var(--blue)) 12%,transparent);
    color:var(--accent,var(--blue));
    font:700 19px Manrope
}
.card-kicker{
    font:700 11px Manrope;
    letter-spacing:.12em;
    color:var(--muted);
    margin:18px 0 5px
}
.card h3{
    font:700 19px Manrope;
    margin:0
}
.big-number{
    font-size:clamp(26px,2.3vw,35px)!important;
    letter-spacing:-.04em
}
.chip,.live-badge{
    font:700 10px Manrope;
    letter-spacing:.07em;
    padding:5px 8px;
    border-radius:7px;
    background:var(--surface-2);
    color:var(--muted)
}
.live-badge{
    color:var(--green);
    display:flex;
    gap:6px;
    align-items:center
}
.live-badge i{
    width:5px;
    height:5px;
    box-shadow:none
}
.chip.up{
    color:#07875e;
    background:#e8f8f2
}
.chip.down{
    color:#cc4669;
    background:#fff0f4
}
.split-row,.currency-list,.weather-stats{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-top:20px;
    padding-top:14px;
    border-top:1px solid var(--border);
    font-size:14px
}
.split-row span,.currency-list span,.weather-stats span{
    color:var(--muted)
}
.split-row strong,.currency-list strong,.weather-stats strong{
    color:var(--text);
    margin-left:5px
}
.card-foot{
    font-size:12px;
    color:#929aab;
    margin:14px 0 0
}
.weather-main{
    display:flex;
    gap:17px;
    align-items:center
}
.weather-main h3{
    font-size:44px
}
.weather-main strong,.weather-main span{
    display:block
}
.weather-main strong{
    font-size:14px
}
.weather-main span{
    font-size:12px;
    color:var(--muted);
    margin-top:2px
}
.text-button{
    background:none;
    color:var(--blue);
    padding:5px
}
.date-copy{
    font-size:15px;
    margin:7px 0;
    color:var(--muted)
}
form{
    margin-top:14px
}
.field{
    display:block;
    flex:1
}
.field span{
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:5px
}
.field input{
    width:100%;
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
    border-radius:10px;
    padding:10px 11px;
    font:500 14px 'DM Sans';
    outline:none
}
.field input:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(44,107,237,.1)
}
.primary-button{
    background:var(--blue);
    color:#fff;
    width:100%;
    padding:10px;
    border-radius:10px;
    margin-top:9px
}
.result-line{
    font-size:12px;
    color:var(--muted);
    min-height:36px;
    margin:12px 0 0
}
.tools-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.tool-card:before{
    display:none
}
.tool-card h3{
    margin-bottom:15px
}
.inline-fields{
    display:flex;
    gap:10px
}
.tool-result{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--surface-2);
    border-radius:10px;
    padding:11px 12px;
    margin-top:13px
}
.tool-result span{
    font-size:12px;
    color:var(--muted)
}
.tool-result strong{
    font-size:14px
}
.soft-blue{
    background:#edf3ff;
    color:#2c6bed
}
.soft-green{
    background:#e9f8f3;
    color:#159b72
}
.soft-orange{
    background:#fff2e8;
    color:#ef8731
}
.soft-purple{
    background:#f1edff;
    color:#7756df
}
.soft-pink{
    background:#fff0f5;
    color:#d75182
}
.soft-teal{
    background:#e8f8f8;
    color:#148b91
}
.password-output{
    display:flex;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden
}
.password-output code{
    padding:10px;
    overflow:hidden;
    white-space:nowrap;
    flex:1;
    color:var(--text)
}
.password-output button{
    background:transparent;
    color:var(--blue);
    padding:0 10px
}
.password-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
    gap:10px
}
.password-actions label{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    color:var(--muted)
}
.password-actions input{
    width:70px
}
.secondary-button{
    background:var(--surface-2);
    color:var(--text);
    padding:8px 10px;
    border-radius:9px
}
footer{
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#8d95a5;
    font-size:12px;
    border-top:1px solid var(--border);
    padding:26px 2px 0;
    margin-top:34px
}
.toast{
    position:fixed;
    right:25px;
    bottom:25px;
    padding:12px 16px;
    background:#172033;
    color:#fff;
    border-radius:11px;
    box-shadow:var(--shadow);
    font-size:14px;
    transform:translateY(20px);
    opacity:0;
    pointer-events:none;
    transition:.25s;
    z-index:50
}
.toast.show{
    transform:none;
    opacity:1
}
.skeleton-text{
    animation:pulse 1.4s infinite
}
@keyframes pulse{
    50%{
        opacity:.45
    }
}
body.dark{
    --bg:#0c1120;
    --surface:#141b2c;
    --surface-2:#1a2336;
    --text:#edf2ff;
    --muted:#99a5bb;
    --border:#253149;
    --shadow:0 15px 40px rgba(0,0,0,.18)
}
body.dark .topbar{
    background:rgba(12,17,32,.88)
}
body.dark .ad{
    background:linear-gradient(135deg,#141b2c,#111827);
    border-color:#33405a
}
body.dark .soft-blue,body.dark .soft-green,body.dark .soft-orange,body.dark .soft-purple,body.dark .soft-pink,body.dark .soft-teal{
    background:#202b42
}
@media(max-width:1120px){
    .topbar{
        grid-template-columns:auto 1fr
    }
    .ad-header{
        display:none
    }
    .page-shell{
        grid-template-columns:240px 1fr
    }
    .card-grid:has(.weather-card),.tools-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:780px){
    .topbar{
        height:76px;
        padding:0 18px
    }
    .brand small{
        display:none
    }
    .page-shell{
        display:block;
        padding:24px 16px
    }
    .sidebar{
        position:static
    }
    .welcome h1{
        font-size:30px
    }
    .welcome p{
        max-width:500px
    }
    .ad-sidebar,.quick-nav,.privacy-note{
        display:none
    }
    .dashboard{
        margin-top:28px
    }
    .dashboard-heading{
        align-items:flex-end
    }
    .card-grid,.card-grid:has(.weather-card),.tools-grid{
        grid-template-columns:1fr
    }
    .card{
        padding:20px
    }
    .live-clock{
        display:none
    }
    footer{
        flex-direction:column
    }
    .refresh-button span{
        display:none
    }
}
@media(max-width:420px){
    .header-actions{
        gap:6px
    }
    .dashboard-heading h2{
        font-size:23px
    }
    .card-grid{
        gap:12px
    }
    .inline-fields{
        flex-direction:column
    }
}
@media(prefers-reduced-motion:reduce){
    *{
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important
    }
}
.result,.resulter {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 320px;
    padding: 15px;
    background: #ffffa0;
    border: 1px solid #ffff60;
    border-bottom: 3px solid #ffff60;
    border-radius: var(--radius);
    -webkit-border-radius: var(--radius);
    -moz-border-radius: var(--radius);
    z-index: 999999999
}