/**
 * MFA Vault - Estilos Principais
 * Design System com Light/Dark Mode
 */

/* ============================================
   CSS VARIABLES
============================================ */
:root {
    /* Light Mode (default) */
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #94A3B8;
    --accent-primary: #3B82F6;
    --accent-secondary: #6366F1;
    --accent-gradient: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --border: #E2E8F0;
    --border-light: #CBD5E1;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --glow-primary: 0 0 0 3px rgba(59,130,246,0.15);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* Dark Mode */
body.dark-mode {
    --bg-primary: #0B0F1A;
    --bg-secondary: #111827;
    --bg-tertiary: #1F2937;
    --text-primary: #F9FAFB;
    --text-secondary: #9CA3AF;
    --text-tertiary: #6B7280;
    --border: #1F2937;
    --border-light: #374151;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
    --glow-primary: 0 0 20px rgba(59,130,246,0.3);
}

/* ============================================
   BASE STYLES
============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
}

/* ============================================
   LOADING SCREEN
============================================ */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s, visibility 0.3s;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    text-align: center;
}

.loading-logo {
    width: 64px;
    height: 64px;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.loading-logo i {
    font-size: 32px;
    color: white;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-content p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================
   SIDEBAR
============================================ */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.3s;
}

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode .logo-icon {
    box-shadow: var(--glow-primary);
}

.logo-icon i {
    color: white;
    font-size: 20px;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 24px;
}

.nav-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 12px;
    margin-bottom: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--accent-gradient);
    color: white;
}

body.dark-mode .nav-item.active {
    box-shadow: var(--glow-primary);
}

.nav-item i {
    font-size: 20px;
}

