@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg-body: #0f1115;
    --bg-card: #16181d;
    --bg-hover: #1f232b;
    --bg-dropdown: #252932;
    --bg-toast: #20232a;
    --text-primary: #ffffff;
    --text-secondary: #8b9bb4;
    --text-dim: #555555;
    --accent: #3b82f6;
    --success: #10b981;
    --danger: #ef4444;
    --input-focus: #2a2e37;
    --border: #2a2e37;
    --backdrop: rgba(0,0,0,0.7);
    
    --time-today: #ffffff;
    --time-tomorrow: #60a5fa;
    --time-yesterday: #f87171;
    
    --header-height: 60px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

/* HEADER & BRAND */
header { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--header-height); margin-bottom: 24px; flex-shrink: 0; }
.brand-container { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.logo-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.2s; text-decoration: none; }
.logo-btn:hover { opacity: 0.8; }
.apps-icon { width: 28px; height: 28px; fill: var(--accent); transition: fill 0.2s; }
h1 { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0; cursor: default; user-select: none; letter-spacing: -0.5px; line-height: 1; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-track { background: var(--bg-body); }

/* --- GLOBAL TIME TOOL SPECIFIC FIXES --- */

/* CARD STYLES */
.row-card {
    display: flex; flex-direction: column; 
    border-bottom: 1px solid var(--border); 
    padding: 16px 0; 
    transition: all 0.3s ease; 
    
    /* Дефолт для десктопа */
    border-left: 3px solid transparent; 
    padding-left: 12px; 
    margin-left: -15px; 
}
.row-card:last-child { border-bottom: none; }
.row-card.is-reference { 
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%); 
    border-left-color: var(--accent); 
}

/* MOBILE CARD FIXES (PADDING & BORDER) */
@media (max-width: 600px) {
    .row-card { 
        /* Возвращаем padding, чтобы текст не лип к синей полоске */
        padding-left: 16px !important; 
        
        /* Компенсируем ширину, чтобы не было скролла, но бордер был с краю */
        margin-left: -16px !important; 
        width: calc(100% + 32px) !important;
        padding-right: 16px !important;
    }
}

/* TIME & ALIGNMENT */
.clock-group { 
    display: flex; align-items: center; gap: 1px; 
    font-size: 28px; font-weight: 700; 
    font-variant-numeric: tabular-nums; 
    transition: color 0.3s; color: var(--time-today); 
    
    /* Отодвигаем время чуть правее от бейджа с часами (-6h) */
    margin-left: 8px; 
    /* Отодвигаем крестик удаления чуть дальше от времени */
    margin-right: 4px;
}

/* DROPDOWN ANIMATIONS (MOBILE SHEET) */
#globalDropdown {
    /* Плавная анимация появления/исчезновения */
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
}

/* Ручка для свайпа на мобильном */
.sheet-handle {
    width: 36px; height: 4px; 
    background: #444; border-radius: 2px;
    margin: 0 auto 12px auto;
    display: none; /* Desktop hidden */
}

@media (max-width: 600px) {
    .sheet-handle { display: block; }
}