:root {
    --arta-primary: #e82b38;
    --arta-primary-light: #fff1f2;
    --arta-bg: #f8fafc;
    --nav-height: 70px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
    font-family: 'Ubuntu', sans-serif !important;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
    display: inline-block; white-space: nowrap; -webkit-font-smoothing: antialiased;
}

html, body {
    margin: 0; padding: 0; 
    height: 100%; width: 100%; 
    overflow: hidden;
    background-color: #0f172a; 
    overscroll-behavior: none;
    position: fixed;
}

body { display: flex; justify-content: center; }

.app-shell {
    width: 100%; max-width: 430px; 
    height: 100%;
    background: var(--arta-bg);
    display: flex; 
    flex-direction: column;
    position: relative; 
    box-shadow: 0 0 100px rgba(0,0,0,0.5);
    z-index: 10;
}

header {
    flex-shrink: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px;
    background: white; 
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    border-bottom: 1px solid #f1f5f9; 
    z-index: 50;
}

#main-container {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    background: var(--arta-bg);
}

.scroll-content {
    height: 100%; 
    overflow-y: auto; 
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; 
    padding: 20px 20px 100px;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.nav-bottom {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(15px);
    padding: 12px 0 calc(12px + var(--safe-bottom));
    border-top: 1px solid #f1f5f9; 
    display: flex; 
    justify-content: space-around;
    z-index: 100;
    height: calc(var(--nav-height) + var(--safe-bottom));
}

.fab-container {
    position: absolute; 
    bottom: calc(var(--nav-height) + var(--safe-bottom) - 30px);
    left: 0; right: 0; 
    display: flex; 
    justify-content: center;
    pointer-events: none; 
    z-index: 200;
}

.fab-btn {
    pointer-events: auto; 
    background: var(--arta-primary); 
    color: white;
    width: 60px; height: 60px; 
    border-radius: 99px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 4px solid white; 
    box-shadow: 0 8px 25px rgba(232, 43, 56, 0.4);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.nav-item {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    color: #cbd5e1; 
    font-size: 10px; 
    font-weight: 700;
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    cursor: pointer;
    width: 80px; 
    justify-content: center;
    text-decoration: none;
}
.nav-item.active { color: var(--arta-primary); }

.bento-card {
    background: white; border-radius: 24px; padding: 18px;
    border: 1px solid #f1f5f9; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
}

.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px); z-index: 1000; display: none;
    opacity: 0; transition: opacity 0.2s;
}

.bottom-sheet {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: white; border-radius: 32px 32px 0 0;
    padding: 24px 24px calc(32px + var(--safe-bottom));
    transform: translateY(100%); 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 90%; 
    overflow-y: auto;
}

body.modal-active .modal-overlay { display: block; opacity: 1; }
body.modal-active .bottom-sheet { transform: translateY(0); }

.confirm-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px); z-index: 2000; display: none;
    align-items: center; justify-content: center; opacity: 0;
    transition: opacity 0.2s;
}

#confirm-dialog {
    width: 85%; max-width: 340px; background: white;
    border-radius: 32px; padding: 32px 24px; text-align: center;
    transform: scale(0.85); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.confirm-active .confirm-overlay { display: flex; opacity: 1; }
body.confirm-active #confirm-dialog { transform: scale(1); }

.btn-primary { 
    background: var(--arta-primary); color: white; border: none; 
    border-radius: 16px; font-weight: 700; cursor: pointer; padding: 14px 20px;
}

.input-field { 
    width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; 
    border-radius: 16px; padding: 14px 16px; outline: none; font-size: 14px;
}

#app-loader {
    position: fixed; inset: 0; background: white; z-index: 3000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.footer-link {
    color: initial;
}