[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

/* ============ DARK BLUE THEME COLORS ============ */
:root {
    --bg-primary: #0a1628;
    --bg-card: #121f36;
    --bg-input: #1a2940;
    --bg-label: #1e3a5f;
    --border: #2a4a6b;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-label: #cbd5e1;
}

/* ============ BASE ============ */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overscroll-behavior-y: contain;
    overscroll-behavior-x: contain;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@font-face {
    font-family: 'fanta01';
    src: url('Fanta-Condensed-Web.ttf');
}

.fanta_font {
    font-family: 'fanta01';
}

/* ============ FORM CONTAINER ============ */
.container {
    max-width: 600px;
    padding: 0 16px 40px 16px;
}

/* ============ PAGE HEADER ============ */
.page-header {
    text-align: center;
    padding: 16px 0 12px 0;
}
.page-header h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* ============ FORM FIELD - MOBILE FIRST (stacked) ============ */
.field-group {
    margin-bottom: 14px;
}
.field-label {
    display: block;
    background: var(--bg-label);
    color: var(--text-label);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
}
.field-input {
    display: block;
    width: 100%;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.field-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}
.field-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}
.field-input[readonly] {
    color: var(--text-secondary);
    background: var(--bg-card);
}

/* File input */
.field-input[type="file"] {
    font-size: 13px;
    padding: 8px 10px;
    cursor: pointer;
}
.field-input[type="file"]::-webkit-file-upload-button {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-right: 10px;
    cursor: pointer;
}

/* ============ IMAGE PREVIEW ============ */
.img-preview {
    text-align: center;
    margin-bottom: 14px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: 6px;
    border: 1px dashed var(--border);
}
.img-preview img {
    max-width: 100%;
    max-height: 160px;
    border-radius: 6px;
}
.img-preview .timestamp-text {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 4px;
}

/* ============ DUAL UPLOAD / CAMERA BUTTONS ============ */
.field-dual-btn {
    display: flex;
    gap: 0;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-top: none;
}
.field-dual-btn .btn-upload,
.field-dual-btn .btn-cam {
    flex: 1;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-align: center;
    color: #fff;
    -webkit-appearance: none;
}
.field-dual-btn .btn-upload {
    background: var(--accent-green);
}
.field-dual-btn .btn-upload:active {
    background: #059669;
}
.field-dual-btn .btn-cam {
    background: var(--accent);
    border-left: 1px solid rgba(255,255,255,0.15);
}
.field-dual-btn .btn-cam:active {
    background: var(--accent-hover);
}

/* ============ CAMERA BUTTON (selfie only) ============ */
.btn-camera {
    display: block;
    width: 100%;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 12px;
    border: none;
    border-radius: 0 0 6px 6px;
    cursor: pointer;
    text-align: center;
    -webkit-appearance: none;
}
.btn-camera:active {
    background: var(--accent-hover);
}

