:root {
    --bg:               #1a2e1f;
    --bg-elevated:      #243d2b;
    --surface:          #2d4a35;
    --accent:           #d4a04a;
    --accent-active:    #b88533;
    --text:             #e8e6dc;
    --text-muted:       #8fa994;
    --text-dim:         #5d7563;
    --border:           rgba(232, 230, 220, 0.08);
    --success:          #88b06a;
    --error:            #d97757;
    --warning:          #d4a04a;

    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  24px;
    --s-6:  32px;
    --s-7:  48px;

    --r-sm:   6px;
    --r-md:   12px;
    --r-lg:   20px;
    --r-full: 9999px;

    --fs-xs:   11px;
    --fs-sm:   13px;
    --fs-base: 15px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;

    --nav-h:       56px;
    --header-h:    48px;
    --touch:       44px;
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-base);
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

.app {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ====== Page system ====== */

.page {
    position: absolute;
    top:    var(--safe-top);
    left:   0;
    right:  0;
    bottom: calc(var(--nav-h) + var(--safe-bottom));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page[hidden] { display: none; }

.page--rows {
    padding: var(--s-4) var(--s-4) var(--s-3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page__title {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--s-4);
    flex-shrink: 0;
}