/* ======================== RESET & VARIABLES ======================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#f0efe9;--card:#ffffff;--border:#e0ded6;--blue:#1a5c96;--green:#1a7a4c;--red:#b83232;--amber:#8a6d1b;--purple:#5a3d8a;--teal:#0e6e56;--text:#2c2c2a;--text2:#6b6963;--text3:#9a9890;--topbar:#1a3a5c}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* ======================== TOPBAR ======================== */
.topbar{background:var(--topbar);height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-title{font-size:15px;font-weight:700;color:white}
.topbar-sub{font-size:11px;color:#aac4dd}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-user{font-size:12px;color:#aac4dd;padding:0 8px}
.btn-topbar{background:#2a4a6c;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;transition:background .2s}
.btn-topbar:hover{background:#3a5a7c}
.btn-logout{background:#4a2a2a}
.btn-logout:hover{background:#6a3a3a}

.warn-banner{background:#f59e0b;padding:8px 20px;font-size:12px;font-weight:700;color:white}

main{max-width:1100px;margin:0 auto;padding:20px}

/* ======================== AUTH CARD ======================== */
.center-box{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 120px)}
.auth-card{background:var(--card);border-radius:18px;padding:0;width:460px;box-shadow:0 4px 24px rgba(0,0,0,.06);border:1px solid var(--border);overflow:hidden}
.auth-tabs{display:flex;border-bottom:1px solid var(--border)}
.auth-tab{flex:1;padding:14px;text-align:center;font-size:14px;font-weight:600;background:var(--bg);border:none;cursor:pointer;transition:all .2s;color:var(--text3)}
.auth-tab.active{background:var(--card);color:var(--text);border-bottom:2px solid var(--blue)}
.auth-card>div:not(.auth-tabs){padding:32px 36px}

.activation-card{background:var(--card);border-radius:18px;padding:36px 40px;width:440px;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,.06);border:1px solid var(--border)}
.act-icon{font-size:48px;margin-bottom:12px}
.activation-card h2,.auth-card h2{font-size:22px;margin-bottom:6px;text-align:center}
.act-desc{font-size:13px;color:var(--text2);margin-bottom:16px;text-align:center}
.act-form{text-align:left}
.act-form label{display:block;font-size:11px;color:var(--text3);margin-top:10px;margin-bottom:3px}
.act-form input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s}
.act-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,92,150,.1)}
.act-error{margin-top:10px;font-size:12px;color:var(--red);text-align:center;min-height:18px}
.act-success{margin-top:10px;font-size:12px;color:var(--green);text-align:center;min-height:18px}

/* ======================== HOME ======================== */
.home-container{display:flex;flex-direction:column;align-items:center;padding-top:60px}
.home-subtitle{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.home-title{font-size:26px;font-weight:700;margin-bottom:32px}
.home-grid{display:grid;grid-template-columns:repeat(2,280px);gap:16px}
.home-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px 24px;text-align:center;cursor:pointer;transition:all .2s}
.home-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:var(--blue)}
.home-card .icon{font-size:40px;margin-bottom:12px}
.home-card .card-title{font-size:17px;font-weight:700;margin-bottom:4px}
.home-card .card-desc{font-size:12px;color:var(--text2)}

/* ======================== CARDS / FORMS ======================== */
.card{background:var(--card);border-radius:12px;padding:16px 20px;margin-bottom:12px;border:1px solid var(--border)}
.card-header{font-size:14px;font-weight:700;margin-bottom:12px}
.form-row{display:flex;gap:12px;margin-bottom:8px}
.form-group{flex:1;display:flex;flex-direction:column}
.form-group label{font-size:11px;color:var(--text3);margin-bottom:3px}
.form-group input,.form-group textarea,.form-group select{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;font-family:inherit;background:white;transition:border-color .2s;outline:none}
.form-group input:focus,.form-group textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,92,150,.1)}

