/* ==========================================
   iSentrol® 快速开始 - nav.css
   ========================================== */

:root {
    --primary-color: #0277bd;
    --primary-light: #0288d1;
    --primary-dark: #01579b;
    --bg-light: #f5faff;
    --border-color: #e1f5fe;
    --border-highlight: #b3e5fc;
    --text-color: #37474f;
    --spacing-xs: 8px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 25px;
    --spacing-xl: 35px;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-md: 17px;
    --font-size-lg: 26px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --transition-base: 0.3s ease;
    --transition-fast: 0.2s ease;
    --danger: #e53935;
    --danger-hover: #c62828;
    --success: #2e7d32;
    --shadow: 0 1px 4px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.1);
}

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

html, body {
    height: 100%;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-main);
    color: var(--text-color);
    font-size: var(--font-size-base);
}

a { color: var(--primary-light); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--primary-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ==========================================
   Buttons
   ========================================== */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-light);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    transition: background-color var(--transition-base);
    outline: none;
}
.btn:hover { background-color: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn-secondary { background-color: var(--border-highlight); color: var(--primary-dark); }
.btn-secondary:hover { background-color: #81d4fa; }
.btn-danger { background-color: var(--danger); color: #fff; }
.btn-danger:hover { background-color: var(--danger-hover); }
.btn-sm { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-xs); }

/* ==========================================
   Header
   ========================================== */
.header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.site-title { font-size: 24px; font-weight: 700; letter-spacing: 1px; }
.header-actions { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }

/* ==========================================
   Search Box
   ========================================== */
.search-box { position: relative; }
.search-box input {
    padding: 8px 36px 8px 14px;
    border: none;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    width: 220px;
    background: rgba(255,255,255,0.2);
    color: white;
    outline: none;
    transition: all var(--transition-base);
    font-family: var(--font-main);
}
.search-box input::placeholder { color: rgba(255,255,255,0.7); }
.search-box input:focus { background: rgba(255,255,255,0.3); width: 280px; }
.search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: 0.7; }

/* ==========================================
   Language Select
   ========================================== */
.lang-select-wrap { position: relative; }
.lang-select {
    padding: 6px 30px 6px 10px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: var(--font-size-xs);
    font-family: var(--font-main);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.lang-select option { color: var(--text-color); background: #fff; }
.lang-select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
}

/* ==========================================
   Header Button
   ========================================== */
.btn-header {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
}
.btn-header:hover { background: rgba(255,255,255,0.3); }

/* ==========================================
   Container & Main Content
   ========================================== */
.container { max-width: 1200px; margin: 0 auto; padding: var(--spacing-md); display: flex; gap: var(--spacing-md); align-items: flex-start; }
.main-content { flex: 1; min-width: 0; }

/* ==========================================
   Category Section
   ========================================== */
.category-section { margin-bottom: var(--spacing-xl); transition: opacity 0.2s, transform 0.2s; }
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-highlight);
}
.category-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}
.category-title:hover { color: var(--primary-dark); }
.toggle-icon { font-size: 12px; transition: transform var(--transition-base); display: inline-block; }
.toggle-icon.collapsed { transform: rotate(-90deg); }
.category-count {
    background: var(--primary-light);
    color: white;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}
.category-actions { display: flex; gap: 6px; align-items: center; }
.sort-badge {
    background: #e8eaf6; color: #3949ab; font-size: 12px; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; cursor: pointer; user-select: none;
    transition: background 0.2s;
}
.sort-badge:hover { background: #c5cae9; }
.category-body {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity var(--transition-base);
    max-height: 3000px;
    opacity: 1;
}
.category-body.collapsed { max-height: 0; opacity: 0; }

/* ==========================================
   Sub Category
   ========================================== */
.subcat-section {
    margin: var(--spacing-md) 0 var(--spacing-xs) 24px;
    padding-left: 16px;
    border-left: 3px solid var(--border-highlight);
}
.subcat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}
.subcat-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ==========================================
   Links Grid
   ========================================== */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-sm);
}
.link-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: all var(--transition-base);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}
.link-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--border-highlight); }
.link-card-top { display: flex; align-items: flex-start; gap: var(--spacing-sm); flex: 1; }
.link-icon {
    width: 72px; height: 72px;
    border-radius: var(--radius-md);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; flex-shrink: 0; overflow: hidden;
}
.link-copy-btn {
    background: none; border: none; color: var(--primary-light);
    font-size: 15px; cursor: pointer; padding: 0; opacity: 0.6;
}
.link-copy-btn:hover { opacity: 1; }
.link-icon img { width: 100%; height: 100%; object-fit: cover; }
.link-info { flex: 1; min-width: 0; }
.link-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-desc {
    font-size: var(--font-size-xs);
    color: #78909c;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-card-bottom {
    display: flex; align-items: center; justify-content: flex-end;
    margin-top: 4px; padding-top: 4px;
    border-top: 1px dashed var(--border-color);
}
.link-clicks { font-size: var(--font-size-xs); color: #90a4ae; display: flex; align-items: center; gap: 4px; }
.link-actions { display: none; gap: 4px; }
.admin-mode .link-actions { display: flex; }
.admin-mode .link-card { cursor: default; }
.admin-mode .link-card .link-card-top { cursor: pointer; }

/* ==========================================
   Add Card
   ========================================== */
.add-card {
    background: #fff;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex; align-items: center; justify-content: center;
    min-height: 80px; cursor: pointer;
    transition: all var(--transition-base);
    color: #90a4ae; font-size: var(--font-size-sm); gap: var(--spacing-xs);
}
.add-card:hover { border-color: var(--primary-light); color: var(--primary-light); background: var(--bg-light); }

/* ==========================================
   Modal
   ========================================== */
.modal-overlay {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200; align-items: center; justify-content: center;
    padding: var(--spacing-md);
}
.modal-overlay.active { display: flex; }
.modal {
    background: white; border-radius: var(--radius-md);
    width: 100%; max-width: 620px; max-height: 90vh;
    overflow-y: auto; box-shadow: var(--shadow-lg);
}
.modal-header {
    padding: var(--spacing-md) 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 20px; font-weight: 700; color: var(--primary-color); }
.modal-close {
    width: 30px; height: 30px; border: none; background: none;
    font-size: 22px; cursor: pointer; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: #90a4ae;
}
.modal-close:hover { background: var(--bg-light); }
.modal-body { padding: 20px; }
.modal-footer {
    padding: var(--spacing-sm) 20px;
    border-top: 1px solid var(--border-color);
    display: flex; justify-content: flex-end; gap: var(--spacing-sm);
}

/* ==========================================
   Form
   ========================================== */
.form-group { margin-bottom: var(--spacing-md); }
.form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: 6px; color: var(--text-color); }
.form-input {
    width: 100%; padding: var(--spacing-sm) 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    font-size: var(--font-size-sm); font-family: var(--font-main);
    color: var(--text-color); outline: none;
    transition: border-color var(--transition-base);
}
.form-input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 2px rgba(2,136,209,0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-sm); }