/* ============ DATE FILTER (DB page) ============ */
.date-filter {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 14px;
}
.date-filter-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-label);
    margin-bottom: 10px;
}
.date-filter-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.date-filter-field {
    flex: 1;
    min-width: 120px;
}
.date-filter-field label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.date-filter-field input[type="date"] {
    width: 100%;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.date-filter-field input[type="date"]:focus {
    border-color: var(--accent);
}
.date-filter-btns {
    display: flex;
    gap: 6px;
}
.date-filter-btns .btn-filter {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
}
.date-filter-btns .btn-filter:active {
    background: var(--accent-hover);
}
.date-filter-btns .btn-filter-clear {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
}
.date-filter-btns .btn-filter-clear:active {
    background: var(--bg-label);
}

/* ============ ACTION BUTTONS ============ */
.btn-row {
    display: flex;
    gap: 10px;
    padding: 10px 0 30px 0;
}
.btn-save {
    flex: 1;
    background: var(--accent-green);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    -webkit-appearance: none;
}
.btn-save:active {
    background: #059669;
}
.btn-new {
    flex: 1;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    -webkit-appearance: none;
}
.btn-new:active {
    background: var(--bg-label);
}

/* ============ LOADING OVERLAY ============ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 22, 40, 0.85);
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.loading-overlay img {
    width: 80px;
}
.loading-overlay .loading-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 12px;
}

/* ============ CAMERA MODAL ============ */
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.modal-header {
    border-bottom: 1px solid var(--border);
}
.modal-header .modal-title {
    font-size: 16px;
}
.modal-header .close {
    color: var(--text-primary);
}
.modal-footer {
    border-top: 1px solid var(--border);
    padding: 10px;
}
.modal-footer .btn {
    flex: 1;
}
.modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ============ DB PAGE - DESKTOP TABLE ============ */
.desktop-table {
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 8px;
    overflow: hidden;
}
.desktop-table thead th {
    background: var(--bg-label);
    color: var(--text-label);
    border-color: var(--border);
    font-size: 13px;
    padding: 10px 8px;
}
.desktop-table tbody td,
.desktop-table tbody th {
    border-color: var(--border);
    vertical-align: middle;
    font-size: 13px;
    padding: 8px;
}

/* ============ DB PAGE - MOBILE CARDS ============ */
.shop-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}
.shop-card .shop-card-num {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 2px;
}
.shop-card .shop-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
}
.shop-card .shop-card-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.shop-card .shop-card-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.shop-card .shop-card-btns .btn-card {
    flex: 1 1 auto;
    min-width: 55px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 6px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    color: #fff;
}
.btn-card-green { background: var(--accent-green); }
.btn-card-green:active { background: #059669; }
.btn-card-blue { background: var(--accent); }
.btn-card-blue:active { background: var(--accent-hover); }
.btn-card-outline {
    background: transparent;
    border: 1px solid var(--text-secondary) !important;
    color: var(--text-primary) !important;
}
.btn-card-outline:active { background: var(--bg-input); }

/* ============ RESPONSIVE TOGGLE ============ */
@media (max-width: 767px) {
    .desktop-table {
        display: none !important;
    }
    .mobile-cards {
        display: block !important;
    }
}
@media (min-width: 768px) {
    .desktop-table {
        display: table !important;
    }
    .mobile-cards {
        display: none !important;
    }
}

/* ============ LEGACY (keep for other pages) ============ */
.ful_div {
    width: 1080px;
    height: 1920px;
    position: absolute;
    margin-left: -10px;
    margin-top: -10px;
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
}
    .loader::before,
    .loader::after {
        content: "";
        grid-area: 1/1;
        --c: no-repeat radial-gradient(farthest-side,#ffffff 92%,#0000);
        background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
        background-size: 12px 12px;
        animation: l12 1s infinite;
    }
    .loader::before {
        margin: 4px;
        filter: hue-rotate(45deg);
        background-size: 8px 8px;
        animation-timing-function: linear;
    }

@keyframes l12 {
    100% { transform: rotate(.5turn); }
}

.button-5 {
    align-items: center;
    background-clip: padding-box;
    background-color: var(--accent);
    border: 1px solid transparent;
    border-radius: .25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 30px;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    min-height: 3rem;
    padding: 5px;
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: 50px;
}
    .button-5:hover,
    .button-5:focus { background-color: var(--accent-hover); box-shadow: rgba(0,0,0,0.1) 0 4px 12px; }
    .button-5:hover { transform: translateY(-1px); }
    .button-5:active { background-color: #1d4ed8; box-shadow: rgba(0,0,0,.06) 0 2px 4px; transform: translateY(0); }

.img01 { position:absolute; width:10%; top:0; left:100; animation: fall 15s linear infinite; animation-delay:-1s; }
.img02 { position:absolute; width:9%;  top:0; left:190; animation: fall_t 18s linear infinite; }
.img03 { position:absolute; width:11%; top:0; left:840; animation: fall_t 12s linear infinite; animation-delay:-1s; }
.img04 { position:absolute; width:11%; top:0; left:340; animation: fall_t 16s linear infinite; animation-delay:-1s; }
.img05 { position:absolute; width:11%; top:0; left:540; animation: fall 16s linear infinite; animation-delay:-8s; }

@keyframes fall {
    0%   { top:-5%;  transform: translateX(20px) rotate(0deg); }
    20%  { transform: translateX(-20px) rotate(90deg); }
    40%  { transform: translateX(-20px) rotate(180deg); }
    60%  { transform: translateX(-20px) rotate(300deg); }
    80%  { transform: translateX(-20px) rotate(420deg); }
    100% { top:110%; transform: translateX(-20px) rotate(500deg); }
}
@keyframes fall_t {
    0%   { top:-5%;  transform:rotate(0deg); }
    100% { top:150%; transform:rotate(900deg); }
}