/* ===== 授权管理系统 CSS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       font-size: 14px; background: #f5f6fa; color: #333; }

/* navbar */
.navbar { display:flex; align-items:center; gap:20px;
          background:#1a1a2e; color:#fff; padding:0 24px; height:50px; }
.navbar .brand { font-weight:700; font-size:16px; margin-right:10px; }
.navbar a { color:#ccc; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
.navbar a:hover, .navbar a.active { color:#fff; border-bottom-color:#4a9eff; }

/* container */
.container { max-width:1300px; margin:24px auto; padding:0 16px; }

/* stat bar */
.stat-bar { display:flex; align-items:center; gap:20px; background:#fff;
            border-radius:8px; padding:12px 20px; margin-bottom:16px;
            box-shadow:0 1px 4px rgba(0,0,0,.06); }

/* search */
.search-bar { display:flex; gap:8px; margin-bottom:14px; }
.search-bar input, .search-bar select { padding:7px 10px; border:1px solid #ddd;
    border-radius:6px; outline:none; font-size:13px; }
.search-bar input:focus { border-color:#4a9eff; }

/* table */
table { width:100%; background:#fff; border-radius:8px; border-collapse:collapse;
        box-shadow:0 1px 4px rgba(0,0,0,.06); overflow:hidden; }
thead tr { background:#f0f2f8; }
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid #f0f0f0; font-size:13px; }
tbody tr:hover { background:#fafbff; }
code { background:#f0f0f0; padding:2px 6px; border-radius:4px; font-size:12px; }
.ops a { margin-right:8px; text-decoration:none; color:#4a9eff; }
.ops a:hover { text-decoration:underline; }

/* tags */
.tag { display:inline-block; padding:2px 8px; border-radius:12px; font-size:12px; }
.tag-ok     { background:#e6f9ee; color:#27ae60; }
.tag-off    { background:#f0f0f0; color:#888; }
.tag-piracy { background:#ffe8e8; color:#e74c3c; }

/* color helpers */
.c-ok     { color:#27ae60; }
.c-off    { color:#888; }
.c-piracy { color:#e74c3c; }

/* btn */
.btn { display:inline-block; padding:7px 16px; border:1px solid #ddd;
       border-radius:6px; background:#fff; cursor:pointer; font-size:13px;
       text-decoration:none; color:#333; transition:.15s; }
.btn:hover { background:#f5f6fa; }
.btn-primary { background:#4a9eff; border-color:#4a9eff; color:#fff; }
.btn-primary:hover { background:#3085e8; }
.btn-block { width:100%; text-align:center; }

/* alert */
.alert { padding:10px 16px; border-radius:6px; margin-bottom:14px; }
.alert-error { background:#ffe8e8; color:#c0392b; border:1px solid #fcc; }
.alert-ok    { background:#e6f9ee; color:#27ae60; border:1px solid #b2dfdb; }

/* form-card */
.form-card { background:#fff; border-radius:8px; padding:24px; max-width:600px;
             box-shadow:0 1px 4px rgba(0,0,0,.06); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:6px; font-weight:500; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:8px 10px; border:1px solid #ddd;
    border-radius:6px; outline:none; font-size:13px; }
.form-group input:focus { border-color:#4a9eff; }
.req { color:#e74c3c; }

/* pagination */
.pagination { display:flex; gap:6px; margin-top:16px; flex-wrap:wrap; }
.pagination a { padding:5px 10px; background:#fff; border:1px solid #ddd;
                border-radius:4px; text-decoration:none; color:#333; font-size:13px; }
.pagination a.active { background:#4a9eff; border-color:#4a9eff; color:#fff; }

/* 离线激活码展示区 */
.activation-code-box {
    background: #f0f8ff;
    border: 2px dashed #4a9eff;
    border-radius: 10px;
    padding: 20px 24px;
    max-width: 600px;
    margin-bottom: 20px;
}
.activation-code-title {
    font-weight: 600;
    font-size: 15px;
    color: #1a6fcc;
    margin-bottom: 10px;
}
.activation-code-text {
    width: 100%;
    padding: 10px;
    font-family: monospace;
    font-size: 12px;
    background: #fff;
    border: 1px solid #c9dff7;
    border-radius: 6px;
    color: #333;
    resize: vertical;
    min-height: 80px;
    word-break: break-all;
}

/* 授权类型标签 */
.tag-cloud   { background:#e8f0ff; color:#3b5ee1; }
.tag-offline { background:#fff3e0; color:#e67e22; }

/* 永久标签 */
.tag-permanent { background:#e6f9ee; color:#27ae60; }

/* 已过期标签 */
.tag-expired { background:#ffe8e8; color:#e74c3c; }

/* 认证标签 */
.tag-verified { background:#e6f9ee; color:#27ae60; }
.tag-piracy   { background:#ffe8e8; color:#e74c3c; }

/* Tab 切换栏 */
.tab-bar {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    overflow: hidden;
    margin-bottom: 0;
}
.tab-bar .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: .15s;
}
.tab-bar .tab:hover { color: #333; background: #f9f9ff; }
.tab-bar .tab.active { color: #4a9eff; border-bottom-color: #4a9eff; background: #f5f8ff; }
.tab-count {
    display: inline-block;
    background: #f0f0f0;
    color: #888;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: normal;
}
.tab.active .tab-count { background: #e8f0ff; color: #4a9eff; }

/* 到期时间输入 */
.expire-datetime-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    outline: none;
    font-size: 13px;
}
.expire-datetime-input:focus {
    border-color: #4a9eff;
}

/* login */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:#fff; border-radius:12px; padding:40px 36px; width:340px;
             box-shadow:0 4px 20px rgba(0,0,0,.1); }
.login-box h2 { text-align:center; margin-bottom:24px; font-size:20px; }
.login-box .form-group { margin-bottom:14px; }
.login-box input { width:100%; padding:10px 12px; border:1px solid #ddd;
                   border-radius:6px; outline:none; font-size:14px; }
.login-box input:focus { border-color:#4a9eff; }