:root {
    --bg:#080b12;
    --card:#111722;
    --card2:#151c28;

    --text:#f6f7fa;
    --soft:#9aa4b3;
    --muted:#626d7d;

    --border:rgba(255,255,255,.075);

    --blue:#4c9cff;
    --blue2:#307bed;

    --orange:#ff9c3b;
    --red:#ff6973;

    --font:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        Inter,
        system-ui,
        sans-serif;
}

* {
    box-sizing:border-box;
}

html {
    background:var(--bg);
}

body {
    margin:0;

    min-height:100vh;

    color:var(--text);

    background:
        radial-gradient(
            circle at 16% -2%,
            rgba(48,111,223,.17),
            transparent 29%
        ),
        radial-gradient(
            circle at 100% 90%,
            rgba(255,125,42,.05),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #0a0e17,
            #06080d
        );

    font-family:var(--font);

    -webkit-font-smoothing:antialiased;
}

button,
input {
    font:inherit;
}

button {
    color:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

button,
input {
    outline:none;
}

.glow {
    position:fixed;

    pointer-events:none;

    filter:blur(90px);

    border-radius:50%;
}

.glow-blue {
    width:230px;
    height:230px;

    left:-120px;
    top:-100px;

    background:rgba(57,127,255,.12);
}

.glow-orange {
    width:190px;
    height:190px;

    right:-110px;
    bottom:50px;

    background:rgba(255,128,43,.07);
}


/* ==========================================================
   APP
========================================================== */

.app {
    position:relative;

    width:100%;
    max-width:540px;

    margin:auto;

    padding:
        calc(15px + env(safe-area-inset-top))
        16px
        calc(94px + env(safe-area-inset-bottom));
}


/* ==========================================================
   HEADER
========================================================== */

.header {
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-bottom:18px;
}

.brand {
    display:flex;

    align-items:center;

    gap:10px;
}

.logo {
    position:relative;

    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border-radius:14px;

    color:#68b3ff;

    border:
        1px solid
        rgba(72,151,255,.26);

    background:
        linear-gradient(
            145deg,
            rgba(48,110,220,.30),
            rgba(13,21,36,.75)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 10px 25px rgba(0,60,160,.12);
}

.logo span {
    font-size:22px;
    font-weight:800;

    letter-spacing:-.09em;
}

.logo i {
    position:absolute;

    right:8px;
    bottom:7px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--orange);
}

.brand strong,
.brand small {
    display:block;
}

.brand strong {
    font-size:17px;

    letter-spacing:-.025em;
}

.brand small {
    margin-top:1px;

    color:var(--muted);

    font-size:10px;
}

.round-btn {
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    padding:0;

    border-radius:13px;

    border:1px solid var(--border);

    background:
        rgba(255,255,255,.03);

    color:#b6bfcb;
}

.round-btn svg {
    width:19px;
    height:19px;
}


/* ==========================================================
   SCREEN
========================================================== */

.screen {
    display:none;
}

.screen.active {
    display:block;
}


/* ==========================================================
   FAVORITE
========================================================== */

.favorite {
    width:100%;

    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto
        auto;

    align-items:center;

    gap:10px;

    padding:12px;

    margin-bottom:11px;

    border-radius:19px;

    border:
        1px solid
        rgba(65,143,255,.18);

    text-align:left;

    background:
        radial-gradient(
            circle at 95% 0,
            rgba(67,137,255,.12),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(19,27,41,.92),
            rgba(10,14,22,.94)
        );

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.18);
}

.fuel-symbol {
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    border-radius:13px;

    background:#f6f7fa;

    color:#e34245;

    font-size:14px;

    font-weight:800;
}

.favorite-copy {
    min-width:0;
}

.favorite-name {
    display:flex;

    align-items:center;

    gap:4px;
}

.favorite-name strong {
    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:12px;
}

.favorite-name span {
    color:var(--orange);

    font-size:9px;
}