/* ==========================================
   Icon Upload
   ========================================== */
.icon-upload-area {
    width: 72px; height: 72px;
    border: 2px dashed var(--border-color); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--transition-fast);
    overflow: hidden; position: relative;
}
.icon-upload-area:hover { border-color: var(--primary-light); }
.icon-upload-area img { width: 100%; height: 100%; object-fit: cover; }
.icon-upload-area .placeholder { text-align: center; color: #90a4ae; font-size: 12px; }
.icon-upload-area input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.icon-delete-btn {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
    background: var(--danger); color: white; border: none; border-radius: 50%;
    font-size: 12px; cursor: pointer; display: none; align-items: center;
    justify-content: center; z-index: 2; line-height: 1; padding: 0;
}
.icon-delete-btn:hover { background: var(--danger-hover); }

/* ==========================================
   Empty State
   ========================================== */
.empty-state { text-align: center; padding: 60px 20px; color: #90a4ae; }
.empty-state svg { margin-bottom: 20px; opacity: 0.4; }
.empty-state p { font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); }
.empty-state small { font-size: var(--font-size-sm); }

/* ==========================================
   Admin Badge & Toolbar
   ========================================== */
.admin-badge {
    background: #fff3e0; color: #e65100;
    padding: 4px 10px; border-radius: var(--radius-sm);
    font-size: var(--font-size-xs); font-weight: 600;
}
.toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--spacing-md); flex-wrap: wrap; gap: var(--spacing-sm);
}
.toolbar-left { display: flex; align-items: center; gap: var(--spacing-sm); }
.toolbar-right { display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap; }
.stats { font-size: var(--font-size-xs); color: #90a4ae; }

/* ==========================================
   Toast
   ========================================== */
.toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--text-color); color: white;
    padding: var(--spacing-sm) 20px; border-radius: var(--radius-md);
    font-size: var(--font-size-sm); z-index: 300;
    transform: translateY(100px); opacity: 0; transition: all var(--transition-base);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ==========================================
   Confirm Dialog
   ========================================== */
.confirm-overlay {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 250;
    align-items: center; justify-content: center;
}
.confirm-overlay.active { display: flex; }
.confirm-box {
    background: white; border-radius: var(--radius-md);
    padding: var(--spacing-lg); max-width: 400px; width: 90%; text-align: center;
}
.confirm-box p { margin-bottom: var(--spacing-lg); font-size: var(--font-size-base); }
.confirm-box .btn-group { display: flex; gap: var(--spacing-sm); justify-content: center; }

/* ==========================================
   Password Modal
   ========================================== */
.password-modal .modal { max-width: 400px; }
.password-modal .modal-body { text-align: center; padding: 30px 20px; }
.password-modal .lock-icon { font-size: 48px; margin-bottom: var(--spacing-md); }
.password-modal .form-input { text-align: center; font-size: var(--font-size-lg); letter-spacing: 4px; }
.password-modal .hint { font-size: var(--font-size-xs); color: #90a4ae; margin-top: var(--spacing-xs); }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 768px) {
    .header-inner { justify-content: center; text-align: center; }
    .search-box input { width: 160px; }
    .search-box input:focus { width: 200px; }
    .links-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .site-title { font-size: 20px; }
    .subcat-section { margin-left: 12px; padding-left: 12px; }
    .container { flex-direction: column; }
}