/* ============================================================
   IMAGE MEASUREMENT ANNOTATOR — measure.css
   Bảng màu: nền sáng trung tính + accent cam ấm (#D85A30)
   ============================================================ */

.mz-body {
    margin: 0;
    background: #f2f0ec;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #2b2620;
    -webkit-font-smoothing: antialiased;
}
.mz-body * { box-sizing: border-box; }

/* ---------- Fallback site header ---------- */
.mz-sitebar {
    display: flex; align-items: center; justify-content: space-between;
    height: 48px; padding: 0 16px;
    background: #2b2620; color: #fff;
}
.mz-sitebar-logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.3px; }
.mz-sitebar-logo span { color: #D85A30; }
.mz-sitebar-user { font-size: 13px; opacity: .8; }

/* ---------- Khung app ---------- */
.mz-app { display: flex; flex-direction: column; height: calc(100vh - 48px); min-height: 480px; }

/* ---------- Top toolbar ---------- */
.mz-topbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 6px 12px; background: #fff; border-bottom: 1px solid #ded9d1;
    min-height: 46px;
}
.mz-topbar-title { display: flex; align-items: baseline; gap: 8px; margin-right: 6px; }
.mz-topbar-title strong { font-size: 15px; color: #A23E1C; }
.mz-topbar-title .mz-sub { font-size: 11px; color: #99917f; }
.mz-topbar-group { display: flex; align-items: center; gap: 6px; }
.mz-topbar-spacer { flex: 1; }
.mz-lbl { font-size: 11px; color: #8b8374; text-transform: uppercase; letter-spacing: .4px; }

.mz-swatch {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; padding: 0; outline-offset: 2px;
}
.mz-swatch.is-active { border-color: #D85A30; box-shadow: 0 0 0 2px #fff inset; }

.mz-select {
    height: 28px; border: 1px solid #d5cfc5; border-radius: 6px; background: #faf9f7;
    font-size: 13px; padding: 0 4px; cursor: pointer;
}
.mz-btn-toggle {
    height: 28px; min-width: 28px; border: 1px solid #d5cfc5; border-radius: 6px;
    background: #faf9f7; cursor: pointer; font-size: 13px; color: #6d6558;
}
.mz-btn-toggle.is-active { background: #D85A30; border-color: #D85A30; color: #fff; }

.mz-zoom { font-size: 12px; color: #6d6558; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.mz-btn-sm {
    height: 28px; padding: 0 10px; border: 1px solid #d5cfc5; border-radius: 6px;
    background: #faf9f7; font-size: 12.5px; cursor: pointer; color: #2b2620;
}
.mz-btn-sm:hover { background: #f0ece6; }
.mz-btn-warn { color: #A23E1C; border-color: #e4b8a5; }

/* ---------- Layout chính ---------- */
.mz-main { display: flex; flex: 1; min-height: 0; }

/* ---------- Left toolbar ---------- */
.mz-tools {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 52px; padding: 8px 0; background: #fff; border-right: 1px solid #ded9d1;
    overflow-y: auto;
}
.mz-tool {
    position: relative;
    width: 40px; height: 40px; border: none; border-radius: 8px;
    background: transparent; color: #5c5548; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.mz-tool svg { width: 21px; height: 21px; fill: currentColor; }
.mz-tool span {
    position: absolute; right: 3px; bottom: 2px; font-size: 8.5px; color: #b0a894; font-weight: 700;
}
.mz-tool:hover { background: #f0ece6; }
.mz-tool.is-active { background: #D85A30; color: #fff; }
.mz-tool.is-active span { color: rgba(255,255,255,.75); }
.mz-tools-sep { width: 26px; height: 1px; background: #ded9d1; margin: 6px 0; }

/* ---------- Workspace / canvas ---------- */
.mz-workspace {
    position: relative; flex: 1; min-width: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* nền checkerboard xám */
    background-color: #e8e5e0;
    background-image:
        linear-gradient(45deg, #dcd8d1 25%, transparent 25%, transparent 75%, #dcd8d1 75%),
        linear-gradient(45deg, #dcd8d1 25%, transparent 25%, transparent 75%, #dcd8d1 75%);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    touch-action: none; /* để tự xử lý pinch zoom trên mobile */
}
.mz-canvas-wrap { position: relative; box-shadow: 0 4px 18px rgba(43,38,32,.18); }
.mz-canvas-wrap canvas { display: block; }

/* Input nổi sửa nhãn */
.mz-label-editor {
    position: absolute; z-index: 30;
    transform: translate(-50%, -50%);
    min-width: 90px; max-width: 240px;
    padding: 5px 8px; border: 2px solid #D85A30; border-radius: 6px;
    background: #fff; font-size: 15px; font-weight: 700; text-align: center;
    outline: none; box-shadow: 0 3px 12px rgba(0,0,0,.25);
}

/* ---------- Dropzone ---------- */
.mz-dropzone {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242,240,236,.96);
}
.mz-dropzone.is-dragover .mz-dropzone-inner { border-color: #D85A30; background: #fdf6f2; }
.mz-dropzone-inner {
    width: min(480px, 92%); padding: 36px 28px; text-align: center;
    border: 2px dashed #c9c2b6; border-radius: 14px; background: #fff;
    transition: border-color .15s, background .15s;
}
.mz-dz-icon { color: #D85A30; margin-bottom: 6px; }
.mz-dropzone-inner h2 { margin: 4px 0 4px; font-size: 19px; color: #2b2620; }
.mz-dropzone-inner p { margin: 0 0 18px; font-size: 13px; color: #8b8374; }
.mz-dz-actions { margin-bottom: 14px; }
.mz-dz-url { display: flex; gap: 6px; }
.mz-dz-url input {
    flex: 1; height: 34px; border: 1px solid #d5cfc5; border-radius: 6px;
    padding: 0 10px; font-size: 13px;
}
.mz-dz-error { margin-top: 10px; font-size: 13px; color: #c22a12; min-height: 18px; }

/* ---------- Nút chính ---------- */
.mz-btn-primary {
    height: 38px; padding: 0 20px; border: none; border-radius: 8px;
    background: #D85A30; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.mz-btn-primary:hover { background: #c14d27; }
.mz-btn-primary:disabled { background: #d8d2c8; cursor: not-allowed; }
.mz-btn-cloud {
    height: 40px; border: none; border-radius: 8px; margin-top: 10px;
    background: #2b2620; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mz-btn-cloud small { font-weight: 400; opacity: .7; }
.mz-btn-cloud:hover { background: #443c31; }
.mz-btn-cloud:disabled { background: #d8d2c8; cursor: not-allowed; }
.mz-btn-block { width: 100%; display: block; }

/* ---------- Right panel ---------- */
.mz-panel {
    width: 250px; background: #fff; border-left: 1px solid #ded9d1;
    overflow-y: auto; flex-shrink: 0;
}
.mz-panel-section { padding: 14px 14px 16px; border-bottom: 1px solid #eee9e1; }
.mz-panel-section h3 {
    margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #A23E1C;
}
.mz-hint { margin: 0 0 10px; font-size: 12px; color: #8b8374; }
.mz-jpg-row { margin-top: 8px; }
.mz-quality-row { margin: 8px 0 2px; }
.mz-quality-row label { font-size: 12px; color: #6d6558; display: block; margin-bottom: 3px; }
.mz-quality-row input[type=range] { width: 100%; accent-color: #D85A30; }
.mz-save-result { margin-top: 8px; font-size: 12px; word-break: break-all; }
.mz-save-result a { color: #1565d8; }
.mz-save-result .ok { color: #1e7d32; }
.mz-save-result .err { color: #c22a12; }

/* History */
.mz-history-empty { font-size: 12.5px; color: #a89f8d; }
.mz-history-item {
    display: flex; gap: 8px; align-items: center; padding: 6px 0;
    border-bottom: 1px dashed #eee9e1;
}
.mz-history-item:last-child { border-bottom: none; }
.mz-history-thumb {
    width: 52px; height: 40px; border-radius: 5px; background: #eee9e1 center/cover no-repeat;
    flex-shrink: 0; border: 1px solid #ded9d1;
}
.mz-history-meta { flex: 1; min-width: 0; }
.mz-history-meta a {
    display: block; font-size: 12px; color: #1565d8; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mz-history-meta time { font-size: 10.5px; color: #a89f8d; }
.mz-history-copy {
    border: 1px solid #d5cfc5; background: #faf9f7; border-radius: 5px;
    font-size: 11px; padding: 3px 7px; cursor: pointer; flex-shrink: 0;
}
.mz-history-copy:hover { background: #f0ece6; }
.mz-history-copy:disabled { opacity: .4; cursor: default; }
.mz-history-item.is-expired { opacity: .5; }
.mz-history-item.is-expired .mz-history-thumb { filter: grayscale(1); }

/* Shortcuts */
.mz-shortcuts ul { margin: 0; padding: 0 0 0 2px; list-style: none; }
.mz-shortcuts li { font-size: 11.5px; color: #6d6558; margin-bottom: 5px; line-height: 1.5; }
.mz-shortcuts kbd {
    background: #f0ece6; border: 1px solid #d5cfc5; border-bottom-width: 2px;
    border-radius: 4px; padding: 0 4px; font-size: 10.5px; font-family: inherit;
}

/* ---------- Loading overlay ---------- */
.mz-loading {
    position: absolute; inset: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 10px;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.72); font-size: 14px; color: #2b2620;
}
.mz-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid #e4ded4; border-top-color: #D85A30;
    animation: mzspin .8s linear infinite;
}
@keyframes mzspin { to { transform: rotate(360deg); } }

/* ---------- Responsive / mobile ---------- */
@media (max-width: 900px) {
    .mz-app { height: auto; min-height: 100vh; }
    .mz-main { flex-direction: column; }
    .mz-tools {
        flex-direction: row; width: 100%; height: 48px; padding: 0 6px;
        border-right: none; border-bottom: 1px solid #ded9d1; overflow-x: auto; overflow-y: hidden;
    }
    .mz-tools-sep { width: 1px; height: 26px; margin: 0 6px; }
    .mz-workspace { min-height: 55vh; }
    .mz-panel { width: 100%; border-left: none; border-top: 1px solid #ded9d1; }
    .mz-topbar { gap: 8px; }
}

/* ============================================================
 * KHỐI NỘI DUNG SEO (dưới ứng dụng)
 * Nội dung này Google đọc được — KHÔNG dùng display:none để ẩn.
 * ============================================================ */
.mz-seo {
    background: #fff;
    border-top: 1px solid #ded9d1;
    padding: 40px 20px 60px;
    color: #2e2a25;
    line-height: 1.75;
    font-size: 16px;
}
.mz-seo-inner { max-width: 820px; margin: 0 auto; }

.mz-seo h1 {
    font-size: 28px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: #A23E1C;
    font-weight: 700;
}
.mz-seo h2 {
    font-size: 21px;
    margin: 36px 0 12px;
    color: #A23E1C;
    font-weight: 700;
}
.mz-seo h3 {
    font-size: 16px;
    margin: 0;
    display: inline;
    font-weight: 600;
    color: #2e2a25;
}
.mz-seo p { margin: 0 0 14px; }
.mz-seo-lead { font-size: 17px; color: #4a443c; }

.mz-seo-steps, .mz-seo-features, .mz-seo-links { margin: 0 0 14px; padding-left: 22px; }
.mz-seo-steps li, .mz-seo-features li, .mz-seo-links li { margin-bottom: 10px; }
.mz-seo-steps { counter-reset: none; }

.mz-seo kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #d5cfc6;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #f7f4ef;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
}

.mz-seo a { color: #D85A30; text-decoration: none; font-weight: 600; }
.mz-seo a:hover { text-decoration: underline; }

/* FAQ dạng gập — dùng <details> nên KHÔNG cần JS, Google vẫn đọc được
   toàn bộ nội dung câu trả lời dù đang đóng */
.mz-seo-faq details {
    border: 1px solid #e6e1d9;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: #fdfcfa;
}
.mz-seo-faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    position: relative;
    padding-right: 26px;
}
.mz-seo-faq summary::-webkit-details-marker { display: none; }
.mz-seo-faq summary::after {
    content: '+';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #D85A30;
    line-height: 1;
}
.mz-seo-faq details[open] summary::after { content: '−'; }
.mz-seo-faq details p { margin: 10px 0 0; color: #4a443c; }

@media (max-width: 640px) {
    .mz-seo { padding: 28px 16px 44px; font-size: 15px; }
    .mz-seo h1 { font-size: 23px; }
    .mz-seo h2 { font-size: 19px; }
}