.favorite-copy small {
    display:block;

    margin-top:2px;

    color:var(--muted);

    font-size:9px;
}

.favorite-value {
    padding-left:10px;

    border-left:
        1px solid
        rgba(255,255,255,.075);
}

.favorite-value strong,
.favorite-value small {
    display:block;

    text-align:right;
}

.favorite-value strong {
    font-size:18px;

    letter-spacing:-.035em;
}

.favorite-value small {
    margin-top:1px;

    color:var(--muted);

    font-size:8px;
}

.chevron {
    width:16px;
    height:16px;

    color:#657183;
}


/* ==========================================================
   INPUTS
========================================================== */

.inputs {
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:9px;
}

.input-box {
    min-width:0;

    padding:
        13px 13px 14px;

    border-radius:21px;

    border:1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(21,28,41,.93),
            rgba(11,15,23,.94)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.025);
}

.input-head {
    display:flex;

    align-items:center;

    gap:7px;

    color:#8994a4;
}

.input-head label {
    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.045em;
}

.mini-icon {
    width:28px;
    height:28px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:#61acff;

    background:
        rgba(64,140,255,.08);
}

.mini-icon svg {
    width:16px;
    height:16px;
}

.input-value {
    display:flex;

    align-items:baseline;

    min-width:0;

    margin-top:11px;
}

.input-value input {
    width:100%;
    min-width:0;

    padding:0;

    border:0;

    color:white;

    background:transparent;

    caret-color:var(--blue);

    font-size:35px;

    line-height:1;

    font-weight:540;

    letter-spacing:-.05em;
}

.input-value input::placeholder {
    color:
        rgba(255,255,255,.12);
}

.input-value span {
    margin-left:4px;

    color:#788495;

    font-size:11px;
}


/* ==========================================================
   QUICK
========================================================== */

.quick {
    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:6px;

    margin-top:9px;
}

.quick button {
    min-height:36px;

    padding:0;

    border-radius:11px;

    border:1px solid var(--border);

    color:#929dad;

    background:
        rgba(255,255,255,.025);

    font-size:10px;
}

.quick button::after {
    content:" L";

    color:#626d7d;
}

.quick button.active {
    color:white;

    border-color:
        rgba(74,153,255,.42);

    background:
        rgba(64,139,255,.12);
}


/* ==========================================================
   TOTAL
========================================================== */

.total-card {
    margin-top:11px;

    padding:
        15px 17px 16px;

    border-radius:22px;

    border:
        1px solid
        rgba(65,140,255,.25);

    background:
        radial-gradient(
            circle at 0 0,
            rgba(49,117,240,.13),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #111a29,
            #0b1019
        );

    box-shadow:
        0 15px 42px
        rgba(0,0,0,.20);
}

.total-top {
    display:flex;

    align-items:center;
    justify-content:space-between;

    color:#7c8797;

    font-size:10px;
}

.bolt {
    width:29px;
    height:29px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:var(--orange);

    background:
        rgba(255,156,59,.05);
}

.bolt svg {
    width:16px;
    height:16px;
}

.total {
    margin-top:4px;

    font-size:52px;

    line-height:1;

    font-weight:590;

    letter-spacing:-.055em;

    white-space:nowrap;
}

.detail {
    margin-top:6px;

    color:#606d7e;

    font-size:9px;
}


/* ==========================================================
   SAVE
========================================================== */

.save-btn {
    width:100%;

    min-height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    margin-top:10px;

    border:0;

    border-radius:15px;

    color:white;

    background:
        linear-gradient(
            135deg,
            #2f79e8,
            #4897ff
        );

    box-shadow:
        0 10px 25px
        rgba(44,118,232,.18);

    font-size:12px;

    font-weight:650;
}

.save-btn svg {
    width:17px;
    height:17px;
}

.save-btn:disabled {
    opacity:.32;

    box-shadow:none;
}


/* ==========================================================
   PAGE TITLES
========================================================== */

.page-title {
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin:
        5px 1px 15px;
}

