* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f6fa;
    color: #1f2937;
}

.header {
    background: #0b4f9c;
    color: #ffffff;
    padding: 20px 28px;
}

.header h1 {
    margin: 0 0 5px;
    font-size: 24px;
}

.header p {
    margin: 0;
    color: #dbeafe;
    font-size: 14px;
}

.container {
    max-width: 1200px;
    margin: 25px auto;
    padding: 0 20px;
}

.card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
}

.card-title {
    margin: 0 0 18px;
    font-size: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

label {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

select,
input,
button {
    font: inherit;
}

select,
input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    padding: 9px 11px;
    background: #ffffff;
}

select:focus,
input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}

.status {
    padding: 12px 14px;
    border-radius: 7px;
    font-size: 14px;
}

.status.info {
    background: #eff6ff;
    color: #1d4ed8;
}

.status.success {
    background: #ecfdf5;
    color: #047857;
}

.status.error {
    background: #fef2f2;
    color: #b91c1c;
}

.item-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.detail-box {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 8px;
    padding: 13px;
    overflow-wrap: anywhere;
}

.detail-label {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 5px;
}

.detail-value {
    font-size: 14px;
    font-weight: 700;
}

.direction-in {
    color: #047857;
}

.direction-out {
    color: #0ea5e9;
}

.hidden {
    display: none;
}

@media (max-width: 768px) {
    .form-grid,
    .item-detail-grid {
        grid-template-columns: 1fr;
    }
}
.button {
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 700;
    transition:
        background 0.2s ease,
        opacity 0.2s ease,
        transform 0.1s ease;
}

.button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.button-primary {
    background: #0b4f9c;
    color: #ffffff;
}

.button-primary:hover:not(:disabled) {
    background: #083f7d;
}

.button-secondary {
    background: #e8eef6;
    color: #1e3a5f;
}

.button-secondary:hover:not(:disabled) {
    background: #d9e4f2;
}

.graph-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.graph-title {
    margin-bottom: 5px;
}

.graph-period {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.summary-card {
    min-width: 0;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 9px;
    padding: 15px;
}

.summary-card.summary-in {
    border-left: 4px solid #16803c;
}

.summary-card.summary-out {
    border-left: 4px solid #38bdf8;
}

.summary-label {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 7px;
}

.summary-value {
    display: block;
    color: #0f172a;
    font-size: 19px;
    overflow-wrap: anywhere;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 430px;
}

.graph-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 12px;
}

@media (max-width: 1050px) {
    .summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .graph-header {
        flex-direction: column;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-wrapper {
        height: 340px;
    }

    .graph-footer {
        flex-direction: column;
        gap: 5px;
    }
}
.form-help {
    color: #64748b;
    font-size: 12px;
    margin-top: 2px;
}

#host-search {
    margin-bottom: 5px;
}
#interface-select option {
    padding: 6px;
}