/* Segments */
.segment-zone{border-radius:8px;padding:12px 14px;margin:8px 0}
.segment-zone .seg-title{font-size:12px;font-weight:700;margin-bottom:8px}
.seg-veh{background:#e2f5ee}.seg-veh .seg-title{color:var(--teal)}
.seg-hs6{background:#f0ecf8}.seg-hs6 .seg-title{color:var(--purple)}
.seg-goods{background:#fef6e0}.seg-goods .seg-title{color:var(--amber)}

/* Type grid */
.type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.type-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all .2s}
.type-card:hover{border-color:var(--blue);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.type-card .type-icon{font-size:28px}
.type-card .type-label{font-size:14px;font-weight:700}
.type-card .type-segs{font-size:11px;color:var(--text3)}

/* Buttons */
.btn{border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-blue{background:var(--blue);color:white}.btn-blue:hover{background:#154b7a}
.btn-green{background:var(--green);color:white}.btn-green:hover{background:#15603a}
.btn-red{background:var(--red);color:white}.btn-red:hover{background:#991a1a}
.btn-ghost{background:var(--border);color:var(--text)}.btn-ghost:hover{background:#d0cec6}
.btn-sm{padding:6px 14px;font-size:12px}

.page-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.page-header h2{font-size:18px;font-weight:700}
.btn-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* XML / Editor */
.xml-preview{background:#fafaf8;border:1px solid var(--border);border-radius:10px;padding:16px;font-family:'Consolas','Fira Code',monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-all;max-height:500px;overflow-y:auto;margin-top:12px}
.success-header{display:flex;align-items:center;gap:8px;color:var(--green);font-size:18px;font-weight:700;margin-bottom:12px}
.output-btn-row{display:flex;gap:8px;margin-bottom:12px}
.editor-split{display:grid;grid-template-columns:1fr 380px;gap:12px;min-height:calc(100vh - 140px)}
.editor-left textarea{width:100%;min-height:500px;border:1px solid var(--border);border-radius:10px;padding:14px;font-family:'Consolas','Fira Code',monospace;font-size:12px;line-height:1.6;resize:vertical;outline:none;background:#fafaf8}
.editor-left textarea:focus{border-color:var(--blue)}
.editor-toolbar{display:flex;gap:8px;padding:8px 0;margin-bottom:8px;border-bottom:1px solid var(--border)}
.val-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;max-height:calc(100vh - 140px);overflow-y:auto}
.val-panel h3{font-size:14px;font-weight:700;margin-bottom:12px}
.val-item{border-radius:8px;padding:8px 12px;margin-bottom:4px;font-size:12px;line-height:1.5}
.val-err{background:#fdeeed;color:var(--red)}.val-warn{background:#fef6e0;color:var(--amber)}.val-ok{background:#e4f5ec;color:var(--green)}
.val-bol-summary{background:var(--bg);border-radius:8px;padding:8px 12px;margin-top:4px;font-size:12px}

/* BOL */
.bol-header{display:flex;justify-content:space-between;align-items:center}
.bol-delete{background:none;border:1px solid var(--red);color:var(--red);border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;transition:all .2s}
.bol-delete:hover{background:var(--red);color:white}

/* ======================== MODAL ======================== */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);display:flex;justify-content:center;align-items:center;z-index:200;backdrop-filter:blur(4px)}
.modal-box{background:var(--bg);border-radius:16px;width:750px;max-height:85vh;overflow-y:auto;padding:28px;position:relative;box-shadow:0 16px 48px rgba(0,0,0,.15)}
.modal-sm{width:440px}
.modal-close{position:absolute;top:12px;right:16px;font-size:20px;cursor:pointer;color:var(--text3);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.modal-close:hover{background:rgba(0,0,0,.08)}
.admin-scroll{max-height:75vh;overflow-y:auto}
.admin-section{background:var(--card);border-radius:10px;padding:16px;margin-top:14px;border:1px solid var(--border)}
.admin-section h3{font-size:14px;font-weight:700;margin-bottom:12px}

/* Admin table */
.admin-table-wrap{overflow-x:auto;margin-top:8px}
.admin-table{width:100%;border-collapse:collapse;font-size:12px}
.admin-table th{text-align:left;padding:6px 8px;background:#f5f5f2;font-weight:600;color:var(--text3);font-size:11px;border-bottom:1px solid var(--border)}
.admin-table td{padding:6px 8px;border-bottom:1px solid #f0f0ec;vertical-align:middle}
.admin-table tr:hover{background:#fafaf8}
.key-cell{font-family:Consolas,monospace;font-size:11px;color:var(--blue)}
.status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.st-available{background:#e4f5ec;color:var(--green)}
.st-used{background:#e8f4fd;color:var(--blue)}
.st-expired{background:#fdeeed;color:var(--red)}
.gen-key-display{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 16px;background:#e4f5ec;border-radius:10px}
.gen-key-text{font-family:Consolas,monospace;font-size:18px;font-weight:700;color:var(--green);letter-spacing:1px}

/* ======================== RESPONSIVE ======================== */
@media(max-width:800px){.home-grid{grid-template-columns:1fr}.type-grid{grid-template-columns:1fr}.editor-split{grid-template-columns:1fr}.form-row{flex-direction:column;gap:6px}.activation-card,.auth-card{width:95%}.modal-box{width:95%;margin:10px}}

main{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ======================== DASHBOARD ======================== */

.dashboard-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 26px 40px;
}

.dashboard-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-back-btn {
  min-width: 110px;
  font-weight: 700;
}

.dashboard-title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text);
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 22px;
  margin-bottom: 26px;
}

.dashboard-stat-card {
  background: #ffffff;
  border: 1px solid #ddd6c8;
  border-radius: 24px;
  min-height: 170px;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.dashboard-stat-icon {
  font-size: 2.1rem;
  margin-bottom: 12px;
}

.dashboard-stat-value {
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  color: #2f6486;
  margin-bottom: 10px;
}

.dashboard-stat-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #7d7a72;
  letter-spacing: 0.02em;
}

.dashboard-history-card {
  background: #ffffff;
  border: 1px solid #ddd6c8;
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.dashboard-history-header {
  font-size: 1.05rem;
  font-weight: 800;
  color: #232323;
  padding: 22px 26px 16px;
  border-bottom: 1px solid #e6dfd2;
}

.dashboard-history-table-wrap {
  padding: 14px 22px 18px;
  overflow-x: auto;
}

.dashboard-history-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.dashboard-history-table th {
  text-align: left;
  font-size: 0.9rem;
  color: #8a857a;
  font-weight: 700;
  padding: 12px 10px;
  border-bottom: 1px solid #ece6db;
  white-space: nowrap;
}

.dashboard-history-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #f1ece3;
  font-size: 0.95rem;
  color: #2d2d2d;
  vertical-align: middle;
}

.dashboard-history-table tbody tr:hover {
  background: #faf8f3;
}

.dashboard-file-cell {
  font-weight: 600;
  color: #3f4a5a;
}

.dashboard-empty {
  padding: 56px 20px;
  text-align: center;
  color: #8b867a;
  font-size: 1.1rem;
}

@media (max-width: 1100px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 700px) {
  .dashboard-page {
    padding: 16px 14px 28px;
  }

  .dashboard-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .dashboard-title {
    font-size: 1.6rem;
  }

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

  .dashboard-stat-card {
    min-height: 140px;
    border-radius: 18px;
  }

  .dashboard-history-card {
    border-radius: 18px;
  }
}

/* ======================== CONTACT PAGE ======================== */

.contact-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 28px 42px;
}

.contact-topbar {
  margin-bottom: 18px;
}

.contact-back-btn {
  min-width: 120px;
  font-weight: 800;
}

.contact-card {
  background: #ffffff;
  border: 1px solid #ddd6c8;
  border-radius: 28px;
  padding: 56px 40px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.contact-icon {
  font-size: 3.6rem;
  margin-bottom: 24px;
}

.contact-company {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #2f6486;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.contact-name {
  font-size: 2.4rem;
  font-weight: 900;
  color: #17233c;
  margin-bottom: 10px;
  line-height: 1.15;
}

.contact-role {
  font-size: 1.1rem;
  color: #8a857a;
  font-weight: 700;
  margin-bottom: 28px;
}

.contact-divider {
  height: 1px;
  background: #e6dfd2;
  margin: 24px auto;
  max-width: 860px;
}

.contact-email-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-email-icon {
  font-size: 1.5rem;
}

.contact-email-link {
  font-size: 1.2rem;
  font-weight: 800;
  color: #2f6486;
  text-decoration: none;
}

.contact-email-link:hover {
  text-decoration: underline;
}

.contact-note {
  font-size: 1rem;
  color: #8b867a;
  font-weight: 600;
}

@media (max-width: 760px) {
  .contact-page {
    padding: 16px 14px 28px;
  }

  .contact-card {
    padding: 34px 18px;
    border-radius: 20px;
  }

  .contact-name {
    font-size: 1.8rem;
  }

  .contact-company {
    font-size: 0.92rem;
    letter-spacing: 0.08em;
  }

  .contact-email-link {
    font-size: 1rem;
  }
}