.page-title small,
.modal-title small {
    color:var(--blue);

    font-size:8px;

    font-weight:700;

    letter-spacing:.13em;
}

.page-title h2 {
    margin:
        2px 0 0;

    font-size:25px;

    letter-spacing:-.04em;
}

.add-btn {
    width:40px;
    height:40px;

    border:0;

    border-radius:13px;

    color:white;

    background:var(--blue);

    font-size:23px;
}

.text-btn {
    min-height:34px;

    padding:0 11px;

    border-radius:11px;

    border:1px solid var(--border);

    color:#717c8d;

    background:
        rgba(255,255,255,.025);

    font-size:9px;
}


/* ==========================================================
   LISTS
========================================================== */

.list {
    display:grid;

    gap:8px;
}

.tariff-card,
.history-card {
    padding:11px;

    border-radius:17px;

    border:1px solid var(--border);

    background:
        rgba(255,255,255,.027);
}


/* TARIFF */

.tariff-main {
    display:grid;

    grid-template-columns:
        39px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:9px;
}

.tariff-icon {
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    border-radius:12px;

    color:#5ea9ff;

    background:
        rgba(65,140,255,.08);

    font-size:14px;
}

.tariff-copy {
    min-width:0;
}

.tariff-copy strong,
.tariff-copy span {
    display:block;
}

.tariff-copy strong {
    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:11px;
}

.tariff-copy span {
    margin-top:2px;

    color:var(--muted);

    font-size:8px;
}

.tariff-price {
    text-align:right;
}

.tariff-price strong,
.tariff-price span {
    display:block;
}

.tariff-price strong {
    font-size:16px;
}

.tariff-price span {
    color:var(--muted);

    font-size:8px;
}

.tariff-actions {
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:6px;

    margin-top:9px;
}

.tariff-actions button {
    min-height:34px;

    border-radius:10px;

    border:1px solid var(--border);

    color:#7e8999;

    background:
        rgba(255,255,255,.02);

    font-size:9px;
}

.tariff-actions .use {
    color:#64adff;

    background:
        rgba(65,140,255,.05);
}


/* HISTORY */

.history-card {
    display:grid;

    grid-template-columns:
        40px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:9px;
}

.history-icon {
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border-radius:12px;

    color:#5faaff;

    background:
        rgba(64,139,255,.07);
}

.history-icon svg {
    width:19px;
    height:19px;
}

.history-copy {
    min-width:0;
}

.history-copy strong,
.history-copy span {
    display:block;
}

.history-copy strong {
    font-size:14px;
}

.history-copy span {
    margin-top:2px;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    color:var(--muted);

    font-size:8px;
}

.history-side {
    text-align:right;
}

.history-side time {
    display:block;

    color:#596475;

    font-size:7px;
}

.history-side button {
    margin-top:4px;

    padding:0;

    border:0;

    color:#8d5f67;

    background:none;

    font-size:8px;
}


/* ==========================================================
   EMPTY
========================================================== */

.empty {
    min-height:320px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;
}

.empty-icon {
    width:55px;
    height:55px;

    display:grid;
    place-items:center;

    margin-bottom:12px;

    border-radius:18px;

    color:#58a4fa;

    background:
        rgba(64,140,255,.06);
}

.empty-icon svg {
    width:25px;
    height:25px;
}

.empty strong {
    font-size:12px;
}

.empty span {
    margin-top:5px;

    color:var(--muted);

    font-size:9px;
}


/* ==========================================================
   NAVIGATION
========================================================== */

.nav {
    position:fixed;

    z-index:40;

    left:50%;

    bottom:
        calc(
            9px +
            env(safe-area-inset-bottom)
        );

    width:
        min(
            calc(100% - 20px),
            520px
        );

    transform:
        translateX(-50%);

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    padding:5px;

    border-radius:21px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(14,19,28,.88);

    backdrop-filter:
        blur(28px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(135%);

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.42);
}