.nav-item .badge {
    margin-left: auto;
    background: var(--accent-primary);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.nav-item.active .badge {
    background: rgba(255,255,255,0.2);
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
    position: relative;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.user-info:hover {
    background: var(--bg-tertiary);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 12px;
    color: var(--text-tertiary);
}

.user-menu-trigger {
    color: var(--text-tertiary);
    padding: 4px;
}

.user-menu {
    position: absolute;
    bottom: 100%;
    left: 16px;
    right: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
}

.user-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.user-menu-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.user-menu-item i {
    font-size: 18px;
}

/* ============================================
   MAIN CONTENT
============================================ */
.main-content {
    margin-left: 260px;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    z-index: 50;
}

body.dark-mode .topbar {
    background: rgba(11,15,26,0.9);
    backdrop-filter: blur(10px);
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 20px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    flex: 1;
    max-width: 400px;
    transition: all 0.2s;
}

.search-box:focus-within {
    border-color: var(--accent-primary);
    box-shadow: var(--glow-primary);
}

.search-box i {
    color: var(--text-tertiary);
    font-size: 18px;
}

.search-box input {
    border: none;
    background: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.search-box input::placeholder {
    color: var(--text-tertiary);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.action-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 20px;
    transition: all 0.2s;
}

.action-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

body.dark-mode .action-btn:hover {
    box-shadow: var(--glow-primary);
}

.add-btn {
    background: var(--accent-gradient);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
}

body.dark-mode .add-btn {
    box-shadow: var(--glow-primary);
}

.add-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   PAGE CONTENT
============================================ */
.page-content {
    padding: 32px;
}

.page-header {
    margin-bottom: 32px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 15px;
}

/* ============================================
   STATS CARDS
============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.stat-card:hover {
    border-color: var(--border-light);
}

.stat-card-header {
    margin-bottom: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-icon.blue {
    background: rgba(59,130,246,0.1);
    color: var(--accent-primary);
}

.stat-icon.green {
    background: rgba(16,185,129,0.1);
    color: var(--success);
}

.stat-icon.purple {
    background: rgba(99,102,241,0.1);
    color: var(--accent-secondary);
}

.stat-icon.orange {
    background: rgba(245,158,11,0.1);
    color: var(--warning);
}

body.dark-mode .stat-icon.blue { background: rgba(59,130,246,0.15); }
body.dark-mode .stat-icon.green { background: rgba(16,185,129,0.15); }
body.dark-mode .stat-icon.purple { background: rgba(99,102,241,0.15); }
body.dark-mode .stat-icon.orange { background: rgba(245,158,11,0.15); }

.stat-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ============================================
   SECTION HEADER & FILTERS
============================================ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
}

.filter-tabs {
    display: flex;
    gap: 8px;
}

.filter-tab {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.filter-tab:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
}

body.dark-mode .filter-tab.active {
    box-shadow: var(--glow-primary);
}

/* ============================================
   TOKEN CARDS
============================================ */
.tokens-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.token-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border);
    transition: all 0.3s;
}

.token-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

body.dark-mode .token-card:hover {
    box-shadow: var(--shadow-lg), var(--glow-primary);
}

.token-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.token-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.token-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* Token Logo Styles */
.token-logo.default { background: var(--accent-gradient); }

/* Cloud Providers */
.token-logo.aws {
    background: #232F3E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF9900'%3E%3Cpath d='M6.763 10.036c0 .296.032.535.088.71.064.176.144.368.256.576.04.063.056.127.056.183 0 .08-.048.16-.152.24l-.503.335a.383.383 0 0 1-.208.072c-.08 0-.16-.04-.239-.112a2.47 2.47 0 0 1-.287-.375 6.18 6.18 0 0 1-.248-.471c-.622.734-1.405 1.101-2.347 1.101-.67 0-1.205-.191-1.596-.574-.391-.384-.59-.894-.59-1.533 0-.678.239-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583c0-.607-.127-1.03-.375-1.277-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103-.296.072-.583.16-.863.272a2.287 2.287 0 0 1-.28.104.488.488 0 0 1-.127.023c-.112 0-.168-.08-.168-.247v-.391c0-.128.016-.224.056-.28a.597.597 0 0 1 .224-.167c.28-.144.614-.264 1.005-.36a4.84 4.84 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647.439.43.662 1.085.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144.287-.096.543-.271.758-.51.128-.152.224-.32.272-.512.047-.191.08-.423.08-.694v-.335a6.66 6.66 0 0 0-.735-.136 6.02 6.02 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296zm6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311l-1.876-6.176a1.349 1.349 0 0 1-.064-.303c0-.127.064-.199.191-.199h.783c.152 0 .256.024.312.08.064.048.112.16.16.311l1.342 5.284 1.245-5.284c.04-.16.088-.263.152-.311a.549.549 0 0 1 .32-.08h.638c.152 0 .256.024.32.08.063.048.12.16.151.311l1.261 5.348 1.381-5.348c.048-.16.104-.263.16-.311a.52.52 0 0 1 .311-.08h.743c.127 0 .2.064.2.199 0 .04-.009.08-.017.128a1.137 1.137 0 0 1-.056.183l-1.924 6.176c-.048.16-.104.263-.168.311a.51.51 0 0 1-.303.08h-.687c-.151 0-.255-.024-.319-.08-.064-.056-.12-.16-.151-.32l-1.238-5.148-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.216-.151-.24-.223a.535.535 0 0 1-.04-.2v-.407c0-.167.064-.247.183-.247.048 0 .096.008.144.024.048.016.12.048.2.08.271.12.566.215.878.279.319.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.777.777 0 0 0-.215-.559c-.144-.151-.415-.287-.806-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.902 1.902 0 0 1-.4-1.158c0-.335.073-.63.216-.886.144-.255.336-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .359.008.535.032.183.024.35.056.518.088.16.04.312.08.455.127.144.048.256.096.336.144a.69.69 0 0 1 .24.2.43.43 0 0 1 .071.263v.375c0 .168-.064.256-.184.256a.83.83 0 0 1-.303-.096 3.652 3.652 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223-.248.152-.375.383-.375.71 0 .224.08.416.24.567.159.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767.247.327.367.702.367 1.117 0 .343-.072.655-.207.926-.144.272-.336.511-.583.703-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}
.token-logo.azure {
    background: #0078D4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5.483 21.3H24L14.025 4.013l-3.038 8.347 5.836 6.938L5.483 21.3zM13.23 2.7L6.105 8.677 0 19.253h5.505l7.725-16.553z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
}
.token-logo.gcp {
    background: #4285F4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12.19 2.38a9.344 9.344 0 0 0-9.234 6.893c.053-.02-.055.013 0 0-3.875 2.551-3.922 8.11-.247 10.941l.006-.007-.007.03a6.717 6.717 0 0 0 4.077 1.356h5.173l.03.03h5.192c6.687.053 9.376-8.605 3.835-12.35a9.365 9.365 0 0 0-8.825-6.893zM8.073 19.39a4.303 4.303 0 0 1-2.57-7.762l1.166.702a2.96 2.96 0 0 0 1.404 5.717 2.96 2.96 0 0 0 2.96-2.96 2.96 2.96 0 0 0-2.96-2.96z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}
.token-logo.google {
    background: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
}
.token-logo.microsoft {
    background: #f3f3f3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23f25022'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300a4ef'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237fba00'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23ffb900'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

/* Dev/Social */
.token-logo.github {
    background: #24292E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}
body.dark-mode .token-logo.github { background-color: #F0F0F0; }
.token-logo.gitlab {
    background: #FC6D26;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.405.87.87 0 0 0-.996.053.87.87 0 0 0-.29.46l-2.2 6.748H7.525l-2.2-6.748a.86.86 0 0 0-.29-.46.87.87 0 0 0-.996-.053.85.85 0 0 0-.336.405L.433 9.507l-.032.086a6.066 6.066 0 0 0 2.012 7.01l.01.009.027.019 4.985 3.737 2.466 1.87 1.502 1.136a1.01 1.01 0 0 0 1.22 0l1.502-1.136 2.466-1.87 5.012-3.756.012-.01a6.07 6.07 0 0 0 2.005-7.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}
.token-logo.bitbucket {
    background: #0052CC;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M.778 1.213a.768.768 0 0 0-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891zM14.52 15.53H9.522L8.17 8.466h7.561z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
}
.token-logo.slack {
    background: #4A154B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
}
.token-logo.discord {
    background: #5865F2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}
.token-logo.twitter { background: #1DA1F2; }
.token-logo.facebook { background: #1877F2; }
.token-logo.linkedin { background: #0A66C2; }
.token-logo.instagram { background: linear-gradient(135deg, #833AB4, #FD1D1D, #F77737); }

/* Security */
.token-logo.okta { background: #007DC1; }
.token-logo.auth0 { background: #EB5424; }
.token-logo.duo { background: #78C257; }
.token-logo.onepassword { background: #1A8CFF; }
.token-logo.lastpass { background: #D32D27; }
.token-logo.bitwarden { background: #175DDC; }

/* Services */
.token-logo.dropbox { background: #0061FF; }
.token-logo.salesforce { background: #00A1E0; }
.token-logo.atlassian { background: #0052CC; }
.token-logo.heroku { background: #430098; }
.token-logo.cloudflare { background: #F38020; }
.token-logo.datadog { background: #632CA6; }
.token-logo.sentry { background: #362D59; }
.token-logo.npm { background: #CB3837; }
.token-logo.docker { background: #2496ED; }
.token-logo.kubernetes { background: #326CE5; }
.token-logo.terraform { background: #7B42BC; }
.token-logo.jenkins { background: #D24939; }
.token-logo.brevo { background: #0B996E; }
.token-logo.stripe { background: #635BFF; }
.token-logo.paypal { background: #003087; }
.token-logo.twilio { background: #F22F46; }
.token-logo.sendgrid { background: #1A82E2; }
.token-logo.mailchimp { background: #FFE01B; color: #000; }
.token-logo.vercel { background: #000000; }
.token-logo.netlify { background: #00C7B7; }
.token-logo.firebase { background: #FFCA28; }
.token-logo.mongodb { background: #47A248; }
.token-logo.redis { background: #DC382D; }
.token-logo.postgresql { background: #4169E1; }
.token-logo.mysql { background: #4479A1; }
.token-logo.elastic { background: #005571; }
.token-logo.apple {
    background: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='white'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
}
body.dark-mode .token-logo.apple {
    background-color: #F0F0F0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23000000'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E");
}
.token-logo.digitalocean { background: #0080FF; }
.token-logo.oracle { background: #F80000; }
.token-logo.ibm { background: #054ADA; }
.token-logo.alibaba { background: #FF6A00; }
.token-logo.coinbase { background: #0052FF; }
.token-logo.binance { background: #F0B90B; color: #000; }
.token-logo.kraken { background: #5741D9; }

.token-details {
    min-width: 0;
}

.token-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.token-user {
    font-size: 13px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(99,102,241,0.1);
    color: var(--accent-secondary);
}

body.dark-mode .shared-badge {
    background: rgba(139,92,246,0.15);
}

.token-menu {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: all 0.2s;
    flex-shrink: 0;
}

.token-menu:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.token-code-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

/* Token visibility button */
.token-visibility-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.token-visibility-btn:hover {
    background: var(--accent-primary);
    color: white;
}

.token-visibility-btn.visible {
    background: var(--accent-primary);
    color: white;
}

.token-visibility-btn i {
    font-size: 18px;
}

/* Hidden code style */
.token-code.hidden-code {
    opacity: 0.5;
    cursor: default;
}

.token-code.hidden-code .code-value {
    color: var(--text-tertiary);
    letter-spacing: 6px;
}

.token-code-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.token-code {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 6px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    cursor: pointer;
    transition: all 0.3s;
}

.token-code:hover {
    color: var(--accent-primary);
}

body.dark-mode .token-code {
    text-shadow: 0 0 30px rgba(59,130,246,0.3);
}

/* Estado de expiracao - codigo ficando vermelho (suave) */
.token-code.expiring,
.code-value.expiring {
    color: var(--warning) !important;
    transition: color 0.5s ease;
}

body.dark-mode .token-code.expiring {
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

/* Proximo codigo */
.token-next-code {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-sm);
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.next-code-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.next-code-value {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    color: var(--accent-primary);
    opacity: 0.8;
}

.token-timer {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.timer-ring {
    transform: rotate(-90deg);
}

.timer-ring-bg {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 4;
}

.timer-ring-progress {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 138.2;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}

body.dark-mode .timer-ring-progress {
    filter: drop-shadow(0 0 6px rgba(59,130,246,0.5));
}

.timer-ring-progress.warning {
    stroke: var(--warning);
}

body.dark-mode .timer-ring-progress.warning {
    filter: drop-shadow(0 0 6px rgba(245,158,11,0.5));
}

.timer-ring-progress.danger {
    stroke: var(--danger);
}

body.dark-mode .timer-ring-progress.danger {
    filter: drop-shadow(0 0 6px rgba(239,68,68,0.5));
}

.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.token-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.token-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.token-tag i {
    font-size: 14px;
}

.token-actions {
    display: flex;
    gap: 8px;
}

.token-action-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    font-size: 16px;
    transition: all 0.2s;
}

.token-action-btn:hover {
    background: var(--accent-primary);
    color: white;
}

body.dark-mode .token-action-btn:hover {
    box-shadow: var(--glow-primary);
}

.token-action-btn.copy:hover {
    background: var(--success);
}

body.dark-mode .token-action-btn.copy:hover {
    box-shadow: 0 0 20px rgba(16,185,129,0.3);
}

.token-action-btn.share:hover {
    background: var(--accent-secondary);
}

.token-action-btn.delete:hover {
    background: var(--danger);
}

body.dark-mode .token-action-btn.delete:hover {
    box-shadow: 0 0 20px rgba(239,68,68,0.3);
}

.token-action-btn.edit:hover {
    background: var(--warning);
}

body.dark-mode .token-action-btn.edit:hover {
    box-shadow: 0 0 20px rgba(245,158,11,0.3);
}

/* ============================================
   EMPTY STATE
============================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    background: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--text-tertiary);
    font-size: 36px;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   MODALS
============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    padding: 20px;
}

body.dark-mode .modal-overlay {
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform 0.3s;
}

body.dark-mode .modal {
    border: 1px solid var(--border);
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal.modal-sm {
    max-width: 400px;
}

.modal-header {
    padding: 24px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 0 24px 24px;
    display: flex;
    gap: 12px;
}

/* ============================================
   IMPORT GOOGLE AUTH MODAL
============================================ */
.import-description {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 14px;
}

.import-actions-top {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.import-accounts-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.import-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.import-account-item:last-child {
    border-bottom: none;
}

.import-account-item:hover {
    background: var(--bg-tertiary);
}

.import-account-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.import-account-info {
    flex: 1;
    min-width: 0;
}

.import-account-issuer {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.import-account-name {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-account-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

/* ============================================
   MODAL TABS
============================================ */
.modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}

.modal-tab {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.modal-tab:hover {
    color: var(--text-primary);
}

.modal-tab.active {
    background: var(--accent-gradient);
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ============================================
   FORMS
============================================ */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: all 0.2s;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-mode .form-input {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--glow-primary);
}

.form-input::placeholder {
    color: var(--text-tertiary);
}

.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2394A3B8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-error {
    background: rgba(239,68,68,0.1);
    color: var(--danger);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-top: 16px;
}

.input-with-button {
    display: flex;
    gap: 8px;
}

.input-with-button .form-input {
    flex: 1;
}

.input-password {
    position: relative;
}

.input-password .form-input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: var(--text-primary);
}

/* ============================================
   BUTTONS
============================================ */
.btn {
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    border: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 8px 12px;
    font-size: 13px;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.btn-secondary:hover {
    background: var(--border);
    color: var(--text-primary);
}

body.dark-mode .btn-secondary:hover {
    background: var(--border-light);
}

.btn-primary {
    background: var(--accent-gradient);
    color: white;
}

body.dark-mode .btn-primary {
    box-shadow: var(--glow-primary);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    opacity: 0.9;
}

body.dark-mode .btn-danger:hover {
    box-shadow: 0 0 20px rgba(239,68,68,0.3);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================
   UPLOAD ZONE
============================================ */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

body.dark-mode .upload-zone {
    border-color: var(--border-light);
}

.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent-primary);
    background: rgba(59,130,246,0.02);
}

body.dark-mode .upload-zone:hover {
    background: rgba(59,130,246,0.05);
}

.upload-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    font-size: 28px;
}

.upload-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.upload-hint {
    font-size: 12px;
    color: var(--text-tertiary);
}

.qr-preview {
    text-align: center;
    padding: 20px;
}

.qr-preview img {
    max-width: 200px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

/* ============================================
   DELETE WARNING
============================================ */
.delete-warning {
    text-align: center;
    padding: 20px 0;
}

.delete-icon {
    width: 64px;
    height: 64px;
    background: rgba(239,68,68,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

body.dark-mode .delete-icon {
    background: rgba(239,68,68,0.15);
}

.delete-icon i {
    font-size: 32px;
    color: var(--danger);
}

.delete-warning h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.delete-warning p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================
   SHARES LIST
============================================ */
.shares-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
}

.share-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.share-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.share-item-email {
    font-size: 13px;
}

.share-item-remove {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.share-item-remove:hover {
    background: var(--danger);
    color: white;
}

.shares-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ============================================
   USERS TABLE
============================================ */
.users-table {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.table-header {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1.5fr 100px;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.table-header-cell {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1.5fr 100px;
    gap: 16px;
    padding: 20px 24px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.table-row:last-child {
    border-bottom: none;
}

.table-row:hover {
    background: var(--bg-tertiary);
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.user-cell-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}

.user-cell-info {
    min-width: 0;
}

.user-cell-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-cell-email {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(16,185,129,0.1);
    color: var(--success);
}

body.dark-mode .status-badge.active {
    background: rgba(16,185,129,0.15);
}

.status-badge.inactive {
    background: rgba(239,68,68,0.1);
    color: var(--danger);
}

body.dark-mode .status-badge.inactive {
    background: rgba(239,68,68,0.15);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.role-badge {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.role-badge.admin {
    background: rgba(59,130,246,0.1);
    color: var(--accent-primary);
}

body.dark-mode .role-badge.admin {
    background: rgba(59,130,246,0.15);
}

.table-cell-date {
    font-size: 13px;
    color: var(--text-secondary);
}

.table-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.table-action-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    font-size: 16px;
    transition: all 0.2s;
}

.table-action-btn:hover {
    background: var(--accent-primary);
    color: white;
}

/* ============================================
   SUCCESS MESSAGE
============================================ */
.success-message {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    width: 64px;
    height: 64px;
    background: rgba(16,185,129,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

body.dark-mode .success-icon {
    background: rgba(16,185,129,0.15);
}

.success-icon i {
    font-size: 32px;
    color: var(--success);
}

.success-message h4 {
    font-size: 18px;
    margin-bottom: 16px;
}

.success-message p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
}

.temp-password-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-tertiary);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin: 12px 0;
}

.temp-password-box code {
    font-size: 16px;
    font-family: monospace;
    letter-spacing: 1px;
}

.success-message small {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ============================================
   TOAST NOTIFICATIONS
============================================ */
.toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-success {
    border-left: 4px solid var(--success);
}

.toast-success i {
    color: var(--success);
}

.toast-error {
    border-left: 4px solid var(--danger);
}

.toast-error i {
    color: var(--danger);
}

/* ============================================
   LOGIN PAGE
============================================ */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.login-wrapper {
    display: flex;
    width: 100%;
    max-width: 1000px;
    min-height: 600px;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

body.dark-mode .login-wrapper {
    border: 1px solid var(--border);
}

.login-brand {
    flex: 1;
    background: var(--accent-gradient);
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.login-brand::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -30%;
    width: 80%;
    height: 80%;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.brand-content {
    position: relative;
    z-index: 1;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.brand-logo-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-icon i {
    font-size: 28px;
    color: white;
}

.brand-logo-text {
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.brand-title {
    font-size: 36px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 16px;
}

.brand-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    max-width: 360px;
}

.brand-features {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brand-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

.brand-feature i {
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.login-form-section {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-header {
    margin-bottom: 40px;
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.login-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
}

.login-footer {
    margin-top: 32px;
    text-align: center;
}

.login-footer-text {
    font-size: 13px;
    color: var(--text-tertiary);
}

.login-footer-link {
    color: var(--accent-primary);
    font-weight: 500;
}

.login-footer-link:hover {
    text-decoration: underline;
}

/* ============================================
   RESPONSIVE
============================================ */

/* Sidebar overlay for mobile */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

body.dark-mode .sidebar-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* Mobile search box */
.mobile-search {
    display: none;
    padding: 0 16px 16px;
    background: var(--bg-primary);
}

body.dark-mode .mobile-search {
    background: rgba(11,15,26,0.95);
}

.mobile-search .search-box {
    max-width: 100%;
}

/* Safe area support for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
    .sidebar {
        padding-top: env(safe-area-inset-top);
    }

    .topbar {
        padding-top: calc(16px + env(safe-area-inset-top));
    }

    .main-content {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .toast-container {
        top: calc(24px + env(safe-area-inset-top));
    }

    .modal-overlay {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: flex;
    }

    .tokens-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .topbar {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    .search-box {
        display: none;
    }

    .mobile-search {
        display: block;
    }

    .mobile-search .search-box {
        display: flex;
    }

    .page-content {
        padding: 20px 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 24px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .tokens-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .token-card {
        padding: 20px;
    }

    .token-code {
        font-size: 24px;
        letter-spacing: 4px;
    }

    .token-timer {
        width: 44px;
        height: 44px;
    }

    .timer-text {
        font-size: 12px;
    }

    /* Users table mobile - card style */
    .users-table {
        border: none;
        background: transparent;
    }

    .table-header {
        display: none;
    }

    .table-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        margin-bottom: 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }

    .table-row:last-child {
        margin-bottom: 0;
    }

    .table-row > * {
        display: block !important;
    }

    .user-cell {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

    .status-badge,
    .role-badge {
        display: inline-flex;
        margin-right: 8px;
    }

    .table-cell-date {
        font-size: 12px;
        color: var(--text-tertiary);
    }

    .table-cell-date::before {
        content: 'Criado em: ';
        color: var(--text-tertiary);
    }

    .table-actions {
        justify-content: flex-start;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    .login-wrapper {
        flex-direction: column;
        min-height: auto;
    }

    .login-brand {
        padding: 32px 24px;
        min-height: auto;
    }

    .brand-title {
        font-size: 22px;
    }

    .brand-subtitle {
        font-size: 14px;
    }

    .brand-features {
        display: none;
    }

    .login-form-section {
        padding: 32px 24px;
    }

    .login-title {
        font-size: 22px;
    }

    .add-btn span {
        display: none;
    }

    .add-btn {
        width: 44px;
        padding: 12px;
    }

    /* Modal adjustments */
    .modal {
        margin: 16px;
        max-height: calc(100vh - 32px);
        border-radius: var(--radius-lg);
    }

    .modal-header {
        padding: 20px 20px 0;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-footer {
        padding: 0 20px 20px;
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* Filter tabs scrollable */
    .filter-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Topbar actions */
    .topbar-actions {
        gap: 6px;
    }

    .action-btn {
        width: 40px;
        height: 40px;
    }

    /* Page header */
    .page-header {
        margin-bottom: 24px;
    }

    .page-title {
        font-size: 22px;
    }

    .page-subtitle {
        font-size: 14px;
    }

    /* Section header */
    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Toast on mobile */
    .toast-container {
        left: 16px;
        right: 16px;
        top: 16px;
        transform: none;
    }

    .toast {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .stat-card-header {
        margin-bottom: 0;
    }

    .stat-content {
        flex: 1;
    }

    .token-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .token-menu {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .token-card {
        position: relative;
    }

    .token-code-section {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .token-timer {
        align-self: flex-end;
    }

    .token-footer {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .token-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .login-brand {
        padding: 24px 20px;
    }

    .brand-logo {
        margin-bottom: 20px;
    }

    .brand-logo-icon {
        width: 44px;
        height: 44px;
    }

    .brand-logo-icon i {
        font-size: 22px;
    }

    .brand-logo-text {
        font-size: 22px;
    }

    .login-form-section {
        padding: 24px 20px;
    }

    .login-header {
        margin-bottom: 28px;
    }

    /* Empty state adjustments */
    .empty-state {
        padding: 40px 16px;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }

    /* User info in sidebar */
    .user-details {
        max-width: 120px;
    }

    /* Nav items touch target */
    .nav-item {
        padding: 14px 12px;
        min-height: 48px;
    }
}

/* ============================================
   ANIMATIONS
============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.token-card {
    animation: slideUp 0.3s ease forwards;
}

.token-card:nth-child(1) { animation-delay: 0s; }
.token-card:nth-child(2) { animation-delay: 0.05s; }
.token-card:nth-child(3) { animation-delay: 0.1s; }
.token-card:nth-child(4) { animation-delay: 0.15s; }
.token-card:nth-child(5) { animation-delay: 0.2s; }
.token-card:nth-child(6) { animation-delay: 0.25s; }

/* Spin animation for loading */
.ri-spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   BREACH ALERT BANNER
============================================ */
.breach-alert-banner {
    background: linear-gradient(135deg, var(--danger), #B91C1C);
    color: white;
    padding: 12px 24px;
    margin: 0;
}

.breach-alert-content {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.breach-alert-icon {
    font-size: 24px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.breach-alert-text {
    flex: 1;
    font-size: 14px;
}

.breach-alert-text strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}

.breach-alert-details {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.breach-alert-details:hover {
    background: rgba(255,255,255,0.3);
}

.breach-alert-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.breach-alert-close:hover {
    color: white;
}

/* ============================================
   EXPORT MODAL
============================================ */
.export-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 24px;
    color: var(--warning);
    font-size: 14px;
}

.export-warning i {
    font-size: 20px;
    flex-shrink: 0;
}

body.dark-mode .export-warning {
    background: rgba(245, 158, 11, 0.15);
}

.export-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.export-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.export-option:hover {
    border-color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.05);
}

body.dark-mode .export-option:hover {
    box-shadow: var(--glow-primary);
}

.export-option i {
    font-size: 32px;
    color: var(--accent-primary);
}

.export-option span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.export-option small {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ============================================
   BREACH INFO MODAL
============================================ */
.breach-info {
    text-align: left;
}

.breach-info > p {
    font-size: 15px;
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.breach-recommendations {
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.breach-recommendations h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--accent-primary);
}

.breach-recommendations ul {
    margin: 0;
    padding-left: 20px;
}

.breach-recommendations li {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.breach-recommendations li:last-child {
    margin-bottom: 0;
}

.breach-list {
    max-height: 200px;
    overflow-y: auto;
}

.breach-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

body.dark-mode .breach-item {
    background: rgba(239, 68, 68, 0.12);
}

.breach-item:last-child {
    margin-bottom: 0;
}

.breach-item-icon {
    width: 36px;
    height: 36px;
    background: var(--danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.breach-item-info {
    flex: 1;
}

.breach-item-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.breach-item-date {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .breach-alert-content {
        flex-wrap: wrap;
    }

    .breach-alert-text {
        width: calc(100% - 56px);
    }

    .breach-alert-details {
        width: 100%;
        text-align: center;
    }

    .export-options {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MOBILE UI IMPROVEMENTS
   Melhorias de responsividade para mobile
============================================ */

/* --- Melhorias para tabelas em mobile (768px) --- */
@media (max-width: 768px) {
    /* Tabela de usuarios - melhorar visualizacao */
    .users-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Labels antes de cada valor em mobile */
    .table-row .role-badge::before {
        content: 'Role: ';
        font-weight: 400;
        color: var(--text-tertiary);
        font-size: 11px;
        text-transform: uppercase;
        margin-right: 4px;
    }

    .table-row .status-badge::before {
        content: 'Status: ';
        font-weight: 400;
        color: var(--text-tertiary);
        font-size: 11px;
        text-transform: uppercase;
        margin-right: 4px;
    }

    /* Badges maiores e mais legíveis em mobile */
    .role-badge,
    .status-badge {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Token action buttons - touch targets minimos */
    .token-action-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    /* Melhor espacamento entre botoes de acao */
    .token-actions {
        gap: 10px;
    }

    /* Sidebar - melhor espacamento e touch targets */
    .sidebar-nav {
        padding: 20px 16px;
    }

    .nav-item {
        padding: 14px 16px;
        min-height: 48px;
        font-size: 15px;
        gap: 14px;
    }

    .nav-item i {
        font-size: 22px;
    }

    .nav-section {
        margin-bottom: 28px;
    }

    .nav-section-title {
        padding: 0 16px;
        margin-bottom: 12px;
    }

    /* User menu items - touch targets */
    .user-menu-item {
        padding: 14px 16px;
        min-height: 48px;
        font-size: 15px;
    }

    /* Sidebar footer - melhor espacamento */
    .sidebar-footer {
        padding: 20px;
    }

    .user-info {
        padding: 14px;
    }

    /* Table actions - botoes maiores */
    .table-actions {
        gap: 10px;
    }

    .table-actions .action-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Timer circular - ajustar tamanho */
    .token-timer {
        width: 48px;
        height: 48px;
    }

    /* Garantir que textos nao sejam cortados */
    .token-name {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .token-user {
        max-width: 100%;
    }

    /* Modal tabs - scroll horizontal */
    .modal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
    }

    .modal-tabs::-webkit-scrollbar {
        display: none;
    }

    .modal-tab {
        flex-shrink: 0;
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Botoes em geral - touch targets minimos */
    .btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .btn-sm {
        min-height: 40px;
        padding: 10px 16px;
    }
}

/* --- Melhorias extremas para telas muito pequenas (480px) --- */
@media (max-width: 480px) {
    /* Token card - ajustes finais */
    .token-card {
        padding: 16px;
    }

    /* Token actions - distribuir melhor */
    .token-actions {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        width: 100%;
    }

    .token-action-btn {
        width: 100%;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    /* Token code - tamanho menor mas legivel */
    .token-code {
        font-size: 22px;
        letter-spacing: 3px;
    }

    /* Next code - compacto */
    .token-next-code {
        padding: 4px 8px;
    }

    .next-code-value {
        font-size: 14px;
        letter-spacing: 2px;
    }

    /* Timer - menor em telas pequenas */
    .token-timer {
        width: 42px;
        height: 42px;
    }

    .timer-text {
        font-size: 11px;
    }

    /* Token visibility button */
    .token-visibility-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Page title - menor */
    .page-title {
        font-size: 20px;
    }

    .page-subtitle {
        font-size: 13px;
    }

    /* Section title */
    .section-title {
        font-size: 16px;
    }

    /* Stat cards - compactos */
    .stat-card {
        padding: 14px;
        gap: 12px;
    }

    .stat-value {
        font-size: 22px;
    }

    .stat-label {
        font-size: 13px;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    /* Modal - full width em telas pequenas */
    .modal-overlay {
        padding: 8px;
    }

    .modal {
        margin: 0;
        max-height: calc(100vh - 16px);
        border-radius: var(--radius-md);
    }

    .modal-header {
        padding: 16px 16px 0;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 0 16px 16px;
    }

    .modal-title {
        font-size: 18px;
    }

    /* Form inputs - maiores para touch */
    .form-input {
        padding: 14px;
        font-size: 16px; /* Previne zoom no iOS */
    }

    .form-select {
        font-size: 16px; /* Previne zoom no iOS */
    }

    .form-label {
        font-size: 13px;
    }

    /* Topbar mais compacta */
    .topbar {
        padding: 10px 12px;
    }

    .topbar-actions {
        gap: 4px;
    }

    .action-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    /* Add button - apenas icone */
    .add-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    /* Filter tabs - mais compactos */
    .filter-tab {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 36px;
    }

    /* Empty state - mais compacto */
    .empty-state {
        padding: 32px 12px;
    }

    .empty-state-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
        margin-bottom: 16px;
    }

    .empty-state-title {
        font-size: 16px;
    }

    .empty-state-text {
        font-size: 13px;
    }

    /* Sidebar em mobile - full width quando aberta */
    .sidebar.active {
        width: 100%;
        max-width: 300px;
    }

    /* Logo menor */
    .logo-icon {
        width: 36px;
        height: 36px;
    }

    .logo-icon i {
        font-size: 18px;
    }

    .logo-text {
        font-size: 18px;
    }

    /* Import modal - lista mais compacta */
    .import-account-item {
        padding: 10px 12px;
    }

    .import-account-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .import-account-issuer {
        font-size: 13px;
    }

    .import-account-name {
        font-size: 12px;
    }

    /* Breach items - mais compactos */
    .breach-item {
        padding: 10px;
        gap: 10px;
    }

    .breach-item-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .breach-item-name {
        font-size: 13px;
    }

    .breach-item-date {
        font-size: 11px;
    }
}

/* --- Melhorias adicionais para telas muito estreitas (360px) --- */
@media (max-width: 360px) {
    /* Token code ainda menor */
    .token-code {
        font-size: 20px;
        letter-spacing: 2px;
    }

    /* Token actions - 2 colunas se necessario */
    .token-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Page content - margens minimas */
    .page-content {
        padding: 16px 12px;
    }

    /* Token card padding minimo */
    .token-card {
        padding: 14px;
    }

    /* Token header info */
    .token-logo {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .token-name {
        font-size: 14px;
    }

    .token-user {
        font-size: 12px;
    }

    /* Stat cards - ainda mais compactos */
    .stat-value {
        font-size: 20px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    /* Modal ainda mais compacto */
    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* --- Orientacao landscape em mobile --- */
@media (max-height: 500px) and (orientation: landscape) {
    /* Modal scroll melhorado */
    .modal {
        max-height: 100vh;
    }

    .modal-body {
        max-height: 50vh;
    }

    /* Page content - menos espacamento vertical */
    .page-content {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .page-header {
        margin-bottom: 16px;
    }

    /* Stats grid - horizontal */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 12px;
    }
}

/* --- Garantir touch targets minimos em todos os elementos interativos --- */
@media (hover: none) and (pointer: coarse) {
    /* Dispositivos touch - aumentar areas clicaveis */
    .nav-item,
    .user-menu-item,
    .token-action-btn,
    .action-btn,
    .filter-tab,
    .modal-tab,
    .btn,
    .token-menu,
    .modal-close,
    .password-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* Links e botoes com padding adequado */
    a:not(.token-code):not(.logo),
    button {
        padding: max(var(--padding, 8px), 8px);
    }

    /* Checkboxes maiores */
    input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
}

/* ============================================
   OTIMIZACOES PARA TELAS DE ALTA DENSIDADE (Samsung S23 Ultra, etc)
   Samsung S23 Ultra: 1440x3088px, ~500ppi, 6.8"
   Estas regras aplicam-se a dispositivos com alta densidade de pixels
============================================ */

/* --- Media query para telas de alta densidade em mobile --- */
@media screen and (min-resolution: 2dppx) and (max-width: 768px),
       screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) {

    /* ===== TIPOGRAFIA AJUSTADA ===== */
    /* Fontes maiores para melhor legibilidade em telas de alta densidade */
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Page titles */
    .page-title {
        font-size: 26px;
        font-weight: 700;
        line-height: 1.3;
    }

    .page-subtitle {
        font-size: 15px;
        line-height: 1.5;
    }

    .section-title {
        font-size: 18px;
        font-weight: 600;
    }

    /* ===== TOKEN CARDS OTIMIZADOS ===== */
    .token-card {
        padding: 24px;
        border-radius: 16px;
    }

    .token-logo {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        font-size: 22px;
    }

    .token-name {
        font-size: 18px;
        font-weight: 600;
        line-height: 1.4;
    }

    .token-user {
        font-size: 14px;
        margin-top: 4px;
    }

    /* Codigo TOTP maior e mais legivel */
    .token-code {
        font-size: 36px;
        letter-spacing: 8px;
        font-weight: 700;
        padding: 8px 0;
    }

    .token-code.hidden-code .code-value {
        letter-spacing: 10px;
    }

    /* Proximo codigo maior */
    .token-next-code {
        padding: 10px 14px;
        border-radius: 10px;
    }

    .next-code-label {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .next-code-value {
        font-size: 18px;
        letter-spacing: 4px;
    }

    /* ===== TIMER CIRCULAR MAIOR E MAIS VISIVEL ===== */
    .token-timer {
        width: 60px;
        height: 60px;
        border-width: 4px;
    }

    .timer-text {
        font-size: 16px;
        font-weight: 700;
    }

    .token-timer svg {
        stroke-width: 4;
    }

    /* ===== BOTOES DE ACAO MAIORES (48px minimo) ===== */
    .token-action-btn {
        min-width: 52px;
        min-height: 52px;
        width: 52px;
        height: 52px;
        font-size: 20px;
        border-radius: 12px;
    }

    .token-actions {
        gap: 12px;
    }

    /* Token visibility button maior */
    .token-visibility-btn {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        font-size: 22px;
        border-radius: 12px;
    }

    /* Token menu button */
    .token-menu {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    /* ===== TAGS E BADGES MAIORES ===== */
    .token-tag,
    .shared-badge {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 8px;
    }

    /* ===== SIDEBAR OTIMIZADA ===== */
    .sidebar {
        width: 300px;
    }

    .sidebar-header {
        padding: 28px;
    }

    .logo-icon {
        width: 48px;
        height: 48px;
    }

    .logo-icon i {
        font-size: 24px;
    }

    .logo-text {
        font-size: 22px;
    }

    .sidebar-nav {
        padding: 24px 16px;
    }

    .nav-item {
        padding: 16px 18px;
        min-height: 56px;
        font-size: 16px;
        border-radius: 14px;
        gap: 16px;
    }

    .nav-item i {
        font-size: 24px;
    }

    .nav-section-title {
        font-size: 12px;
        padding: 0 18px;
        margin-bottom: 14px;
        letter-spacing: 0.8px;
    }

    .nav-section {
        margin-bottom: 32px;
    }

    /* User info na sidebar */
    .sidebar-footer {
        padding: 24px;
    }

    .user-info {
        padding: 16px;
        border-radius: 14px;
    }

    .user-avatar {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .user-name {
        font-size: 16px;
    }

    .user-role {
        font-size: 13px;
    }

    .user-menu-item {
        padding: 16px 18px;
        min-height: 56px;
        font-size: 16px;
        border-radius: 12px;
    }

    .user-menu-item i {
        font-size: 20px;
    }

    /* ===== TOPBAR AJUSTADA ===== */
    .topbar {
        padding: 16px 20px;
    }

    .menu-toggle {
        width: 52px;
        height: 52px;
        font-size: 24px;
        border-radius: 14px;
    }

    .action-btn {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        font-size: 22px;
        border-radius: 14px;
    }

    .add-btn {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 14px;
        font-size: 22px;
    }

    .topbar-actions {
        gap: 10px;
    }

    /* ===== TABELA DE USUARIOS RESPONSIVA ===== */
    .table-row {
        padding: 20px;
        margin-bottom: 16px;
        border-radius: 16px;
    }

    .user-cell {
        padding-bottom: 16px;
    }

    .user-avatar-small,
    .user-avatar {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .user-cell .user-name {
        font-size: 17px;
        font-weight: 600;
    }

    .user-cell .user-email {
        font-size: 14px;
    }

    .role-badge,
    .status-badge {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 8px;
    }

    .table-cell-date {
        font-size: 13px;
    }

    .table-actions {
        gap: 12px;
        padding-top: 12px;
    }

    .table-actions .action-btn {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    /* ===== STATS CARDS ===== */
    .stats-grid {
        gap: 16px;
    }

    .stat-card {
        padding: 20px;
        border-radius: 16px;
        gap: 18px;
    }

    .stat-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
        border-radius: 14px;
    }

    .stat-value {
        font-size: 28px;
        font-weight: 700;
    }

    .stat-label {
        font-size: 14px;
    }

    /* ===== MODAIS OTIMIZADOS ===== */
    .modal {
        margin: 20px;
        border-radius: 20px;
        max-height: calc(100vh - 40px);
    }

    .modal-header {
        padding: 24px 24px 0;
    }

    .modal-title {
        font-size: 22px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    .modal-body {
        padding: 24px;
    }

    .modal-footer {
        padding: 0 24px 24px;
        gap: 12px;
    }

    .modal-tabs {
        gap: 8px;
    }

    .modal-tab {
        min-height: 52px;
        padding: 14px 20px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* ===== FORMULARIOS ===== */
    .form-group {
        margin-bottom: 24px;
    }

    .form-label {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .form-input,
    .form-select {
        padding: 16px 18px;
        font-size: 16px;
        border-radius: 12px;
        min-height: 56px;
    }

    .form-input::placeholder {
        font-size: 15px;
    }

    .input-with-icon .form-input {
        padding-left: 52px;
    }

    .input-with-icon .input-icon {
        left: 18px;
        font-size: 20px;
    }

    .password-toggle {
        width: 52px;
        min-height: 52px;
        font-size: 20px;
    }

    /* ===== BOTOES ===== */
    .btn {
        min-height: 56px;
        padding: 16px 28px;
        font-size: 16px;
        border-radius: 14px;
    }

    .btn-sm {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 15px;
    }

    .btn i {
        font-size: 20px;
    }

    /* ===== FILTER TABS ===== */
    .filter-tabs {
        gap: 10px;
        padding-bottom: 8px;
    }

    .filter-tab {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 48px;
        border-radius: 12px;
    }

    /* ===== PAGE CONTENT ===== */
    .page-content {
        padding: 24px 20px;
    }

    .page-header {
        margin-bottom: 28px;
    }

    /* ===== EMPTY STATE ===== */
    .empty-state {
        padding: 48px 24px;
    }

    .empty-state-icon {
        width: 80px;
        height: 80px;
        font-size: 36px;
        margin-bottom: 24px;
    }

    .empty-state-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .empty-state-text {
        font-size: 15px;
        line-height: 1.6;
    }

    /* ===== TOASTS ===== */
    .toast {
        padding: 18px 20px;
        border-radius: 14px;
        font-size: 15px;
    }

    .toast i {
        font-size: 22px;
    }

    /* ===== EXPORT OPTIONS ===== */
    .export-option {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .export-option i {
        font-size: 36px;
    }

    .export-option span {
        font-size: 17px;
    }

    .export-option small {
        font-size: 13px;
    }

    /* ===== BREACH ALERT ===== */
    .breach-alert-banner {
        padding: 16px 20px;
    }

    .breach-alert-icon {
        font-size: 28px;
    }

    .breach-alert-text {
        font-size: 15px;
    }

    .breach-alert-text strong {
        font-size: 16px;
    }

    .breach-alert-details {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 48px;
    }

    /* ===== IMPORT MODAL ===== */
    .import-account-item {
        padding: 16px;
        border-radius: 12px;
    }

    .import-account-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .import-account-issuer {
        font-size: 16px;
    }

    .import-account-name {
        font-size: 14px;
    }

    /* ===== CHECKBOXES ===== */
    input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    .checkbox-label {
        font-size: 15px;
        gap: 12px;
    }

    /* ===== SEARCH BOX ===== */
    .search-box {
        padding: 14px 20px;
        border-radius: 14px;
        min-height: 52px;
    }

    .search-box input {
        font-size: 16px;
    }

    .search-box i {
        font-size: 20px;
    }

    /* ===== LOADING SCREEN ===== */
    .loading-logo {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }

    .loading-logo i {
        font-size: 40px;
    }

    .loading-spinner {
        width: 48px;
        height: 48px;
        border-width: 4px;
    }

    .loading-content p {
        font-size: 16px;
    }
}

/* --- Media query adicional para Samsung S23 Ultra e similares em PORTRAIT --- */
/* Dispositivos com largura logica entre 360-430px e alta densidade */
@media screen and (min-resolution: 2.5dppx) and (min-width: 360px) and (max-width: 430px),
       screen and (-webkit-min-device-pixel-ratio: 2.5) and (min-width: 360px) and (max-width: 430px) {

    /* Ajustes especificos para S23 Ultra portrait mode */
    .token-code {
        font-size: 38px;
        letter-spacing: 10px;
    }

    .token-timer {
        width: 64px;
        height: 64px;
    }

    .timer-text {
        font-size: 18px;
    }

    .token-action-btn {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
    }

    .token-visibility-btn {
        width: 56px;
        height: 56px;
    }

    /* Mais espaco nos cards */
    .token-card {
        padding: 28px;
    }

    .token-header {
        margin-bottom: 24px;
    }

    .token-code-section {
        margin-bottom: 20px;
    }

    /* Nav items ainda maiores */
    .nav-item {
        min-height: 60px;
        padding: 18px 20px;
    }
}

/* --- Ajustes para telas QHD+ em landscape --- */
@media screen and (min-resolution: 2dppx) and (max-height: 500px) and (orientation: landscape) {
    /* Reducao de espacamento vertical para landscape */
    .token-card {
        padding: 18px;
    }

    .token-header {
        margin-bottom: 14px;
    }

    .token-code {
        font-size: 28px;
        padding: 4px 0;
    }

    .token-timer {
        width: 48px;
        height: 48px;
    }

    .timer-text {
        font-size: 14px;
    }

    .nav-item {
        min-height: 48px;
        padding: 12px 16px;
    }

    .modal-body {
        max-height: 45vh;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* --- Melhorias de contraste e legibilidade para telas AMOLED --- */
@media screen and (min-resolution: 2dppx) and (prefers-color-scheme: dark) {
    body.dark-mode .token-code {
        text-shadow: 0 0 40px rgba(59, 130, 246, 0.4);
    }

    body.dark-mode .token-card:hover {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 24px rgba(59, 130, 246, 0.25);
    }

    body.dark-mode .token-timer {
        box-shadow: 0 0 16px rgba(59, 130, 246, 0.3);
    }

    body.dark-mode .nav-item.active {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    }
}

/* ============================================
   MELHORIAS ADICIONAIS PARA SAMSUNG S23 ULTRA
   Correcoes especificas baseadas nos screenshots
============================================ */

/* --- Correcao para tabela de usuarios em mobile (coluna Role cortada) --- */
@media screen and (max-width: 768px) {
    /* Reformular layout da tabela em mobile para evitar cortes */
    .table-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Container para badges em mobile */
    .table-row .role-badge,
    .table-row .status-badge {
        display: inline-flex;
        vertical-align: middle;
    }

    /* Criar area dedicada para info do usuario */
    .user-cell {
        grid-column: 1;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    /* Area de badges e status juntos */
    .table-row > div:not(.user-cell):not(.table-actions):not(.table-cell-date) {
        display: inline-block;
    }
}

/* --- Grid de botoes de acao melhorado para alta densidade --- */
@media screen and (min-resolution: 2dppx) and (max-width: 480px) {
    /* Grid 4 colunas para botoes de acao */
    .token-actions {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        width: 100%;
    }

    .token-action-btn {
        width: 100%;
        aspect-ratio: 1;
        min-height: 52px;
        border-radius: 12px;
    }

    /* Footer do token ajustado */
    .token-footer {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .token-footer .token-tag {
        align-self: flex-start;
    }
}

/* --- Timer circular com melhor visibilidade --- */
@media screen and (min-resolution: 2dppx) and (max-width: 768px) {
    .token-timer {
        position: relative;
    }

    .token-timer::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: transparent;
        pointer-events: none;
    }

    body.dark-mode .token-timer::after {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
    }

    /* Timer ring mais grosso */
    .timer-ring-bg,
    .timer-ring-progress {
        stroke-width: 5;
    }
}

/* --- Melhorias para o codigo TOTP em telas de alta densidade --- */
@media screen and (min-resolution: 2.5dppx) and (max-width: 768px) {
    .token-code-wrapper {
        width: 100%;
    }

    .token-code-section {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    /* Codigo principal bem destacado */
    .token-code {
        flex: 1;
        text-align: left;
    }

    /* Timer ao lado direito */
    .token-timer {
        flex-shrink: 0;
    }
}

/* --- Header de pagina melhorado para Samsung S23 Ultra --- */
@media screen and (min-resolution: 2dppx) and (min-width: 360px) and (max-width: 430px) {
    .page-header {
        padding-bottom: 8px;
    }

    /* Botoes de acao da pagina (Exportar, Adicionar Usuario) */
    .page-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin-top: 20px;
    }

    .page-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Header com botoes lado a lado */
    .section-header {
        gap: 16px;
    }

    .section-header .btn {
        flex: 1;
        min-width: 0;
    }
}

/* --- Scroll suave e momentum para iOS e Android --- */
@media (hover: none) and (pointer: coarse) {
    .tokens-grid,
    .stats-grid,
    .filter-tabs,
    .modal-body,
    .sidebar-nav {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Prevenir zoom ao dar duplo toque */
    * {
        touch-action: manipulation;
    }
}

/* --- Safe area para dispositivos com notch ou hole-punch --- */
@supports (padding: max(0px)) {
    @media screen and (max-width: 768px) {
        .topbar {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }

        .page-content {
            padding-left: max(20px, env(safe-area-inset-left));
            padding-right: max(20px, env(safe-area-inset-right));
        }

        .sidebar {
            padding-top: env(safe-area-inset-top);
        }

        .modal {
            margin-top: max(20px, env(safe-area-inset-top));
            margin-bottom: max(20px, env(safe-area-inset-bottom));
        }
    }
}