.quick-range {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.button-chip {
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.button-chip:hover:not(:disabled) {
    background: #dbeafe;
}

.action-row {
    align-items: flex-end;
}

.action-row .button-primary {
    min-width: 180px;
}

input[type="datetime-local"] {
    min-width: 0;
}

.summary-card.summary-in {
    border-left-color: #16a34a;
}

.summary-card.summary-out {
    border-left-color: #0ea5e9;
}

@media (max-width: 768px) {
    .action-row {
        align-items: stretch;
    }

    .action-row .button-primary {
        width: 100%;
    }
}
.embed-intro{margin:-8px 0 18px}.embed-result{margin-top:18px;padding-top:18px;border-top:1px solid #e5e7eb}.embed-result>label{display:block;margin:14px 0 7px}.copy-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}.copy-row textarea{width:100%;border:1px solid #cbd5e1;border-radius:7px;padding:10px;resize:vertical;font-family:monospace}.embed-preview{margin-top:18px;border:1px solid #dbe3ee;border-radius:10px;overflow:hidden;background:#f8fafc}.embed-preview iframe{display:block;width:100%;height:560px;border:0}@media(max-width:768px){.copy-row{grid-template-columns:1fr}.embed-preview iframe{height:620px}}

/* v2.2.8 - simplified customer embed builder */
.builder-header{display:flex;align-items:center;justify-content:space-between;padding:22px 32px;background:linear-gradient(135deg,#0b4f9c,#0a3f7c)}
.builder-container{max-width:1040px}
.builder-step,.builder-panel{border-radius:14px;padding:24px 26px}
.step-heading,.panel-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.step-heading .card-title,.panel-heading .card-title{margin:0 0 4px}
.step-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#eaf2ff;color:#0b4f9c;font-size:15px;font-weight:800}
.host-lookup{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:end}
.compact-status{margin-top:16px;padding:10px 12px}
.builder-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.builder-action-button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;min-height:112px;padding:20px;border:1px solid #d7e1ee;border-radius:13px;background:#fff;text-align:left;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.builder-action-button:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(15,23,42,.08)}
.builder-action-button strong{font-size:17px;color:#0f172a}
.builder-action-button span{font-size:12px;line-height:1.5;color:#64748b}
.preview-action:hover{border-color:#86b7f3}.embed-action:hover{border-color:#6fd0a0}
.builder-panel{border-top:4px solid #0b4f9c}
.panel-heading{justify-content:space-between;align-items:center}
.panel-kicker{display:block;color:#0b4f9c;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.button-ghost{background:transparent;color:#64748b;border:1px solid #dbe3ee;min-height:36px;padding:7px 12px}
.compact-grid{gap:14px}
.result-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;margin-bottom:16px}
.result-heading>div{display:flex;flex-direction:column;gap:3px}.result-heading strong{color:#166534;font-size:14px}.result-heading span{color:#64748b;font-size:11px}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f8fafc;border-bottom:1px solid #dbe3ee}.preview-toolbar strong{font-size:13px;color:#334155}
.embed-preview.hidden{display:none}.embed-preview{margin-top:18px}
#host-select-wrap.hidden,#interface-step-card.hidden,#builder-actions-card.hidden,#preview-config-card.hidden,#embed-generator-card.hidden{display:none!important}
@media(max-width:768px){.host-lookup,.builder-actions{grid-template-columns:1fr}.builder-header{padding:18px 20px}.builder-step,.builder-panel{padding:20px}.result-heading{align-items:flex-start;flex-direction:column}.panel-heading{align-items:flex-start}.panel-heading .button-ghost{flex:0 0 auto}}


/* v2.2.10 - compact searchable host combobox + cleaner builder */
.host-lookup-single{display:block;max-width:760px;margin:0 auto}
.host-combobox-group{position:relative;margin:0}
.host-combobox{position:relative}
.host-combobox input[type="search"]{height:54px;padding-left:46px;padding-right:18px;border:1px solid #c9d7e8;border-radius:13px;background:#fff;font-size:16px;font-weight:600;box-shadow:0 5px 18px rgba(15,23,42,.045);transition:border-color .15s ease,box-shadow .15s ease}
.host-combobox input[type="search"]:focus{border-color:#4b8fd8;box-shadow:0 0 0 3px rgba(37,99,235,.10),0 8px 24px rgba(15,23,42,.06)}
.host-search-icon{position:absolute;z-index:2;left:16px;top:50%;transform:translateY(-50%);font-size:25px;line-height:1;color:#64748b;pointer-events:none}
.host-suggestions{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 7px);max-height:330px;overflow:auto;padding:7px;background:#fff;border:1px solid #d7e1ee;border-radius:12px;box-shadow:0 18px 45px rgba(15,23,42,.15)}
.host-suggestions.hidden{display:none!important}
.host-suggestion{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border:0;border-radius:9px;background:transparent;text-align:left;cursor:pointer;color:#172033}
.host-suggestion:hover,.host-suggestion:focus{background:#eff6ff;outline:none}
.host-suggestion-main{display:flex;min-width:0;flex-direction:column;gap:2px}
.host-suggestion-name{font-size:14px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host-suggestion-tech{font-size:10px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host-suggestion-id{flex:0 0 auto;padding:4px 7px;border-radius:6px;background:#f1f5f9;color:#64748b;font-size:10px;font-weight:700}
.host-suggestion-empty{padding:14px 12px;color:#64748b;font-size:12px;text-align:center}
.host-search-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.selected-host-display{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:999px;background:#ecfdf5;color:#166534;font-size:11px;font-weight:700}
.selected-host-display::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e}
.selected-host-display.hidden{display:none!important}
.builder-host-select-source{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.builder-actions-card-clean{}
#status-box.hidden{display:none!important}
@media(max-width:768px){.host-lookup-single{max-width:none}.host-search-meta{align-items:flex-start;flex-direction:column}.host-combobox input[type="search"]{height:50px;font-size:14px}}


/* v2.2.11 - Builder authentication */
.builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.builder-header-copy { min-width: 0; }
.builder-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.builder-user-label {
    font-size: 12px;
    color: #dbeafe;
    margin-right: 4px;
}
.header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,.08);
}
.header-link:hover { background: rgba(255,255,255,.16); }
.header-link-logout { background: rgba(15,23,42,.18); }

.auth-page {
    background: #eef3f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
}
.auth-shell { width: 100%; max-width: 460px; }
.auth-card {
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
}
.auth-brand img {
    width: 68px;
    height: 52px;
    object-fit: contain;
}
.auth-brand span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 3px;
}
.auth-brand h1 {
    margin: 0;
    color: #0f2747;
    font-size: 22px;
}
.auth-description {
    margin: 0 0 22px;
    color: #64748b;
    line-height: 1.55;
    font-size: 14px;
}
.auth-form { display: grid; gap: 16px; }
.auth-submit { width: 100%; margin-top: 2px; }
.auth-error { margin-bottom: 18px; }
.auth-note {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}
.auth-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
.auth-link-button { text-decoration: none; }

@media (max-width: 720px) {
    .builder-header { align-items: flex-start; flex-direction: column; }
    .builder-user-menu { justify-content: flex-start; }
    .auth-card { padding: 24px 20px; }
}