.nav-btn {
    min-height:52px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:2px;

    border:0;

    border-radius:15px;

    color:#606b7b;

    background:transparent;

    font-size:8px;
}

.nav-btn svg {
    width:19px;
    height:19px;
}

.nav-btn.active {
    color:#5da8ff;

    background:
        rgba(68,143,255,.07);
}


/* ==========================================================
   MODAL
========================================================== */

.modal-bg {
    position:fixed;

    z-index:100;

    inset:0;

    display:none;

    align-items:flex-end;

    background:
        rgba(0,0,0,.60);

    backdrop-filter:blur(7px);
}

.modal-bg.show {
    display:flex;
}

.modal {
    width:100%;
    max-width:540px;

    margin:auto;

    padding:
        10px
        17px
        calc(
            18px +
            env(safe-area-inset-bottom)
        );

    border-radius:
        27px 27px 0 0;

    background:#111720;

    border-top:
        1px solid
        rgba(255,255,255,.09);
}

.handle {
    width:36px;
    height:4px;

    margin:
        0 auto 15px;

    border-radius:100px;

    background:
        rgba(255,255,255,.13);
}

.modal-title {
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-bottom:15px;
}

.modal-title h3 {
    margin:
        2px 0 0;

    font-size:20px;
}

.modal-title button {
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    border:0;

    border-radius:11px;

    color:#8490a0;

    background:
        rgba(255,255,255,.035);

    font-size:21px;
}

.form-field {
    display:block;

    margin-top:10px;

    color:#7f8a9a;

    font-size:9px;
}

.form-field > input,
.price-field input {
    width:100%;

    min-height:46px;

    margin-top:5px;

    padding:0 13px;

    border-radius:13px;

    border:1px solid var(--border);

    color:white;

    background:
        rgba(255,255,255,.03);

    font-size:14px;
}

.price-field {
    position:relative;
}

.price-field input {
    padding-right:48px;
}

.price-field i {
    position:absolute;

    right:13px;
    bottom:15px;

    color:var(--muted);

    font-style:normal;

    font-size:10px;
}

.fav-toggle {
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-top:11px;

    padding:12px;

    border-radius:13px;

    background:
        rgba(255,255,255,.025);
}

.fav-toggle strong,
.fav-toggle span {
    display:block;
}

.fav-toggle strong {
    font-size:10px;
}

.fav-toggle span {
    margin-top:2px;

    color:var(--muted);

    font-size:8px;
}

.fav-toggle input {
    width:20px;
    height:20px;
}

.modal .save-btn {
    margin-top:13px;
}

.delete-btn {
    display:none;

    width:100%;

    min-height:40px;

    margin-top:7px;

    border-radius:12px;

    border:
        1px solid
        rgba(255,105,115,.09);

    color:#bd6870;

    background:
        rgba(255,105,115,.03);

    font-size:9px;
}


/* ==========================================================
   TOAST
========================================================== */

.toast {
    position:fixed;

    z-index:200;

    left:50%;

    bottom:
        calc(
            82px +
            env(safe-area-inset-bottom)
        );

    max-width:
        calc(100% - 30px);

    transform:
        translate(-50%,15px);

    padding:
        10px 14px;

    border-radius:13px;

    opacity:0;

    pointer-events:none;

    color:white;

    background:
        rgba(27,33,43,.95);

    border:1px solid var(--border);

    backdrop-filter:blur(20px);

    font-size:9px;

    transition:.2s ease;
}

.toast.show {
    opacity:1;

    transform:
        translate(-50%,0);
}


/* ==========================================================
   SMALL SCREENS
========================================================== */

@media(max-width:350px) {

    .app {
        padding-left:12px;
        padding-right:12px;
    }

    .input-value input {
        font-size:30px;
    }

    .favorite {
        padding:10px;
        gap:7px;
    }

    .fuel-symbol {
        width:35px;
        height:35px;
    }

    .favorite-value strong {
        font-size:15px;
    }

    .total {
        font-size:46px;
    }

}