:root {
    --bg:#f4f5f7; --panel:#fff; --panel-soft:#f8f9fb; --border:#dfe3e8;
    --text:#22262b; --muted:#6d747c; --hover:#eef1f4; --active:#e7eaee;
    --button:#2e3338; --button-text:#fff; --danger:#b84040; --danger-bg:#fff1f1;
    --success:#287a4b; --success-bg:#edf8f1; --shadow:0 8px 28px rgba(0,0,0,.08);
    --cat-1:#d77a61; --cat-2:#4f8db8; --cat-3:#79a66a; --cat-4:#b07aa1;
    --cat-5:#c89b4f; --cat-6:#5f9d91; --cat-7:#8a79b8; --cat-8:#c06f8a;
    --cat-9:#6f9eae; --cat-10:#9a8c68; --cat-11:#ba7651; --cat-12:#668f74;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit}.app{min-height:100vh;display:grid;grid-template-rows:58px 1fr 30px}
.topbar{background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:relative;z-index:30}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.menu-toggle{display:none;border:0;background:transparent;font-size:24px;padding:4px 8px}.top-actions{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;padding:8px 12px;cursor:pointer}.btn:hover{background:var(--hover)}.btn.primary{background:var(--button);color:var(--button-text);border-color:var(--button)}.btn.danger{background:var(--danger);color:white;border-color:var(--danger)}.btn.danger-outline{color:var(--danger);border-color:#e2bcbc}.layout{display:grid;grid-template-columns:285px minmax(0,1fr);min-height:0}.sidebar{background:var(--panel);border-right:1px solid var(--border);padding:14px;overflow-y:auto}.search{width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--panel-soft);outline:none;margin-bottom:12px}.sort-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}.sort-row label{color:var(--muted);font-size:13px}.sort-row select{flex:1;border:1px solid var(--border);border-radius:8px;padding:7px 9px;background:var(--panel)}.category-title{display:flex;align-items:center;gap:8px;padding:8px 5px 5px;font-weight:700;font-size:14px}.color-bar{width:5px;height:20px;border-radius:4px;display:inline-block;flex:0 0 5px}.mini-color{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:8px}.cat-1{background:var(--cat-1)}.cat-2{background:var(--cat-2)}.cat-3{background:var(--cat-3)}.cat-4{background:var(--cat-4)}.cat-5{background:var(--cat-5)}.cat-6{background:var(--cat-6)}.cat-7{background:var(--cat-7)}.cat-8{background:var(--cat-8)}.cat-9{background:var(--cat-9)}.cat-10{background:var(--cat-10)}.cat-11{background:var(--cat-11)}.cat-12{background:var(--cat-12)}.page-link{display:block;width:100%;padding:8px 10px 8px 17px;border-radius:7px}.page-link:hover{background:var(--hover)}.page-link.active{background:var(--active);font-weight:600}.empty-sidebar{color:var(--muted);font-size:14px;padding:10px 4px}.content{padding:26px;overflow-y:auto}.note-shell{max-width:980px;margin:0 auto}.note-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.note-category{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;margin-bottom:5px}.note-category .color-bar{height:16px}.note-title{margin:0;font-size:clamp(28px,4vw,40px);line-height:1.15}.note-actions{display:flex;gap:8px}.note-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:clamp(18px,4vw,34px)}.markdown-body{line-height:1.65}.markdown-body p{margin:0 0 1em}.markdown-body ul{padding-left:1.5rem}.markdown-body .task-list{list-style:none;padding-left:0}.task-item{margin:.45em 0}.task-item label{display:flex;align-items:flex-start;gap:9px}.task-item input{width:18px;height:18px;margin-top:.2em}.markdown-body pre{overflow:auto;background:#f1f3f5;border-radius:8px;padding:14px}.markdown-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f1f3f5;border-radius:5px;padding:.12em .35em}.markdown-body pre code{padding:0}.markdown-body a{text-decoration:underline;text-underline-offset:2px}.page-meta{color:var(--muted);font-size:12px;text-align:right;margin-top:10px}.editor-meta{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;margin-bottom:12px}.editor-meta input,.settings-form input,.copy-row input,.modal input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 11px;background:var(--panel)}.toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--panel-soft);border:1px solid var(--border);border-bottom:0;border-radius:9px 9px 0 0}.tool{min-width:38px;height:34px;border:1px solid var(--border);background:var(--panel);border-radius:6px;cursor:pointer}.tool:hover{background:var(--hover)}#editorText{width:100%;min-height:440px;resize:vertical;border:1px solid var(--border);border-radius:0 0 9px 9px;padding:14px;outline:none;line-height:1.55;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.editor-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.footer{border-top:1px solid var(--border);background:var(--panel);color:var(--muted);display:flex;align-items:center;justify-content:flex-end;padding:0 14px;font-size:12px}.alert{padding:10px 13px;border-radius:9px;margin-bottom:14px;border:1px solid}.alert.error{background:var(--danger-bg);color:#8a2d2d;border-color:#eccaca}.alert.success{background:var(--success-bg);color:var(--success);border-color:#cce7d6}.welcome{text-align:center;padding:56px 24px}.welcome h1{margin-top:0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.settings-section h2{margin-top:0}.settings-form{display:grid;gap:12px}.settings-form label,.auth-form label{display:grid;gap:5px;font-size:14px}.help{color:var(--muted);font-size:13px;line-height:1.5}.copy-row{display:flex;gap:8px;margin:12px 0}.copy-row input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.mobile-actions{display:none;position:relative}.mobile-menu{display:none;position:absolute;right:0;top:44px;min-width:160px;background:var(--panel);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);padding:6px;z-index:40}.mobile-menu.show{display:block}.mobile-menu button,.mobile-menu a{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:6px;cursor:pointer}.mobile-menu button:hover,.mobile-menu a:hover{background:var(--hover)}.scrim{display:none}.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:60;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.modal-card{width:min(460px,100%);background:var(--panel);border-radius:14px;padding:22px;box-shadow:var(--shadow)}.modal-card h2{margin-top:0}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.auth-body{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:28px}.auth-card h1{margin-top:0}.auth-form{display:grid;gap:14px}.auth-form input{width:100%;border:1px solid var(--border);border-radius:8px;padding:11px}.auth-version{text-align:right;color:var(--muted);font-size:12px;margin-top:18px}
@media(max-width:760px){.app{grid-template-rows:54px 1fr 28px}.menu-toggle{display:inline-block}.desktop-actions{display:none}.mobile-actions{display:flex;align-items:center;gap:6px}.mobile-new,.mobile-more{min-width:40px;padding:7px 10px;font-size:18px;line-height:1}.layout{display:block}.sidebar{position:fixed;top:54px;left:0;bottom:28px;width:min(88vw,320px);z-index:20;transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.scrim{position:fixed;inset:54px 0 28px;background:rgba(0,0,0,.28);z-index:10}.scrim.show{display:block}.content{padding:14px}.note-header{align-items:center}.note-actions{flex-wrap:wrap;justify-content:flex-end}.editor-meta,.settings-grid{grid-template-columns:1fr}#editorText{min-height:52vh}.topbar{padding:0 10px}.copy-row{flex-direction:column}}

.settings-form select { width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 11px; background:var(--panel); color:var(--text); }
.about-text { line-height:1.65; }

.auth-form select { width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 11px; background:var(--panel); color:var(--text); }

.checkbox-label{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px!important}
.checkbox-label input[type=checkbox]{width:18px!important;height:18px!important;margin:0}
.settings-divider{border:0;border-top:1px solid var(--border);margin:8px 0}


/* v0.6.0 setup UI fix */
[hidden] {
    display: none !important;
}

.auth-form .setup-checkbox {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 4px 0 2px;
}

.auth-form .setup-checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    flex: 0 0 18px;
}

.auth-form .setup-checkbox span {
    line-height: 1.3;
}

.setup-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 6px 0 4px;
    border: 1px solid #cfdceb;
    background: #f1f6fb;
    border-radius: 8px;
    color: var(--text);
    line-height: 1.45;
}

.setup-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3f86c7;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.success-info {
    margin-top: 4px;
    border-color: #d5e6d7;
    background: #f2f8f2;
}

.success-info .setup-info-icon {
    background: #4b9b59;
}

.conditional-field {
    width: 100%;
}

.security-log-link{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.security-log-link h3{margin:0 0 6px;font-size:16px}
.table-wrap{width:100%;overflow-x:auto}
.login-table{width:100%;border-collapse:collapse;min-width:620px}
.login-table th,.login-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.login-table th{background:var(--panel-soft);font-size:13px}
.login-result{font-weight:600}
.login-result.ok{color:#3f7f4b}
.login-result.fail{color:#a43d3d}
.compact-form{margin:12px 0}

/* v0.6.1 UI consistency */
.btn.danger{
    background:#a84b4b;
    color:#fff;
    border-color:#a84b4b;
}
.btn.danger:hover{
    background:#943f3f;
    border-color:#943f3f;
}
.mobile-menu a.mobile-primary{
    background:var(--button);
    color:var(--button-text);
}
.mobile-menu a.mobile-primary:hover{
    background:#252a2f;
}
.mobile-menu a.mobile-danger{
    color:#a33f3f;
}
.mobile-menu a.mobile-danger:hover{
    background:#fff1f1;
    color:#8e3434;
}

/* Markdown tables (v0.7.0) */
.markdown-table-wrap{
    width:100%;
    overflow-x:auto;
    margin:18px 0;
    -webkit-overflow-scrolling:touch;
}
.markdown-table{
    width:100%;
    min-width:520px;
    border-collapse:collapse;
}
.markdown-table th,
.markdown-table td{
    padding:10px 18px;
    text-align:left;
    vertical-align:top;
    white-space:nowrap;
}
.markdown-table th{
    font-weight:600;
    border-bottom:2px solid var(--border);
}
.markdown-table td{
    border-bottom:1px solid var(--border);
}
.markdown-table tbody tr:last-child td{
    border-bottom:0;
}
.markdown-table th:first-child,
.markdown-table td:first-child{
    padding-left:0;
}
.markdown-table th:last-child,
.markdown-table td:last-child{
    padding-right:0;
}

/* v0.8.0: compact category accordion */
.category-group{margin:0 0 2px}
.category-title.category-toggle{width:100%;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left;padding:8px 5px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;border-radius:7px}
.category-title.category-toggle:hover{background:var(--hover)}
.category-chevron{width:12px;flex:0 0 12px;color:var(--muted);font-size:18px;line-height:1;transform:rotate(0deg);transition:transform .15s ease}
.category-group.open .category-chevron{transform:rotate(90deg)}
.category-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-count{margin-left:auto;color:var(--muted);font-size:12px;font-weight:500;min-width:20px;text-align:right}
.category-pages{display:none;padding:1px 0 5px}
.category-group.open .category-pages{display:block}
.category-group .page-link{padding-left:30px}
.category-group.search-match .category-pages{display:block}
.category-group.search-hidden{display:none}


/* v0.8.0-beta2: clean page printing / browser Print to PDF */

.backup-warning {
    font-size: 0.9em;
}

.export-category-form {
    margin-top: 12px;
}

.settings-section .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@page {
    size: A4;
    margin: 16mm 15mm 18mm;
}

@media print {
    html,
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
        line-height: 1.45;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .app {
        display: block !important;
        min-height: 0 !important;
    }

    .topbar,
    .sidebar,
    .scrim,
    .footer,
    .note-actions,
    .page-meta,
    .alert,
    .modal {
        display: none !important;
    }

    .layout,
    .content,
    .note-shell {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .note-header {
        display: block !important;
        margin: 0 0 7mm !important;
        padding: 0 0 4mm !important;
        border-bottom: 1px solid #bbb;
    }

    .note-category {
        display: block !important;
        margin: 0 0 2mm !important;
        color: #555 !important;
        font-size: 10pt !important;
        line-height: 1.2 !important;
    }

    .note-category .color-bar {
        display: none !important;
    }

    .note-category::before {
        content: "FlatNote - ";
        font-weight: 600;
    }

    .note-title {
        margin: 0 !important;
        color: #000 !important;
        font-size: 22pt !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .note-card,
    .markdown-body {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        color: #000 !important;
        overflow: visible !important;
    }

    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4,
    .markdown-body h5,
    .markdown-body h6 {
        color: #000 !important;
        break-after: avoid-page;
        page-break-after: avoid;
    }

    .markdown-body p,
    .markdown-body li,
    .markdown-body blockquote {
        orphans: 3;
        widows: 3;
    }

    .markdown-body pre,
    .markdown-body blockquote,
    .markdown-body img,
    .markdown-table-wrap,
    .markdown-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .markdown-body img {
        display: block;
        max-width: 100% !important;
        height: auto !important;
    }

    .markdown-body a {
        color: #000 !important;
        text-decoration: underline;
    }

    .markdown-table-wrap {
        width: 100% !important;
        overflow: visible !important;
        margin: 4mm 0 !important;
    }

    .markdown-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
        border-collapse: collapse;
    }

    .markdown-table th,
    .markdown-table td {
        padding: 2mm 3mm !important;
        white-space: normal !important;
        color: #000 !important;
        border-bottom-color: #aaa !important;
    }

    .markdown-table th {
        border-bottom-color: #666 !important;
    }

    .markdown-body pre,
    .markdown-body code {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere;
    }
}