/* theme-tokens */:root{--c1:#386248;--c2:#294a39;--c3:#e8efe5;--c4:#28372e;--c5:#879087;--c6:#e7eae3;--c7:#f8f9f5;--c8:#ffffff;--c9:#b44538;--c10:#26382b08;--c11:#dfe5db;--c12:#6f9474;--c13:#dfeadb85;--c14:#769d70;--c15:#294a39;--c16:#8fa779;--c17:#f0f4ec;--c18:#ffffff;--c19:#294f38;--c20:#e9c9c4;--c21:#778173;--c22:#eaf0e5;--c23:#386248;--c24:#f2f4ee;--c25:#e2e7dc;--c26:#9aa292;--c27:#e9eddf;--c28:#78826c;--c29:#87a56c;--c30:#75816b;--c31:#fbfbef;--c32:#d9dfce;--c33:#43553510;--c34:#9fa68c;--c35:#fffef9;--c36:#e8eadb;--c37:#919b83;--c38:#717b65;--c39:#6c835d;--c40:#eef1e2;--c41:#dbe6b6;--c42:#52613713;--c43:#89937a;--c44:#fdfefa;--c45:#8d9884;--c46:#7a9360;--c47:#698751;--c48:#9aa18f;--c49:#e9ecdf;--c50:#737e6b;--c51:#a1ad8e;--c52:#9ea694;--c53:#9ba391;--c54:#f4f6ef;--c55:#e3e9d8;--c56:#5c734c;--c57:#9aa28f;--c58:#294a3914;--c59:#b7c9b8;--c60:#ffffff15;--c61:#78836f;--c62:#edf0e6;--c63:#e3eadc;--c64:#35563a;--c65:#95a085;--c66:#9aa28e;--c67:#00000022;--c68:#789064;--c69:#e2e7d9;--c70:#f5f7f0;--c71:#869276;--c72:#dce9d5;--c73:#355c3b;--c74:#8f9984;--c75:#e0e6d8;--c76:#91aa79;--c77:#97a08c;--c78:#8baa74;--c79:#ffffffb8;--c80:#9ba48f;--c81:#6b795f;--c82:#c4cbbd;--c83:#f5f7f1;--c84:#eef0e8;--c85:#9ba58e;--c86:#96a087;--c87:#87967e;--c88:#a0aa92;--c89:#99a28c;--c90:#edf2e6;--c91:#e3ebd9;--c92:#8b9b78;--c93:#879777;--c94:#cbd9bd;--c95:#5c784b;--c96:#f7f9f0;--c97:#fffef6;--c98:#d2dec5;--c99:#5d753514;--c100:#b8c69e;--c101:#e2e8d9;--c102:#e0e9d2;--c103:#8d9b7c;--c104:#9aa68c;--c105:#b5c6a8;--c106:#f0f4e9;--c107:#8b9f75;--c108:#f5f0e5;--c109:#ad9771;--c110:#eceff6;--c111:#8c9bb3;--c112:#a1a995;--c113:#b5bda9;--c114:#b9cbaa;--c115:#9ca68e;--c116:#9aa58b;--c117:#f1f4eb;--c118:#93a180;--c119:#a6af9c;--c120:#f1f3ed;--c121:#dfd6a6;--c122:#b9a55a;--c123:#fafbf6;--c124:#a0aa94;--c125:#eaeee2;--c126:#60804c;--c127:#9aa78a;--c128:#9ea892;--c129:#bd7862;--c130:#b0b8a5;--c131:#94a087;--c132:#dfe6d6;--c133:#97a28c;--c134:#b8c7a7;--c135:#6c815d;--c136:#f1f5eb;--c137:#e2ead9;--c138:#93a085;--c139:#e8efe1;--c140:#4d6b40;--c141:#96a487;--c142:#fafbf8;--c143:#728365;--c144:#e3e9db;--c145:#a2ad95;--c146:#e8eddf;--c147:#879d74;--c148:#f8faf4;--c149:#53614b;--c150:#b6bfa9;--c151:#3d5134;--c152:#a4ba8d;--c153:#f5f8ef;--c154:#859974;--c155:#f3f5ee;--c156:#dce5d2;--c157:#edf1e5;--c158:#a4b092;--c159:#e4eadb;--c160:#fbfcf8;--c161:#9ca890;--c162:#abb59e;--c163:#fff4dc;--c164:#8b692d;--c165:#f3f7ed;--c166:#7f916d;--c167:#edf1e7;--c168:#edf4e5;--c169:#68854c;--c170:#f9eae5;--c171:#b47961;--c172:#9aa78c;--c173:#f9fbf5;--c174:#e2e9d7;--c175:#1e35273b;--c176:#20322555;--c177:#8e9d80;--c178:#91a27f;--c179:#8a9d78;--c180:#304f3d;--c181:#1d342533;--c182:#fff0cd;--c183:#856c38;--c184:#23342215;--c185:#1e332b66;--c186:#edf1e7;--c187:#53634d;--c188:#527b55;--c189:#f2f7ee;--c190:#dce4d6;--c191:#f7f9f3;--c192:#455a3e;--c193:#e0e7da;--c194:#65765b;--c195:#5b6f51;--c196:#477453;--c197:#24372414;--c198:#6d7e62;--c199:#829275;--c200:#5a7554;--c201:#85917d;--c202:#5b7753;--c203:#9aa68d;--c204:#6b9261;--c205:#dbe1d5;--c206:#7aa56f33;--c207:#fff3a3;--c208:#9aa38f;--c209:#8a9b7e;--c210:#60804c;--c211:#eef3e8;--c212:#8a9b7e;--c213:#2021212b;--c214:#b7a17b;--c215:#f4efe3;--c216:#7a6331;--c217:#f8e4e1;--c218:#f1dfae;--c219:#f9e2dd;--c220:#8a4a3f;--c221:#ebc5bd;--c222:#fffaf0;--c223:#eef1e7;--cs224:#ffffff;--cb225:#9fb48b;--cs226:#eef1e7;--ct227:#7f8a73;--cs228:#edf4e5;--ct229:#4f7a35;--cs230:#f9eae5;--ct231:#b4583a;--cb232:#eef1e7;--ct233:#5d6d51;--cs234:#eaf0f7;--ct235:#476381;--cs236:#f5eef8;--ct237:#7a5287;--cs238:#f9fbf5;--cs239:#fbf0e6;--ct240:#8a5a2b;--cs241:#3f8f5a;--ch242:#3f8f5a26;--ct243:#ffffff;--ct244:#2f7a4a;--cs245:#b7a17b;--cs246:#eeebe4;--cs247:#f6e7e3;--ct248:#8f4031;--cs249:#ece8f6;--ct250:#54467f;--cs251:#e6edf3;--ct252:#36536b}[data-theme=dark]{color-scheme:dark;--c1:#5e9774;--c2:#4e8167;--c3:#1d221b;--c4:#ccd8d1;--c5:#bdc2bd;--c6:#383f2f;--c7:#272920;--c8:#282828;--c9:#e4b9b4;--c10:#10181308;--c11:#333c2c;--c12:#4a634d;--c13:#5e874f85;--c14:#4b6747;--c15:#c3dbcf;--c16:#bcc9b1;--c17:#21251d;--c18:#ffffff;--c19:#4d8664;--c20:#754138;--c21:#c9cdc7;--c22:#1f231b;--c23:#bdd6c6;--c24:#23261e;--c25:#363d2d;--c26:#b7bcb2;--c27:#1e2019;--c28:#ccd0c8;--c29:#c1cfb4;--c30:#ccd0c8;--c31:#28281f;--c32:#5c6945;--c33:#14191010;--c34:#bbc0af;--c35:#2b2a22;--c36:#1e1f18;--c37:#bfc4b7;--c38:#ccd1c7;--c39:#cad4c4;--c40:#21221b;--c41:#707d43;--c42:#161a0f13;--c43:#c4c8bd;--c44:#292b22;--c45:#bec3b9;--c46:#cbd4c1;--c47:#cbd7c1;--c48:#b9beb3;--c49:#1f2019;--c50:#cbd0c8;--c51:#b7c0aa;--c52:#b6bbaf;--c53:#b8bdb1;--c54:#24271e;--c55:#1b1e17;--c56:#cad5c3;--c57:#b9beb2;--c58:#0f1a1414;--c59:#94ac95;--c60:#28282815;--c61:#cacfc7;--c62:#21231b;--c63:#1c1f18;--c64:#c1d6c4;--c65:#bdc3b4;--c66:#b9beb2;--c67:#80808022;--c68:#46543a;--c69:#363c2c;--c70:#25271f;--c71:#c5cabe;--c72:#191d17;--c73:#bfd7c2;--c74:#bec3b8;--c75:#1a1d17;--c76:#4e603d;--c77:#babfb3;--c78:#4b603b;--c79:#282828b8;--c80:#b8beb1;--c81:#ccd2c6;--c82:#9ea893;--c83:#25271f;--c84:#3e4331;--c85:#b8bfb0;--c86:#bcc2b4;--c87:#bfc6bb;--c88:#b6bdac;--c89:#babfb2;--c90:#20231c;--c91:#363d2d;--c92:#c2c9b9;--c93:#c2cabb;--c94:#576e3f;--c95:#c9d7c1;--c96:#26281f;--c97:#2b2a22;--c98:#586f3f;--c99:#161c0d14;--c100:#afbd94;--c101:#1b1e17;--c102:#1a1c16;--c103:#c0c7b8;--c104:#b8c0af;--c105:#546945;--c106:#22251d;--c107:#c1cbb7;--c108:#24221c;--c109:#cdc2ae;--c110:#1e2026;--c111:#a6b1c2;--c112:#b5bbad;--c113:#aab29e;--c114:#556c42;--c115:#b8bfaf;--c116:#b9c0b0;--c117:#23251d;--c118:#bec6b4;--c119:#b0b8a9;--c120:#3f4533;--c121:#797041;--c122:#d7ceaa;--c123:#282a21;--c124:#b5bcac;--c125:#3b4030;--c126:#3d5230;--c127:#b9c1af;--c128:#b6bdae;--c129:#d5b1a5;--c130:#acb4a2;--c131:#bbc2b4;--c132:#343b2b;--c133:#b9bfb2;--c134:#a7b794;--c135:#cbd3c5;--c136:#22251d;--c137:#353d2d;--c138:#bcc3b4;--c139:#1e211a;--c140:#c2d3bb;--c141:#bac2b1;--c142:#272a21;--c143:#cbd2c6;--c144:#1c1e18;--c145:#b4bcaa;--c146:#393f2f;--c147:#c1cbb8;--c148:#262920;--c149:#c5cdc0;--c150:#aab39c;--c151:#c9d6c3;--c152:#576c41;--c153:#24271f;--c154:#c2cbba;--c155:#24261e;--c156:#32392a;--c157:#3c4231;--c158:#b5bea8;--c159:#373d2d;--c160:#282a21;--c161:#b6beae;--c162:#afb8a4;--c163:#24221c;--c164:#e3d2b5;--c165:#23261e;--c166:#c7cec0;--c167:#3c4331;--c168:#20241c;--c169:#ccd9bf;--c170:#251f1d;--c171:#d4b8ac;--c172:#b8c0af;--c173:#262921;--c174:#363c2c;--c175:#0f1a133b;--c176:#47675055;--c177:#bec5b6;--c178:#bdc6b3;--c179:#c0c9b7;--c180:#57846a;--c181:#0f1a1333;--c182:#201e19;--c183:#dfd3b9;--c184:#11191015;--c185:#43695b66;--c186:#20231c;--c187:#c3ccc0;--c188:#456848;--c189:#22271e;--c190:#313a2b;--c191:#262820;--c192:#c5d2c1;--c193:#343c2c;--c194:#cad2c6;--c195:#cad3c5;--c196:#c1d7c7;--c197:#10191014;--c198:#cbd2c6;--c199:#c4cbbe;--c200:#c7d4c4;--c201:#c1c7be;--c202:#c7d4c4;--c203:#b8bfaf;--c204:#4c6845;--c205:#32392a;--c206:#415d3a33;--c207:#7e7744;--c208:#b8beb1;--c209:#55624c;--c210:#526d41;--c211:#21241c;--c212:#bec6b8;--c213:#1415152b;--c214:#cbbda5;--c215:#23211c;--c216:#dbceb2;--c217:#241d1c;--c218:#756538;--c219:#231d1b;--c220:#ddc0bb;--c221:#754338;--c222:#292620;--c223:#3e4331;--cs224:#282828;--cb225:#566944;--cs226:#21231c;--ct227:#c8ccc3;--cs228:#20241c;--ct229:#c1d9b3;--cs230:#251f1d;--ct231:#e4c0b4;--cb232:#3e4331;--ct233:#cbd3c5;--cs234:#1e2126;--ct235:#bfccd9;--cs236:#241f27;--ct237:#d2c1d7;--cs238:#262921;--cs239:#26211e;--ct240:#e4ccb4;--cs241:#2e553b;--ch242:#0c1c1226;--ct243:#ffffff;--ct244:#b2dcc1;--cs245:#685739;--cs246:#22201b;--cs247:#241e1c;--ct248:#e2bdb6;--cs249:#1f1d25;--ct250:#c5bfd9;--cs251:#1c2024;--ct252:#b9cad8}
@font-face{font-family:Notekrub;src:url('./fonts/sarabun-400-latin.woff2?v=1') format('woff2');font-display:swap;font-weight:400;}
@font-face{font-family:Notekrub;src:url('./fonts/sarabun-400-thai.woff2?v=1') format('woff2');font-display:swap;font-weight:400;unicode-range:U+0E00-0E7F;}
@font-face{font-family:Notekrub;src:url('./fonts/sarabun-600-latin.woff2?v=1') format('woff2');font-display:swap;font-weight:600;}
@font-face{font-family:Notekrub;src:url('./fonts/sarabun-600-thai.woff2?v=1') format('woff2');font-display:swap;font-weight:600;unicode-range:U+0E00-0E7F;}
@font-face{font-family:Notekrub;src:url('./fonts/sarabun-700-latin.woff2?v=1') format('woff2');font-display:swap;font-weight:700;}
@font-face{font-family:Notekrub;src:url('./fonts/sarabun-700-thai.woff2?v=1') format('woff2');font-display:swap;font-weight:700;unicode-range:U+0E00-0E7F;}
:root{--green:var(--c1);--green-dark:var(--c2);--green-light:var(--c3);--ink:var(--c4);--muted:var(--c5);--line:var(--c6);--paper:var(--c7);--white:var(--c8);--danger:var(--c9);--shadow:0 12px 40px var(--c10);font-family:Notekrub,'Segoe UI',Tahoma,sans-serif;color:var(--ink);font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button{color:inherit}a{color:var(--green);text-decoration:none}input,select,textarea{border:1px solid var(--c11);border-radius:9px;background:var(--c8);padding:12px;color:var(--ink);outline:0}input:focus,textarea:focus,select:focus{border-color:var(--c12);box-shadow:0 0 0 3px var(--c13)}button:focus-visible,a:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--c14);outline-offset:3px}[hidden]{display:none!important}.muted{color:var(--muted)}.brand{display:flex;align-items:center;gap:9px;font:700 29px 'Segoe UI',sans-serif;color:var(--c15);letter-spacing:-1.2px}.brand-dot{color:var(--c16);margin-left:-9px}.brand img{border-radius:10px}.btn{border:1px solid var(--line);background:var(--c8);border-radius:9px;padding:10px 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:.15s}.btn:hover{background:var(--c17)}.btn.primary{background:var(--green);border-color:var(--green);color:var(--c18)}.btn.primary:hover{background:var(--c19)}.btn.danger{color:var(--danger);border-color:var(--c20)}.btn.small{font-size:14px;padding:7px 12px}.full{width:100%}.icon{width:19px;height:19px;flex-shrink:0;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.icon-btn{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:7px;color:var(--c21)}.icon-btn:hover{background:var(--c22);color:var(--c23)}.text-btn{border:0;background:none;color:var(--green);padding:10px 0;font-size:15px}.eyebrow{font:600 12px 'Segoe UI',sans-serif;letter-spacing:2.5px}kbd{font:12px 'Segoe UI',sans-serif;background:var(--c24);padding:3px 5px;border:1px solid var(--c25);border-radius:4px;color:var(--c26)}.login-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-story{background:var(--c27);padding:44px 60px 24px;position:relative;display:flex;flex-direction:column;overflow:hidden}.story-copy{margin:70px auto 0;max-width:470px;width:100%}.story-copy .eyebrow{color:var(--c28)}.story-copy h1{font-size:clamp(48.5px,5.2vw,76px);line-height:1.38;letter-spacing:-2px;margin:22px 0}.story-copy h1 span{color:var(--c29)}.story-copy p{line-height:1.9;color:var(--c30);font-size:18.5px}.paper-scene{width:380px;height:300px;position:relative;margin:30px auto 25px}.paper{position:absolute;width:290px;height:240px;background:var(--c31);border:1px solid var(--c32);box-shadow:0 15px 30px var(--c33);border-radius:4px;padding:26px}.paper.rear{transform:rotate(-10deg);top:0;left:5px;color:var(--c34)}.paper.front{transform:rotate(7deg);top:28px;left:65px;background:var(--c35)}.paper-line{height:6px;background:var(--c36);border-radius:5px;margin-top:20px}.paper-line.short{width:65%}.mini-label{font-size:12px;letter-spacing:1.6px;color:var(--c37)}.paper h3{font-size:22px;margin:16px 0}.paper p{font-size:14px;color:var(--c38);margin:10px 0}.paper-tag{font-size:12px;color:var(--c39);background:var(--c40);padding:4px 8px;border-radius:4px}.floating-note{position:absolute;bottom:10px;left:-12px;background:var(--c41);padding:12px 20px;transform:rotate(-7deg);font:italic 17.5px Georgia,serif;box-shadow:0 4px 10px var(--c42)}.story-footer{margin-top:auto;display:flex;justify-content:space-between;color:var(--c43);font-size:12px;letter-spacing:.4px}.login-main{display:flex;flex-direction:column;padding:46px 54px 24px;background:var(--c44)}.login-top{font:600 12px 'Segoe UI',sans-serif;letter-spacing:2px;color:var(--c45);display:flex;justify-content:space-between}.login-top span{color:var(--c46);font-size:23px}.login-box{width:100%;max-width:370px;margin:auto; padding:40px 0}.login-mark{color:var(--c47);font-size:48.5px;margin-bottom:18px}.login-box h2{font-size:32px;letter-spacing:-.8px;margin:0 0 10px}.login-box>p{font-size:15px;margin-bottom:36px}.login-box label{display:block;margin:0 0 10px;font-size:15px;font-weight:600}.login-box input{width:100%;font-size:15px;padding:14px}.field-hint{font-size:12.5px;color:var(--c48);line-height:1.6;margin:10px 0 24px}.login-box .btn{padding:14px;font-size:16px;justify-content:space-between}.login-box .btn span{font-size:24px}.login-divider{height:1px;background:var(--c49);margin:26px 0}.login-reassurance{display:flex;gap:13px;align-items:center;color:var(--c50);font-size:14px}.login-reassurance>span{font-size:32px;color:var(--c51)}.login-reassurance small{font-size:12px;color:var(--c52)}.login-bottom{font-size:12px;color:var(--c53);display:flex;justify-content:space-between}.otp-input{font-size:31px!important;letter-spacing:12px;text-align:center}.form-error{color:var(--danger);font-size:14px;line-height:1.8}.resend{display:block;margin:8px auto}.workspace{height:100dvh;display:flex;overflow:hidden}.sidebar{width:242px;flex-shrink:0;background:var(--c54);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:28px 19px 12px;overflow-y:auto}.sidebar .brand{font-size:29px;margin:0 8px 28px}.profile-button{display:flex;align-items:center;gap:10px;text-align:left;border:0;background:none;padding:0 3px 22px;width:100%}.avatar{width:35px;height:35px;border-radius:50%;background:var(--c55);color:var(--c56);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.profile-button strong{display:block;font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-button small{display:block;color:var(--c57);font-size:12px;margin-top:2px}.profile-gear{margin-left:auto;color:var(--c57)}.profile-gear .icon{width:15px}.new-note{justify-content:flex-start;font-size:15px;padding:11px 14px;margin-bottom:22px;box-shadow:0 4px 10px var(--c58)}.new-note kbd{margin-left:auto;color:var(--c59);background:var(--c60);border:0}.main-nav{display:flex;flex-direction:column;gap:4px}.nav-item{width:100%;display:flex;align-items:center;gap:11px;text-align:left;border:0;background:transparent;color:var(--c61);padding:10px 12px;border-radius:7px;font-size:14px;min-height:39px}.nav-item:hover{background:var(--c62)}.nav-item.active{background:var(--c63);color:var(--c64);font-weight:600}.nav-item .icon{width:18px;height:18px}.nav-count{margin-left:auto;font-size:12px;color:var(--c65)}.nav-section{display:flex;align-items:center;justify-content:space-between;padding:24px 11px 7px;color:var(--c66);font-size:12px}.nav-section .icon-btn{width:24px;height:24px}.nav-section .icon{width:14px}.notebook-nav .nav-item{font-size:12.5px;padding:9px 12px}.book-color{width:11px;height:14px;border-radius:2px;border-left:3px solid var(--c67);background:var(--book-color,var(--c68));flex-shrink:0}.tag-nav{display:flex;gap:6px;flex-wrap:wrap;padding:4px 11px 20px}.tag-chip{border:1px solid var(--c69);background:var(--c70);font-size:12px;color:var(--c71);padding:4px 8px;border-radius:5px;cursor:pointer}.tag-chip.active{background:var(--c72);color:var(--c73)}.sidebar-bottom{margin-top:auto;padding-top:26px}.storage-label{display:flex;justify-content:space-between;font-size:12px;color:var(--c74);margin:24px 10px 8px}.storage-track{height:3px;background:var(--c75);margin:0 10px;border-radius:3px;overflow:hidden}.storage-track span{display:block;height:100%;background:var(--c76);min-width:3px}.workspace-status{display:flex;gap:7px;align-items:center;color:var(--c77);font-size:12px;margin:18px 9px 0}.workspace-status i{width:5px;height:5px;background:var(--c78);border-radius:50%}.workspace-status .icon-btn{margin-left:auto}.main-area{flex:1;min-width:0;background:var(--c44);display:flex;flex-direction:column}.topbar{height:78px;flex-shrink:0;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 38px;gap:24px;background:var(--c79)}.breadcrumb{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--c80);white-space:nowrap}.breadcrumb .icon{width:15px}.breadcrumb strong{font-weight:500;color:var(--c81)}.crumb-slash{color:var(--c82)}.search-wrap{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--c83);border:1px solid var(--c84);padding:7px 12px;border-radius:8px;max-width:325px;width:35%;color:var(--c85)}.search-wrap .icon{width:16px}.search-wrap input{width:100%;padding:0;border:0;background:transparent;font-size:12.5px;box-shadow:none}.search-wrap input::placeholder{color:var(--c85)}.search-wrap kbd{white-space:nowrap;font-size:12px;border:0;background:var(--c62)}.today-date{font-size:12px;color:var(--c86);white-space:nowrap}.main-content{flex:1;overflow:auto;padding:36px 38px 28px}.loading{padding:60px;text-align:center;color:var(--c87)}.home-greeting{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}.home-greeting .eyebrow{color:var(--c88);font-size:12px;letter-spacing:1.8px}.home-greeting h1{font-size:32px;letter-spacing:-.7px;font-weight:600;margin:8px 0}.home-greeting p{color:var(--c89);font-size:14px;margin:0}.greeting-right{display:flex;gap:8px;align-items:center;padding-top:20px}.greeting-right .btn{font-size:12.5px;background:transparent}.welcome-banner{display:flex;background:var(--c90);border:1px solid var(--c91);border-radius:12px;margin:0 0 30px;padding:26px 28px;position:relative;overflow:hidden;min-height:157px;align-items:center}.welcome-banner .mini-label{color:var(--c92);font-size:12px}.welcome-banner h2{font-size:24px;font-weight:600;letter-spacing:-.6px;margin:7px 0}.welcome-banner p{font-size:12.5px;color:var(--c93);margin:5px 0 15px}.welcome-banner button{font-size:12px;padding:7px 13px;border-color:var(--c94);color:var(--c95);background:var(--c96)}.banner-drawing{margin-left:auto;width:230px;height:120px;position:relative;flex-shrink:0}.draw-page{position:absolute;background:var(--c97);width:110px;height:135px;border:1px solid var(--c98);border-radius:4px;transform:rotate(12deg);right:50px;top:5px;padding:20px 14px;box-shadow:0 10px 20px var(--c99)}.draw-page:before{content:'✦';color:var(--c100);font-size:25.5px}.draw-line{height:4px;background:var(--c101);border-radius:3px;margin-top:11px}.draw-page.back{transform:rotate(-10deg);right:96px;top:-10px;background:var(--c102)}.draw-leaf{position:absolute;bottom:-5px;right:18px;font-size:79.5px;transform:rotate(-20deg);filter:grayscale(.6);opacity:.7}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:22px 0 14px}.section-heading h2{font-size:16px;font-weight:600;margin:0;display:flex;gap:10px;align-items:center}.section-heading h2 .icon{width:16px;color:var(--c103)}.section-heading button{border:0;background:none;color:var(--c104);font-size:12px}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:28px}.quick-card{display:flex;align-items:center;text-align:left;gap:13px;background:var(--c8);border:1px solid var(--line);border-radius:10px;padding:15px 18px;transition:.15s}.quick-card:hover{border-color:var(--c105);transform:translateY(-2px)}.quick-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--c106);color:var(--c107)}.quick-card:nth-child(2) .quick-icon{background:var(--c108);color:var(--c109)}.quick-card:nth-child(3) .quick-icon{background:var(--c110);color:var(--c111)}.quick-card strong{display:block;font-size:12.5px;font-weight:500}.quick-card small{display:block;color:var(--c112);font-size:12px;margin-top:3px}.quick-card>span:last-child{margin-left:auto;color:var(--c113)}.recent-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px}.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.note-card{background:var(--c8);border:1px solid var(--line);border-radius:10px;min-height:196px;padding:17px;text-align:left;display:flex;flex-direction:column;cursor:pointer;transition:.15s;position:relative}.note-card:hover{border-color:var(--c114);box-shadow:var(--shadow);transform:translateY(-2px)}.note-card .card-top{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--c115);font-size:12px}.note-card .card-top .icon{width:13px;height:13px}.card-notebook{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.note-card h3{font-size:15px;font-weight:600;line-height:1.65;margin:13px 0 7px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.note-card p{font-size:12px;line-height:1.85;color:var(--c116);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.card-tags{display:flex;gap:4px;margin:auto 0 11px;flex-wrap:wrap}.card-tags span{font-size:12px;padding:3px 5px;background:var(--c117);color:var(--c118);border-radius:3px}.card-bottom{font-size:12px;color:var(--c119);display:flex;justify-content:space-between;margin-top:auto;padding-top:9px;border-top:1px solid var(--c120)}.card-bottom .icon{width:12px;height:12px}.favorite-fill{fill:var(--c121);color:var(--c122)!important}.task-panel{border:1px solid var(--line);border-radius:11px;background:var(--c123);padding:18px;align-self:start}.task-panel h3{font-size:14px;font-weight:600;margin:0 0 7px}.task-panel>p{font-size:12px;color:var(--c124);margin:0 0 18px}.task-row{display:flex;align-items:flex-start;gap:10px;padding:13px 0;border-bottom:1px solid var(--c125)}.task-row input{accent-color:var(--c126);width:15px;height:15px;box-shadow:none;margin:2px 0 0;cursor:pointer;flex-shrink:0}.task-row strong{font-size:12.5px;font-weight:500;overflow-wrap:anywhere;display:block}.task-row small{display:block;font-size:12px;color:var(--c127);margin-top:3px}.task-row.completed strong{text-decoration:line-through;color:var(--c128)}.task-row.overdue small{color:var(--c129)}.task-row .task-actions{margin-left:auto;display:flex;flex-shrink:0}.task-row .task-actions .icon-btn{width:24px;height:24px}.task-panel .text-btn{font-size:12px;margin-top:10px}.home-bottom{color:var(--c130);font-size:12px;margin:26px 0 0;display:flex;align-items:center;gap:6px}.view-header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:24px}.view-header h1{font-size:30px;font-weight:600;letter-spacing:-.7px;margin:0 0 5px}.view-header p{font-size:12.5px;color:var(--c131);margin:0}.view-header .actions{display:flex;align-items:center;gap:8px}.view-header select{font-size:12.5px;padding:9px}.empty-state{padding:55px 24px;text-align:center;border:1px dashed var(--c132);border-radius:12px;color:var(--c133);grid-column:1/-1}.empty-state>.icon{width:34px;height:34px;margin-bottom:12px;color:var(--c134)}.empty-state h3{font-size:16px;color:var(--c135);font-weight:500}.empty-state p{font-size:12.5px;line-height:1.9}.all-notes .notes-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.tasks-page{max-width:920px}.task-add{display:flex;gap:10px;padding:18px;background:var(--c136);border:1px solid var(--c137);border-radius:12px;margin-bottom:24px}.task-add input[name=title]{flex:1;min-width:0;background:var(--c8)}.task-add input{font-size:14px}.tasks-page .task-row{padding:18px 12px}.tasks-page .task-row strong{font-size:16px}.tasks-page .task-row small{font-size:12px}.task-tabs{display:flex;gap:6px;margin-bottom:10px}.task-tabs button{border:0;background:transparent;padding:7px 14px;color:var(--c138);border-radius:7px;font-size:14px}.task-tabs button.active{background:var(--c139);color:var(--c140)}.editor-layout{display:flex;flex-direction:column;height:100%;margin:-36px -38px -28px;min-height:calc(100% + 64px);background:var(--c8)}.editor-top{padding:16px 25px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}.editor-top .save-status{font-size:12px;color:var(--c141);display:flex;align-items:center;gap:5px}.save-status.error{color:var(--danger)}.editor-top .editor-actions{display:flex;gap:6px;margin-left:auto}.editor-top .btn{font-size:12px;padding:7px 10px}.editor-toolbar{padding:8px 25px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:4px;flex-wrap:wrap;background:var(--c142)}.editor-toolbar .icon-btn{font-family:Georgia,serif;font-size:19.5px;color:var(--c143);width:31px}.editor-toolbar select{font-size:12.5px;border:0;background:transparent;padding:6px}.toolbar-divider{height:18px;width:1px;background:var(--c144);margin:0 7px}.editor-paper{max-width:890px;width:100%;margin:0 auto;padding:35px 60px 60px}.editor-meta{display:flex;align-items:center;gap:12px;color:var(--c145);font-size:12px;margin-bottom:17px}.editor-meta select{padding:5px 8px;border-color:var(--c146);font-size:12px;color:var(--c147);max-width:220px;background:var(--c148)}.note-title{font-size:33.5px;font-weight:600;letter-spacing:-.7px;border:0;padding:0;width:100%;border-radius:0;margin-bottom:24px}.note-title:focus{box-shadow:none}.note-body{font-size:17.5px;line-height:1.95;outline:0;min-height:300px;overflow-wrap:anywhere;color:var(--c149)}.note-body:empty:before{content:'เริ่มเขียนเรื่องราวของคุณที่นี่...';color:var(--c150);pointer-events:none}.note-body h2{font-size:26.5px;color:var(--c151);font-weight:600}.note-body h3{font-size:20.5px;font-weight:600}.note-body blockquote{margin:22px 0;border-left:3px solid var(--c152);padding:12px 20px;background:var(--c153);color:var(--c154)}.note-body pre{background:var(--c155);padding:15px;border-radius:7px;white-space:pre-wrap;font-size:15px}.note-body table{border-collapse:collapse;width:100%;margin:20px 0}.note-body td,.note-body th{border:1px solid var(--c156);padding:10px;min-width:60px}.note-body a{text-decoration:underline}.note-tags-editor{display:flex;gap:7px;align-items:center;margin-top:30px;border-top:1px solid var(--c157);padding-top:20px;color:var(--c158)}.note-tags-editor input{flex:1;border:0;padding:8px;background:var(--c148);font-size:12.5px}.attachments-list{margin-top:20px}.file-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--c159);border-radius:7px;margin-bottom:6px;font-size:12.5px;background:var(--c160)}.file-row>a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.file-row small{font-size:12px;color:var(--c161)}.file-row .icon-btn{width:24px;height:24px}.editor-footer{display:flex;justify-content:space-between;font-size:12px;color:var(--c162);margin-top:25px}.conflict-banner{background:var(--c163);color:var(--c164);padding:12px 20px;font-size:14px}.conflict-banner button{margin-left:12px}.trash-actions{display:flex;gap:7px;margin-top:12px}.trash-actions .btn{font-size:12px;padding:6px 8px}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--c8)}.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;white-space:nowrap}.data-table th{font-weight:500;background:var(--c165);color:var(--c166);font-size:12px;padding:14px 18px}.data-table td{padding:16px 18px;border-top:1px solid var(--c167)}.status-badge{padding:4px 8px;background:var(--c168);color:var(--c169);border-radius:5px;font-size:12px}.status-badge.off{background:var(--c170);color:var(--c171)}.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:24px}.stat-card{padding:22px;border:1px solid var(--line);background:var(--c8);border-radius:10px}.stat-card span{font-size:12.5px;color:var(--c172)}.stat-card strong{font-size:34.5px;display:block;margin-top:8px;font-weight:500}.service-status{font-size:14px;line-height:2;padding:20px;border:1px solid var(--line);border-radius:10px;margin-top:24px;background:var(--c173)}dialog{border:1px solid var(--c174);border-radius:15px;padding:28px;max-width:480px;width:calc(100% - 32px);box-shadow:0 30px 90px var(--c175);color:var(--ink);max-height:85dvh;overflow:auto}dialog::backdrop{background:var(--c176);backdrop-filter:blur(3px)}dialog h2{font-size:23px;margin:0 0 12px;font-weight:600}dialog p{font-size:14px;line-height:1.9;color:var(--c177)}dialog label{display:block;font-size:14px;margin:18px 0 7px}dialog input{width:100%}dialog .modal-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}dialog .modal-buttons button{font-size:14px}.modal-header{display:flex;justify-content:space-between;align-items:center}.revision-row,.manage-row{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.revision-row small,.manage-row small{font-size:12px;color:var(--c178)}.revision-row .btn,.manage-row .icon-btn:first-of-type{margin-left:auto}.revision-row>span{display:flex;flex-direction:column}.pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin:24px 0;font-size:12.5px;color:var(--c179)}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);padding:12px 22px;border-radius:10px;background:var(--c180);color:var(--c18);box-shadow:0 8px 30px var(--c181);font-size:14px;opacity:0;pointer-events:none;z-index:100;transition:.2s;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}.mobile-menu,.sidebar-overlay{display:none}.offline-strip{background:var(--c182);color:var(--c183);padding:9px;font-size:12.5px;text-align:center}
@media(min-width:1600px){.main-content{padding:42px 55px}.recent-layout{grid-template-columns:1fr 290px}.note-card{min-height:220px}.editor-layout{margin:-42px -55px;min-height:calc(100% + 84px)}}
@media(max-width:1200px){.sidebar{width:220px;padding-left:14px;padding-right:14px}.topbar{padding:0 25px;gap:15px}.today-date{display:none}.main-content{padding:28px 25px}.recent-layout{grid-template-columns:1fr 220px;gap:16px}.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-card{padding:13px 12px;gap:9px}.quick-card small{font-size:12px}.quick-card>span:last-child{display:none}.editor-layout{margin:-28px -25px;min-height:calc(100% + 56px)}.login-story{padding-left:35px;padding-right:35px}.login-main{padding-left:35px;padding-right:35px}}
@media(max-width:950px){.recent-layout{grid-template-columns:1fr}.task-panel{display:none}.banner-drawing{width:140px}.draw-page{right:10px}.draw-page.back{right:50px}.draw-leaf{right:-20px}.quick-actions{gap:9px}.quick-icon{width:28px;height:30px}.quick-card strong{font-size:12px}.greeting-right .btn:first-child{display:none}.search-wrap{width:45%}.editor-paper{padding:30px}.login-story{padding:30px}.story-copy h1{font-size:50.5px}.paper-scene{transform:scale(.8);transform-origin:center left;width:320px;height:260px}.story-footer{font-size:12px}.login-main{padding:30px}.login-box h2{font-size:29px}}
@media(max-width:700px){.sidebar{position:fixed;inset:0 auto 0 0;width:250px;z-index:30;transform:translateX(-100%);transition:.2s;box-shadow:10px 0 40px var(--c184)}.workspace.menu-open .sidebar{transform:translateX(0)}.workspace.menu-open .sidebar-overlay{display:block;position:fixed;inset:0;background:var(--c185);z-index:20}.mobile-menu{display:inline-flex}.topbar{height:65px;padding:0 16px;gap:12px}.breadcrumb{gap:8px}.breadcrumb>span:not(:last-child){display:none}.breadcrumb>strong{font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}.search-wrap{max-width:none;width:auto;flex:1;padding:9px}.search-wrap kbd{display:none}.main-content{padding:24px 18px}.home-greeting h1{font-size:26.5px}.home-greeting p{font-size:12px}.home-greeting .eyebrow{font-size:12px}.greeting-right{padding-top:21px}.greeting-right .btn{padding:8px;font-size:12px;white-space:nowrap}.welcome-banner{padding:23px 21px;min-height:145px;margin-bottom:24px}.welcome-banner h2{font-size:20.5px;max-width:190px;line-height:1.6}.welcome-banner p{font-size:12px;max-width:195px}.banner-drawing{width:80px;transform:scale(.7);transform-origin:right center}.quick-actions{grid-template-columns:1fr;gap:8px;margin-bottom:24px}.quick-card{padding:11px 14px}.quick-card strong{font-size:12.5px}.quick-card small{font-size:12px}.quick-card>span:last-child{display:block}.quick-icon{width:32px;height:32px}.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.note-card{padding:14px;min-height:190px}.note-card h3{font-size:14px}.note-card p{font-size:12px}.all-notes .notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.view-header h1{font-size:26.5px}.view-header{align-items:flex-start}.view-header .actions{flex-wrap:wrap;justify-content:flex-end;max-width:150px}.view-header .btn{font-size:12px;padding:8px;white-space:nowrap}.view-header select{font-size:12px;max-width:125px}.task-add{flex-wrap:wrap;padding:13px}.task-add input[name=title]{flex-basis:100%}.task-add input[name=due_date]{flex:1;min-width:0}.task-add .btn{font-size:12.5px}.editor-layout{margin:-24px -18px;min-height:calc(100% + 48px)}.editor-top{padding:11px 12px;gap:6px}.editor-actions{gap:2px!important}.editor-actions .btn{padding:7px;font-size:12px}.editor-top .save-status{font-size:12px}.editor-toolbar{padding:7px 10px;gap:2px}.editor-toolbar .icon-btn{width:28px}.editor-paper{padding:26px 22px}.note-title{font-size:29px}.note-body{font-size:16px}.editor-meta{gap:6px;font-size:12px}.editor-meta select{max-width:160px;font-size:12px}.editor-footer{font-size:12px}.admin-stats{gap:9px}.stat-card{padding:15px}.stat-card span{font-size:12px}.stat-card strong{font-size:27.5px}.login-layout{grid-template-columns:1fr}.login-story{padding:23px 26px;background:var(--c27);min-height:210px}.login-story .brand{font-size:25.5px}.login-story .brand img{width:32px;height:32px}.story-copy{margin:30px 0 0}.story-copy .eyebrow{font-size:12px;letter-spacing:1.5px}.story-copy h1{font-size:39px;line-height:1.35;margin:12px 0}.story-copy h1 br{display:none}.story-copy p{font-size:14px;margin:6px 0}.story-copy p br{display:none}.paper-scene,.story-footer{display:none}.login-main{padding:25px;min-height:calc(100dvh - 230px)}.login-top{display:none}.login-box{padding:10px 0 25px;max-width:410px}.login-mark{font-size:35.5px;margin-bottom:10px}.login-box h2{font-size:27.5px}.login-box>p{margin-bottom:25px;font-size:14px}.login-bottom{font-size:12px}.task-panel{display:block}.recent-layout{gap:7px}.task-panel{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}@media print{.sidebar,.topbar,.editor-top,.editor-toolbar,.note-tags-editor,.attachments-list,.editor-footer{display:none!important}.workspace,.main-area,.main-content,.editor-layout{display:block;height:auto;overflow:visible;margin:0;padding:0;background:var(--c8)}.editor-paper{padding:10px;max-width:none}.note-body{min-height:0}}

/* Password sign-in, inline media, and rich text colors. */
.auth-tabs{display:flex;gap:8px;margin:0 0 22px}.auth-tabs button{flex:1;border:0;border-radius:8px;padding:10px;background:var(--c186);color:var(--c187)}.auth-tabs button.active{background:var(--c1);color:var(--c18)}.login-box form>div+div{margin-top:17px}.auth-message{font-size:15px;line-height:1.8;color:var(--c23)}.auth-message:empty{display:none}.login-box #phone-verify-form .btn{margin-top:16px}.login-box #forgot-password{font-size:14px}#verification-panel{line-height:1.8}.text-color-control{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:34px;height:35px;cursor:pointer;font-weight:700;font-family:Georgia,serif;gap:1px}.text-color-control input{width:25px;height:9px;padding:0;border:0;background:none;cursor:pointer}.note-body{max-width:100%;min-width:0}.note-body>img{display:block;max-width:100%;height:auto}.note-body.file-drag-over{outline:2px dashed var(--c188);background:var(--c189)}.attachment-embed{max-width:100%;border:1px solid var(--c190);border-radius:10px;margin:20px 0;background:var(--c191);overflow:hidden;line-height:1.5;text-align:left;position:relative;color:var(--c192)}.embed-header{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid var(--c193);font:14px/1.5 Notekrub,sans-serif;flex-wrap:wrap}.embed-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;flex-basis:100px}.embed-header small{font-size:12px;color:var(--c194)}.embed-open{font-size:12px;white-space:nowrap}.embed-collapse{width:25px;height:25px}.embed-preview{padding:14px}.image-embed .embed-preview{padding:0;background:var(--c8)}.image-embed img{width:100%;height:auto;display:block;max-width:100%}.image-controls{display:flex;align-items:center;gap:6px;padding:8px;font:12px Notekrub,sans-serif;color:var(--c195);flex-wrap:wrap}.image-controls .btn{padding:3px 9px;font-size:17.5px;min-height:30px}.image-width{min-width:42px;text-align:center}.image-controls>span:last-of-type{margin-left:auto;font-size:12px}.image-resize{border:0;background:transparent;padding:5px;color:var(--c196);cursor:nwse-resize;touch-action:none;min-width:30px;min-height:30px}.pdf-page{position:relative;width:100%;background:var(--c8);box-shadow:0 2px 7px var(--c197);margin:0 0 14px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--c198);overflow:hidden}.pdf-page canvas{display:block;width:100%;height:auto}.pdf-embed .embed-preview{max-height:1000px;overflow-y:auto;overscroll-behavior:contain}.note-body .attachment-embed p{margin:0}.editor-paper{min-width:0}.note-body table{max-width:100%;table-layout:fixed}.note-body td,.note-body th{overflow-wrap:anywhere}@media(max-width:700px){.embed-header{gap:6px;padding:9px}.embed-preview{padding:8px}.pdf-embed .embed-preview{max-height:75dvh}.image-controls>span:last-of-type{display:none}.login-box{padding-top:15px}}@media print{.embed-header,.image-controls{display:none}.attachment-embed{border:0;background:var(--c8)}.pdf-embed .embed-preview{max-height:none;overflow:visible}}
/* Organization, collaboration and locale controls. */
.language-picker{position:fixed;top:13px;right:18px;z-index:20;display:flex;align-items:center;gap:6px}.language-picker select{padding:5px 7px;font-size:12.5px;max-width:105px;background:var(--c148)}.topbar{padding-right:175px}.login-top{padding-right:95px}.notebook-tree-row{display:flex;align-items:center;padding-left:calc(var(--depth)*12px);min-width:0}.notebook-tree-row .nav-item{padding:8px 5px;gap:7px;min-width:0}.tree-toggle{background:none;border:0;color:var(--c199);width:18px;padding:0;flex-shrink:0}.book-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.book-order{display:flex;opacity:0}.notebook-tree-row:hover .book-order,.notebook-tree-row:focus-within .book-order{opacity:1}.book-order button{border:0;background:transparent;color:var(--c200);padding:1px 2px}.nav-section .text-btn{padding:0;font-size:12px;color:inherit}.notebook-title{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:8px 4px 8px calc(var(--depth)*20px);font-weight:600;min-width:180px;max-width:450px;overflow-wrap:anywhere}.notebook-title small{font-weight:400;color:var(--c201)}.row-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.notebook-manager td{vertical-align:middle}.collaboration-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.collaboration-card,.capture-card{padding:25px;background:var(--c8);border:1px solid var(--line);border-radius:12px}.collaboration-card h2,.capture-card h2{font-size:22px;margin-top:6px}.capture-card{margin-bottom:20px;max-width:850px}.capture-card form{display:flex;gap:12px;flex-wrap:wrap}.capture-card p,.capture-card li{line-height:1.8}.capture-card input{max-width:100%}.capture-card code{overflow-wrap:anywhere}.member-list{margin-top:22px}.member-list .manage-row{flex-wrap:wrap}.member-list small{display:block;color:var(--muted);font-size:12.5px}.member-list select{padding:6px}.collaboration-presence{font-size:12.5px;color:var(--c202);margin-bottom:15px;min-height:18px}.note-prosemirror{outline:none;min-height:300px;overflow-wrap:anywhere}.note-prosemirror p.is-editor-empty:first-child:before{color:var(--c203)}.collab-attachment{max-width:100%;margin:16px 0}.ProseMirror-selectednode .attachment-embed{outline:2px solid var(--c204)}.collab-attachment .attachment-embed{margin:0}.ProseMirror table{border-collapse:collapse;width:100%}.ProseMirror td,.ProseMirror th{min-width:1em;border:1px solid var(--c205);padding:9px}.ProseMirror .selectedCell:after{background:var(--c206);pointer-events:none;position:absolute;inset:0;content:''}.ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}.ProseMirror-gapcursor:after{content:'';display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}.ProseMirror-focused .ProseMirror-gapcursor{display:block}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}@media(max-width:700px){.language-picker{top:16px;right:12px}.topbar{padding-right:120px}.topbar{height:auto;min-height:104px;padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px}dialog{padding:22px;max-height:92dvh}.topbar .breadcrumb{width:calc(100% - 155px);flex:none;height:30px}.topbar .search-wrap{display:flex;flex:0 0 100%;width:100%}.notebook-manager{overflow:auto}.book-order{opacity:1}.collaboration-list{grid-template-columns:1fr}.capture-card{padding:18px}.main-content .notebook-title{max-width:260px}}@media print{.language-picker,.collaboration-presence{display:none}}
.book-order button{font-size:18.5px}.row-actions>.icon-btn{font-size:20.5px}
/* S3 editor: checklist, highlight, font size, alignment, note links */
.editor-toolbar select#font-size,.editor-toolbar select#text-align{max-width:120px}.highlight-control span{background:var(--c207);border-radius:3px;padding:0 4px;line-height:1.1}.clear-highlight{width:24px;color:var(--c208)}.clear-highlight .icon{width:13px}.note-prosemirror ul[data-type=taskList]{list-style:none;padding-left:4px;margin:12px 0}.note-prosemirror ul[data-type=taskList] ul[data-type=taskList]{margin:4px 0 4px 8px}.note-prosemirror ul[data-type=taskList]>li{display:flex;gap:10px;align-items:flex-start}.note-prosemirror ul[data-type=taskList]>li>label{flex:0 0 auto;margin-top:7px;user-select:none;display:flex}.note-prosemirror ul[data-type=taskList]>li>label input{accent-color:var(--c126);width:16px;height:16px;margin:0;padding:0;box-shadow:none;cursor:pointer;border:0}.note-prosemirror ul[data-type=taskList]>li>div{flex:1 1 auto;min-width:0}.note-prosemirror ul[data-type=taskList]>li>div>p{margin:4px 0}.note-prosemirror ul[data-type=taskList]>li[data-checked=true]>div{color:var(--c128);text-decoration:line-through}.note-body:not(:has(.note-prosemirror)) ul[data-type=taskList]{list-style:none;padding-left:4px}.note-body:not(:has(.note-prosemirror)) li[data-type=taskItem]{position:relative;padding-left:26px}.note-body:not(:has(.note-prosemirror)) li[data-type=taskItem]:before{content:'';position:absolute;left:0;top:.5em;width:14px;height:14px;border:1.5px solid var(--c209);border-radius:3px;box-sizing:border-box}.note-body:not(:has(.note-prosemirror)) li[data-type=taskItem][data-checked=true]:before{background:var(--c126);border-color:var(--c210)}.note-body:not(:has(.note-prosemirror)) li[data-type=taskItem][data-checked=true]{color:var(--c128);text-decoration:line-through}.note-prosemirror a{color:var(--green);text-decoration:underline;cursor:pointer}.note-link-results{display:grid;gap:6px;max-height:300px;overflow:auto;margin-top:12px}.note-link-option{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--line);background:var(--c160);border-radius:8px;padding:9px 12px;font-size:14px}.note-link-option:hover{background:var(--c211)}.note-link-option span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-link-option small,.backlink-row small{color:var(--muted);font-size:12px;white-space:nowrap}.note-link-option .icon,.backlink-row .icon{width:15px;color:var(--c103);flex-shrink:0}.backlinks-list{margin-top:22px}.backlinks-list h3{font-size:12.5px;color:var(--c212);font-weight:600;margin:0 0 8px;display:flex;align-items:center;gap:6px}.backlinks-list h3 .icon{width:14px}.backlink-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 12px;border:1px solid var(--c159);border-radius:7px;margin-bottom:6px;font-size:12.5px;background:var(--c160);cursor:pointer}.backlink-row:hover{background:var(--c211)}.backlink-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:700px){.editor-toolbar select#font-size,.editor-toolbar select#text-align{max-width:92px}}
/* S4 reminders */
.notification-wrap{position:relative;flex-shrink:0}.notification-bell{position:relative}.notification-badge{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:var(--c18);font:600 12px/18px 'Segoe UI',sans-serif;text-align:center;pointer-events:none}
.notification-panel{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-height:min(440px,70dvh);overflow:auto;background:var(--c8);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px var(--c213);z-index:40;padding:6px}
.notification-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:14px}.notification-head .text-btn{padding:4px 0;font-size:12.5px}.notification-head .text-btn:disabled{cursor:default}
.notification-item{display:flex;gap:10px;align-items:flex-start;width:100%;border:0;background:transparent;text-align:left;padding:10px;border-radius:8px;color:var(--ink)}.notification-item:hover{background:var(--green-light)}.notification-item .icon{width:16px;height:16px;margin-top:2px;color:var(--muted)}
.notification-item strong{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}.notification-item small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.notification-item.unread strong{font-weight:700}.notification-item.unread .icon{color:var(--brand-champagne,var(--c214))}
.notification-empty{font-size:12.5px;color:var(--muted);padding:16px 10px;margin:0}
.task-row .task-flag-mark{width:13px;height:13px;margin:-2px 5px 0 0;color:var(--danger);fill:currentColor}.task-row .task-flag.on{color:var(--danger)}.task-row .task-flag.on .icon{fill:currentColor}
.task-row .task-remind .icon,.task-row .task-repeat .icon{width:11px;height:11px;margin-top:-2px}.task-row.overdue small{font-weight:600}
.task-add{flex-wrap:wrap}.task-add input[name=title]{flex:1 1 260px}.task-add select{font-size:14px;padding:10px}.task-add input[name=remind_at]{min-width:0}
.flag-toggle,.check-option{display:inline-flex!important;align-items:center;gap:7px;cursor:pointer;font-size:14px;user-select:none}.flag-toggle{border:1px solid var(--line);border-radius:9px;padding:0 12px;background:var(--c8);min-height:42px}.flag-toggle input,.check-option input{width:auto;margin:0;accent-color:var(--danger)}.flag-toggle .icon{width:15px;height:15px;color:var(--muted)}.flag-toggle:has(input:checked) .icon{color:var(--danger);fill:currentColor}
dialog .flag-toggle{margin-top:16px}dialog .check-option{margin-top:18px}dialog select#task-repeat{width:100%}.field-note{font-size:12.5px!important;line-height:1.6!important;margin:6px 0 0}
@media(max-width:700px){.topbar .search-wrap{order:2;flex:1 1 200px;width:auto;min-width:0}.notification-wrap{order:3}.notification-panel{position:fixed;left:12px;right:12px;top:100px;width:auto}.task-add input[name=remind_at],.task-add select{flex:1 1 45%}}
/* S1 enex import */
.enex-import form{align-items:flex-start}.enex-import form>.btn{align-self:flex-end}.enex-field{display:flex;flex-direction:column;gap:5px;flex:1 1 210px;min-width:0;font-size:13.5px;color:var(--muted)}.enex-field.enex-files{flex-basis:100%}.enex-field input,.enex-field select{width:100%;min-width:0;max-width:100%;font-size:15px;color:var(--ink)}.enex-field select:disabled{opacity:.55}.enex-import h3{font-size:16px;margin:22px 0 10px}
.import-status{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:14px;background:var(--paper)}.import-status-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.import-status-head strong{min-width:0;overflow-wrap:anywhere;font-weight:600}
.import-status progress{display:block;width:100%;height:8px;margin:10px 0 4px;accent-color:var(--green)}.import-status p{margin:4px 0;font-size:14px}.import-status .btn{margin-top:6px}
.import-badge{flex-shrink:0;font-size:12.5px;line-height:1.6;padding:1px 9px;border-radius:999px;background:var(--green-light);color:var(--green-dark)}.import-badge.pending,.import-badge.running{background:var(--c215);color:var(--c216)}.import-badge.failed{background:var(--c217);color:var(--danger)}
.import-report{margin-top:8px;font-size:14px}.import-report summary{cursor:pointer;color:var(--ink)}.import-report ul{margin:8px 0 0;padding-left:18px;max-height:260px;overflow:auto}.import-report li{line-height:1.6;margin:3px 0;overflow-wrap:anywhere}
.import-jobs{display:grid;gap:6px}.import-job{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--c8);padding:9px 12px;color:var(--ink);font:inherit;cursor:pointer}.import-job:hover{background:var(--green-light)}.import-job-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.import-job small{color:var(--muted);font-size:12.5px;flex-shrink:0}
@media(max-width:700px){.import-job{flex-wrap:wrap}.import-job-name{flex-basis:calc(100% - 110px)}.import-job small{order:3;width:100%}}
/* S5b offline + push */
.offline-status{font-size:12px;color:var(--c183);background:var(--c182);border:1px solid var(--c218);border-radius:6px;padding:4px 8px;white-space:nowrap}.offline-status.is-offline{background:var(--c219);color:var(--c220);border-color:var(--c221)}.pending-chip{font-size:12px;background:var(--c182);color:var(--c183);padding:2px 6px;border-radius:4px;margin-left:auto;margin-right:6px}.main-content>.offline-strip{margin:-36px -38px 24px;border-bottom:1px solid var(--c218)}.conflict-list{margin-top:8px;display:grid;gap:6px}.conflict-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;padding:8px 10px;border:1px solid var(--c218);border-radius:7px;background:var(--c222)}.conflict-row span{flex:1;min-width:0;overflow-wrap:anywhere}#offline-sync-summary{margin-top:16px!important}#push-test{margin-top:8px}@media(max-width:700px){.offline-status{order:4;flex:1 1 100%;text-align:center}.main-content>.offline-strip{margin:-16px -16px 16px}}
/* S6 limits + back-office settings */
.settings-card{margin-top:28px;padding:24px;background:var(--c8);border:1px solid var(--line);border-radius:12px}.settings-card .section-heading{margin-top:0}.setting-row{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--c223);font-size:14px}.setting-row.changed .setting-label{color:var(--c64)}.setting-label small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.setting-label em{font-style:normal;font-size:12px;color:var(--c39)}.setting-input{display:flex;align-items:center;gap:8px;justify-content:flex-end}.setting-input input[type=number]{width:140px;padding:8px;font-size:14px}.setting-input input[type=checkbox]{width:16px;height:16px;accent-color:var(--c126)}.setting-unit{font-size:12.5px;color:var(--muted);min-width:60px}#admin-settings .row-actions{margin-top:16px}.data-table .text-btn{font-size:12.5px;padding:0}@media(max-width:700px){.setting-row{grid-template-columns:1fr}.setting-input{justify-content:flex-start}}
/* S7 messaging services */
.settings-card .section-heading{gap:12px}
.integration-group{border:0;border-top:1px solid var(--line);margin:20px 0 0;padding:14px 0 0;min-width:0}.integration-group legend{float:left;width:100%;padding:0;margin:0 0 2px;font-size:15px;font-weight:600;color:var(--ink)}.integration-group legend+*{clear:both}.integration-group .row-actions{margin-top:12px}
.integration-row{grid-template-columns:minmax(0,1fr) minmax(0,300px)}.integration-row .setting-input{min-width:0}.integration-row .setting-input input:not([type=checkbox]),.integration-row .setting-input select{width:100%;min-width:0;padding:8px;font-size:14px}.integration-row.wide{grid-template-columns:1fr}.integration-row.wide .setting-input input{font:12.5px Consolas,'Courier New',monospace}
.integration-result:empty{display:none}.integration-result.ok{color:var(--green)!important}.integration-result.error{color:var(--danger)!important;overflow-wrap:anywhere}@media(max-width:700px){.integration-row{grid-template-columns:1fr}.integration-group .row-actions .btn{flex:1 1 100%;white-space:normal;text-align:center}}
/* A3 general, security, templates, delivery history, status cards, password policy */
.site-status-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:24px}
.service-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--cs224);color:var(--ink);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.service-card:hover,.service-card:focus-visible{border-color:var(--cb225)}
.service-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.service-card-head strong{font-size:16px;font-weight:600}
.service-mode{color:var(--muted)}.service-mode.live{color:var(--green)}.service-count b{font-size:23px;font-weight:500;color:var(--ink)}.service-count em{font-style:normal;color:var(--danger)}.service-card small{color:var(--muted);font-size:12px}
.health-badge{display:inline-block;padding:2px 7px;border-radius:5px;background:var(--cs226);color:var(--ct227);font-size:12px;white-space:nowrap}.health-badge.ok{background:var(--cs228);color:var(--ct229)}.health-badge.error{background:var(--cs230);color:var(--ct231)}
.health-line{margin:2px 0 6px!important;overflow-wrap:anywhere}.health-line.error{color:var(--danger)!important}
.site-row .setting-input textarea{width:100%;min-width:0;padding:8px;font:14px/1.5 inherit;resize:vertical}
.locale-options{display:flex;flex-wrap:wrap;gap:4px 14px}.locale-options .check-option{margin-top:0}
.template-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--cb232);font-size:14px}
.template-name small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.template-switch{margin-top:0!important}.template-row.locked .template-switch{opacity:.6}
.template-previews{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.channel-badge{display:inline-block;min-width:44px;margin-right:6px;padding:2px 6px;border-radius:5px;background:var(--cs226);color:var(--ct233);font-size:12px;text-align:center}.channel-badge.sms{background:var(--cs234);color:var(--ct235)}.channel-badge.push{background:var(--cs236);color:var(--ct237)}
.template-preview{display:block;width:100%;height:min(60vh,520px);border:1px solid var(--line);border-radius:8px;background:var(--cs224)}
.template-text{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--cs238);font:14px/1.7 inherit;margin:0}.template-subject{font-size:15px;overflow-wrap:anywhere}
.delivery-filters{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}.delivery-filters select,.delivery-filters input{width:auto;min-width:0;padding:7px 8px;font-size:14px}
.delivery-table td{vertical-align:top}.delivery-summary{max-width:320px;overflow:hidden;text-overflow:ellipsis}.delivery-error{display:block;max-width:260px;margin-top:4px;color:var(--danger);font-size:12px;white-space:normal;overflow-wrap:anywhere}
.password-rules{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.7}.password-rules:empty{display:none}
.maintenance-banner{padding:10px 12px;border-radius:8px;background:var(--cs239);color:var(--ct240);font-size:14px!important;line-height:1.7;overflow-wrap:anywhere}
.standalone-page{min-height:100vh;display:grid}.standalone-page .login-main{min-height:100vh}.standalone-page .login-box form>div+div{margin-top:17px}
.login-bottom{flex-wrap:wrap;gap:6px 14px}.login-contact{display:flex;flex-wrap:wrap;gap:4px 10px}.login-contact a{color:inherit}
@media(max-width:700px){.settings-card .section-heading{flex-wrap:wrap;gap:4px 12px}.settings-card .section-heading h2{white-space:nowrap}.site-status-cards{grid-template-columns:1fr;gap:9px}.template-row{grid-template-columns:1fr}.template-previews{justify-content:flex-start}.template-previews .btn{flex:1 1 auto}.delivery-filters>*{flex:1 1 120px}.standalone-page .login-main{min-height:100dvh}}
/* Analytics (A2): the "สถิติการใช้งาน" view. Tables turn into cards under 640 px, nothing scrolls sideways at 320 px. */
.num{font-variant-numeric:tabular-nums}
.an small{font-size:14px}
.an .view-header{flex-wrap:wrap}
.an .view-header p,.an .pagination,.an .pagination span{font-size:14px}
.an-live{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:7px 13px;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.an-live:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cs241);box-shadow:0 0 0 3px var(--ch242)}
.an-period{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:-8px 0 14px}
.an-presets{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;background:var(--white);overflow:hidden;max-width:100%}
.an-presets button{border:0;background:none;padding:8px 13px;font-size:14px;color:var(--muted)}
.an-presets button+button{border-left:1px solid var(--line)}
.an-presets button.active{background:var(--ink);color:var(--ct243)}
.an-custom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.an-custom label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.an-custom input{width:132px;padding:8px 10px;font-size:15px}
.an-range{margin:0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.an-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.an-tabs button{border:1px solid transparent;background:none;border-radius:8px;padding:7px 12px;font-size:15px;color:var(--muted)}
.an-tabs button.active{background:var(--white);border-color:var(--line);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.an-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr));gap:10px;margin-bottom:14px}
.an-kpi{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.an-kpi span{font-size:14px;color:var(--muted)}
.an-kpi strong{font-size:27.5px;font-weight:600;letter-spacing:-.5px;overflow-wrap:anywhere}
.an-delta{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.an-delta.up{color:var(--ct244)}
.an-delta.down{color:var(--danger)}
.an-note{font-size:14px;color:var(--muted);margin:4px 0 14px}
.an-note .text-btn{font-size:14px}
.an-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;min-width:0}
.an-card h2{font-size:16px;font-weight:600;margin:0 0 10px}
.an-card .an-note{margin:-4px 0 10px}
.an-card>.an-bars+.an-bars{margin-top:14px}
.an-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 14px}
.an-empty{font-size:14px;color:var(--muted);margin:6px 0}
.an-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.an-table{width:100%;border-collapse:collapse;font-size:14px}
.an-table th{text-align:left;font-weight:500;color:var(--muted);background:var(--paper);padding:9px 12px;font-size:14px;white-space:nowrap}
.an-table td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.an-table .num{text-align:right;white-space:nowrap}
.an .text-btn{padding:0;border:0;background:none;text-align:left;font-size:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand-champagne,var(--cs245));text-underline-offset:3px}
.an-bars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.an-bars li{display:grid;grid-template-columns:minmax(0,1fr) minmax(50px,1.1fr) auto;gap:10px;align-items:center;font-size:14px}
.an-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-bar-track{height:8px;background:var(--paper);border-radius:4px;overflow:hidden}
.an-bar-track i{display:block;height:100%;background:var(--brand-champagne,var(--cs245));border-radius:4px}
.an-bars small{color:var(--muted);margin-left:4px}
.an-legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:6px}
.an-legend span{width:10px;height:10px;border-radius:2px;display:inline-block}
.an-legend .a{background:var(--ink)}
.an-legend .b{background:var(--green-light,var(--cs246));border:1px solid var(--line);margin-left:10px}
.an-chart{display:flex;align-items:flex-end;gap:2px;height:150px}
.an-chart span{flex:1 1 0;min-width:0;height:100%;position:relative}
.an-chart i,.an-chart b{position:absolute;bottom:0;left:0;right:0;border-radius:2px 2px 0 0}
.an-chart i{background:var(--green-light,var(--cs246))}
.an-chart b{background:var(--ink);left:18%;right:18%}
.an-axis{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.an-funnel{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.an-funnel li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(50px,1fr) auto 46px;gap:10px;align-items:center;font-size:14px}
.an-funnel small{color:var(--muted);text-align:right}
.an-funnel .an-bar-track i{background:var(--ink)}
.an-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.an-field{display:grid;gap:4px;font-size:14px;color:var(--muted);min-width:0;flex:1 1 150px}
.an-field select,.an-field input{padding:8px 10px;font-size:15px;width:100%;min-width:0}
.an-search .an-field{flex:1 1 260px}
.an-filter-actions{display:flex;flex-wrap:wrap;gap:8px}
.an-who{font-size:14px;padding:2px 7px;border-radius:5px;background:var(--paper);white-space:nowrap}
.an-who.bot{background:var(--cs247);color:var(--ct248)}
.an-who.sim{background:var(--cs249);color:var(--ct250)}
.an-who.staff{background:var(--cs251);color:var(--ct252)}
.an-detail-title{font-size:20.5px;margin:14px 0 10px;overflow-wrap:anywhere}
.an-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px 16px;margin:0 0 14px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.an-facts div{min-width:0}
.an-facts dt{font-size:14px;color:var(--muted)}
.an-facts dd{margin:2px 0 0;font-size:15px;overflow-wrap:anywhere}
.an-timeline{list-style:none;margin:0;padding:0}
.an-timeline li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.an-timeline li:first-child{border-top:0}
.an-timeline li.goal strong{color:var(--ct244)}
.an-timeline li.error strong{color:var(--danger)}
.an-timeline li.event strong{font-weight:500}
.an-timeline .muted{overflow-wrap:anywhere}
.an-heat{display:grid;grid-template-columns:30px repeat(24,minmax(0,1fr));gap:2px;align-items:center;font-size:14px;color:var(--muted)}
.an-heat i{display:block;aspect-ratio:1;background:var(--ink);border-radius:2px;min-width:0}
.an-heat small{font-size:14px}
.an-journeys{display:grid;gap:12px}
.an-journey{border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.an-journey h3{font-size:15px;margin:0 0 4px}
.an-journey p{font-size:14px;color:var(--muted);margin:0 0 8px}
.an-journey ol{margin:0;padding-left:18px;font-size:14px;display:grid;gap:4px;overflow-wrap:anywhere}
.an-journey li.converting{font-weight:600}
.an-access{display:inline-flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}
.an-access input{width:16px;height:16px;padding:0;margin:0}
@media(max-width:640px){
    .an-table-wrap{border:0;overflow:visible}
    .an-table thead{display:none}
    .an-table,.an-table tbody,.an-table tr,.an-table td{display:block;width:100%}
    .an-table tr{border:1px solid var(--line);border-radius:10px;padding:4px 12px;margin-bottom:8px;background:var(--white)}
    .an-table td{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:7px 0;text-align:right;min-width:0;overflow-wrap:anywhere}
    .an-table tr td:first-child{border-top:0}
    .an-table td:before{content:attr(data-label);color:var(--muted);text-align:left;flex:0 0 auto;max-width:45%}
    .an-table .num{white-space:normal}
    .an-field select,.an-field input,.an-custom input{font-size:16px}
    .an-custom,.an-custom label{width:100%}
    .an-custom input{width:100%}
    .an-card{padding:14px}
    .an-kpi{padding:12px}
    .an-kpi strong{font-size:23px}
    .an-funnel li{grid-template-columns:minmax(0,1fr) auto 40px;gap:4px 10px}
    .an-funnel .an-bar-track{grid-column:1/-1;grid-row:2}
    .an-chart{height:110px}
    .an-heat{grid-template-columns:22px repeat(24,minmax(0,1fr));gap:1px}
    .an-heat small{display:none}
    .an-tabs button{padding:6px 9px;font-size:14px}
    .an-presets button{padding:7px 9px}
}
/* Sharing and revision authors: save buttons, one share dialog (members + public link) for notes and notebooks, public-link marker on note cards, shared notebooks in "แชร์กับฉัน". */
.editor-footer{flex-wrap:wrap;align-items:center;gap:8px}
.editor-footer .btn.small{font-size:12.5px;padding:6px 12px}
.card-top .public-chip{display:inline-flex;margin-left:auto;color:var(--green)}
.share-target{display:flex;align-items:center;gap:8px;margin:0 0 4px;overflow-wrap:anywhere;color:var(--ink)}
.share-target .icon{flex:0 0 auto;width:17px;height:17px}
.share-section{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.share-target+.share-section,.modal-header+.share-section{border-top:0;margin-top:8px;padding-top:0}
.share-section h3{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.share-section h3 .icon{flex:0 0 auto;width:17px;height:17px}
.share-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
dialog label.share-switch{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;cursor:pointer;position:relative}
.share-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
.share-switch-track{position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:11px;background:var(--muted);transition:background .15s}
.share-switch-track:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--white);transition:transform .15s}
.share-switch input:checked+.share-switch-track{background:var(--green)}
.share-switch input:checked+.share-switch-track:after{transform:translateX(18px)}
.share-switch input:focus-visible+.share-switch-track{outline:2px solid var(--green);outline-offset:2px}
.share-switch input:disabled+.share-switch-track{opacity:.6}
.public-link-row{display:flex;gap:8px;align-items:center;margin-top:10px}
dialog .public-link-row input{flex:1 1 auto;width:auto;min-width:0;font-size:14px}
.public-link-row .btn{flex:0 0 auto}
.public-link-confirm{margin-top:10px;padding:10px 12px;border:1px solid var(--danger);border-radius:9px}
.public-link-confirm p{margin:0 0 8px}
.public-link-confirm .row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.member-row .member-name{display:flex;flex-direction:column;min-width:0;flex:1 1 160px;overflow-wrap:anywhere}
.member-row .member-name small{font-size:12.5px}
.member-row select{flex:0 0 auto;width:auto}
.member-row .btn{margin-left:0}
.revision-row>span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.revision-row .btn{flex:0 0 auto;white-space:nowrap}
.share-book-btn .icon{flex:0 0 auto}
.shared-book-contents{margin:10px 0 4px}
.shared-books{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.shared-books .tag-chip small{color:var(--muted);font-size:inherit}
.shared-note-list{list-style:none;margin:0;padding:0}
.shared-note-list li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.shared-note-list .text-btn{text-align:left;overflow-wrap:anywhere;min-width:0}
.shared-note-list small{flex:0 0 auto;color:var(--muted);font-size:12px}
@media(max-width:480px){
    .share-book-btn span{display:none}
    .public-link-row{flex-wrap:wrap}
    .public-link-row .btn{flex:1 1 100%}
    .shared-note-list li{flex-direction:column;gap:2px}
}
/* Drag and drop (drag-drop.js): note cards onto notebooks, notebook order and nesting. Brand tokens only, no new colours. */
.note-card[data-drag-note],[data-drag-book]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.note-card[data-drag-note]::before{content:'';position:absolute;top:6px;left:50%;width:26px;height:4px;margin-left:-13px;border-radius:2px;background:var(--line);opacity:0;transition:opacity .15s}
.note-card[data-drag-note]:hover::before,.note-card[data-drag-note]:focus-visible::before{opacity:1}
@media(hover:none){.note-card[data-drag-note]::before{opacity:.9}}
.note-card.dnd-armed{transform:scale(.97);box-shadow:0 0 0 2px var(--brand-champagne,var(--green)),var(--shadow)}
.dnd-source{opacity:.45}
.dnd-dragging .note-card:hover{transform:none}
.notebook-tree-row{position:relative}
.notebook-tree-row.dnd-before::before,.notebook-tree-row.dnd-after::after,.notebook-tree-row.dnd-child::after{content:'';position:absolute;left:calc(var(--depth)*12px + 18px);right:2px;height:3px;border-radius:2px;background:var(--green);pointer-events:none;z-index:1}
.notebook-tree-row.dnd-before::before{top:-2px}
.notebook-tree-row.dnd-after::after,.notebook-tree-row.dnd-child::after{bottom:-2px}
.notebook-tree-row.dnd-child::after{left:calc(var(--depth)*12px + 30px)}
.notebook-tree-row.dnd-inside .nav-item,.dnd-zone.dnd-inside{background:color-mix(in srgb,var(--brand-champagne,var(--green)) 28%,transparent);box-shadow:inset 0 0 0 2px var(--brand-champagne,var(--green));color:var(--ink)}
.notebook-tree-row.dnd-deny .nav-item{background:color-mix(in srgb,var(--danger) 12%,transparent);box-shadow:inset 0 0 0 2px var(--danger);cursor:not-allowed}
.notebook-manager tr.dnd-before>td{box-shadow:inset 0 3px 0 var(--green)}
.notebook-manager tr.dnd-after>td,.notebook-manager tr.dnd-child>td{box-shadow:inset 0 -3px 0 var(--green)}
.notebook-manager tr.dnd-inside>td{background:color-mix(in srgb,var(--brand-champagne,var(--green)) 28%,transparent);box-shadow:inset 0 2px 0 var(--brand-champagne,var(--green)),inset 0 -2px 0 var(--brand-champagne,var(--green))}
.notebook-manager tr.dnd-deny>td{background:color-mix(in srgb,var(--danger) 12%,transparent);box-shadow:inset 0 2px 0 var(--danger),inset 0 -2px 0 var(--danger);cursor:not-allowed}
.notebook-manager tr.dnd-pending{opacity:.5}
.dnd-zone{margin:6px 0 8px;padding:10px 12px;border:1.5px dashed var(--muted);border-radius:7px;color:var(--muted);font-size:12.5px;line-height:1.5;text-align:center}
.notebook-manager .dnd-zone{margin:10px 0}
.nav-section:has(>.dnd-zone){position:relative}
.dnd-zone.overlay{position:absolute;inset:0;z-index:2;margin:0;padding:4px 10px;display:flex;align-items:center;justify-content:center;background:var(--white)}
.dnd-ghost{position:fixed;left:0;top:0;z-index:200;display:flex;align-items:center;gap:8px;max-width:min(240px,70vw);padding:8px 13px;border:1px solid var(--line);border-left:3px solid var(--brand-champagne,var(--green));border-radius:9px;background:var(--white);color:var(--ink);box-shadow:var(--shadow);font-size:13px;font-weight:600;pointer-events:none;transform:translate(-50%,-150%)}
.dnd-ghost .icon{width:16px;height:16px;flex-shrink:0}
.dnd-ghost span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dnd-ghost.native{left:-1000px;top:-1000px;transform:none}
.dnd-live{position:fixed;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#toast:has(.toast-action){display:flex;align-items:center;gap:16px;width:max-content;max-width:min(90vw,520px)}
#toast.visible:has(.toast-action){pointer-events:auto}
.toast-action{border:0;background:none;padding:4px 2px;color:var(--brand-champagne,inherit);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.share-audience{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;flex-wrap:wrap}.share-audience select{font-size:14px;padding:8px 10px;min-width:190px}
/* Revision preview (history dialog): read a version before restoring it */.revision-row .row-actions{margin-left:auto;display:flex;gap:6px;flex-shrink:0}.revision-row .row-actions .btn{margin-left:0}.revision-meta{margin:0 0 10px}.revision-meta small{color:var(--muted)}.revision-preview{max-height:55vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-height:0;font-size:15px;line-height:1.8}.revision-preview img{max-width:100%;height:auto}.revision-file{padding:6px 10px;border:1px solid var(--line);border-radius:8px;display:inline-block;font-size:13px}@media(max-width:700px){.revision-row{flex-wrap:wrap}.revision-row .row-actions{margin-left:0;width:100%;justify-content:flex-end}}
/* Back office (/backoffice): the workspace shell with its own menu, settings tabs, and table rows as cards on phones */
a.nav-item{text-decoration:none}
.bo-site{display:flex;flex-direction:column;gap:2px;margin:-16px 8px 22px;min-width:0}.bo-site strong{font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}.bo-site small{font-size:12px;color:var(--muted)}
.backoffice .workspace-status span{min-width:0;overflow-wrap:anywhere}
.bo-stat-link{display:block;color:inherit;text-decoration:none}.bo-stat-link:hover,.bo-stat-link:focus-visible{border-color:var(--cb225)}
#bo-tab>.settings-card:first-child,#site-deliveries{margin-top:0}
.backoffice .pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;font-size:14px}
@media(max-width:700px){.backoffice .topbar{min-height:65px}.bo-cards{border:0;background:none;overflow:visible}.bo-cards table,.bo-cards tbody,.bo-cards tr,.bo-cards td{display:block;width:100%}.bo-cards thead{display:none}.bo-cards tr{border:1px solid var(--line);border-radius:10px;padding:4px 14px;margin-bottom:10px;background:var(--white)}.bo-cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);white-space:normal;text-align:right;overflow-wrap:anywhere;min-width:0}.bo-cards tr td:first-child{border-top:0;font-weight:600}.bo-cards td:before{content:attr(data-label);color:var(--muted);font-size:12.5px;font-weight:400;text-align:left;flex:0 0 auto;max-width:45%}.bo-cards td:empty{display:none}.bo-cards .delivery-summary,.bo-cards .delivery-error{max-width:none}.bo-cards td[colspan]{justify-content:center;text-align:center;font-weight:400}.bo-cards td[colspan]:before{display:none}}
/* Account settings (account.js: ?view=account&tab=…) and share management (share-manager.js: ?view=shares). Existing tokens only, no new colours. */
/* The framed settings button sits beside the name; the avatar and the name open the same page, so the row acts as one control (owner, 30 Oct 2026). */
.profile-row{display:flex;align-items:center;gap:8px;min-width:0;padding:0 3px 22px}
.profile-row .profile-button{flex:1 1 auto;min-width:0;padding:0;border-radius:9px}
.profile-row .profile-button>span:last-child{min-width:0}
.profile-row .profile-button strong{max-width:none}
.profile-row .profile-button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-row .profile-button:focus-visible,.profile-settings:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn.small.profile-settings{flex:0 0 auto;gap:4px;padding:5px 8px;font-size:12px;line-height:1.2;color:var(--ink);white-space:nowrap}
.profile-row:hover .profile-settings{border-color:var(--green)}
.profile-settings .icon{width:13px;height:13px;flex-shrink:0}
@media(max-width:1200px){.profile-settings .icon{display:none}.btn.small.profile-settings{padding:5px 7px}}
.sm-heading-tools{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 10px}
.settings-card .section-heading{flex-wrap:wrap;gap:4px 12px}.settings-card .section-heading h2{min-width:0}
.share-manager{max-width:1180px}
.account-page{max-width:860px}
.account-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.account-tabs button{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;background:none;border-radius:9px;padding:8px 13px;font-size:15px;color:var(--muted);cursor:pointer}
.account-tabs button .icon{width:16px;height:16px;flex-shrink:0}
.account-tabs button:hover{color:var(--ink);background:var(--green-light)}
.account-tabs button[aria-selected=true]{background:var(--white);border-color:var(--line);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.account-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.account-card{margin-top:18px}
.account-card .section-heading{margin-bottom:12px}
.account-card .section-heading h2 .icon{width:17px;height:17px;flex-shrink:0}
.account-card-note{font-size:12.5px}
.account-form label:not(.check-option){display:block;margin:12px 0 6px;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:0}
.account-form label:first-child:not(.check-option){margin-top:0}
.account-form input:not([type=checkbox]),.account-form select{width:100%;min-width:0;font-size:15px;padding:10px 12px}
.account-form .check-option{margin-top:0}
.account-form .check-option input{accent-color:var(--green)}
.account-inline{display:flex;gap:8px;align-items:center}
.account-inline input,.account-inline select{flex:1 1 auto}
.account-inline .btn{flex:0 0 auto;white-space:nowrap}
.account-form .form-error:empty{display:none}
.account-form .form-error{margin:8px 0 0}
.account-row{display:flex;justify-content:space-between;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.account-row:first-of-type{border-top:0;padding-top:0}
.account-row-label{color:var(--muted);font-size:14px}
.account-row-value{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.account-identity{overflow-wrap:anywhere;color:var(--ink)}
.theme-choice{display:flex;gap:8px;flex-wrap:wrap}
.theme-choice .btn{flex:1 1 140px}
.theme-choice .btn .icon{width:16px;height:16px}
.theme-choice .btn[aria-pressed=true]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);color:var(--ink)}
.account-status{margin:0}
.account-rules-title{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
.account-rules{margin-top:4px}
.account-list-row{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.account-list-row:first-child{border-top:0;padding-top:0}
.account-list-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px;overflow-wrap:anywhere}
.account-list-main small{color:var(--muted);font-size:12.5px;line-height:1.6}
.account-list .row-actions{margin-top:12px}
.account-secret{margin-top:12px;padding:12px;border:1px solid var(--green);border-radius:9px;background:var(--paper)}
.account-secret p{margin:0 0 6px;font-size:14px}
.account-secret input{flex:1 1 auto;min-width:0;width:auto;font-size:14px;padding:9px 10px}
.account-secret code{overflow-wrap:anywhere}
.api-scopes{display:grid;gap:10px;margin:14px 0 0;padding:0;border:0;min-width:0}
.api-scopes legend{margin:0 0 4px;padding:0;font-size:14px;font-weight:600;color:var(--ink)}
.account-form .api-scope{align-items:flex-start;line-height:1.5}
.api-scope input{margin-top:3px}
.api-scope span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.api-scope strong{font-weight:400;color:var(--ink)}
.api-scope small{color:var(--muted);font-size:12px}
.api-token-scopes{display:flex;flex-wrap:wrap;gap:4px 6px}
.api-token-scopes code{padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--muted);font-size:12px}
.api-secret p{margin:0 0 10px}
.api-secret-label{display:block;margin:14px 0 0;font-size:14px;font-weight:600}
.api-secret .public-link-row{margin-top:6px}
.api-secret input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.storage-meter{display:grid;gap:8px}
.storage-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.storage-meter-head strong{font-size:20px}
.storage-meter .storage-track{height:8px;margin:0;border-radius:4px}
.sm-summary{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;font-size:14px;color:var(--muted)}
.sm-toolbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-bottom:8px}
.sm-filters{display:flex;flex-wrap:wrap;gap:6px}
.sm-filter{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:6px 13px;font-size:14px;color:var(--ink);cursor:pointer}
.sm-filter span{min-width:20px;padding:0 6px;border-radius:999px;background:var(--paper);color:var(--muted);font-size:12.5px;text-align:center}
.sm-filter[aria-pressed=true]{border-color:var(--green);background:var(--green-light);font-weight:600}
.sm-filter:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.sm-search{position:relative;display:flex;align-items:center;flex:0 1 340px;min-width:0;margin:0}
.sm-search .icon{position:absolute;left:11px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.sm-search input{width:100%;min-width:0;padding:9px 12px 9px 34px;font-size:14px}
.sm-section{margin-top:18px}
.sm-section .section-heading{flex-wrap:wrap;gap:4px 12px;margin:0 0 10px}
.sm-section .section-heading h2 .icon{width:17px;height:17px;flex-shrink:0}
.sm-heading-note{font-size:12.5px}
.sm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.sm-table{width:100%;max-width:none;margin:0;border-collapse:collapse;table-layout:auto;font-size:14px}
.sm-table th{min-width:0;border:0;padding:10px;background:var(--paper);color:var(--muted);font-weight:500;font-size:12.5px;text-align:left;white-space:nowrap}
.sm-table td{padding:10px;border:0;border-top:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.sm-table td .sm-sub{display:block;margin-top:2px;color:var(--muted);font-size:12px;white-space:nowrap}
.sm-target{display:flex;align-items:flex-start;gap:8px;min-width:0}
.sm-target>.icon{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--muted)}
.sm-target-text{display:flex;flex-direction:column;min-width:0}
.sm-name{min-width:150px;max-width:220px}
.sm-recipient{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.sm-recipient small{color:var(--muted);font-size:12.5px}
.sm-dates{display:block;white-space:nowrap}
.sm-title{padding:0;font-size:14px;font-weight:600;text-align:left;overflow-wrap:anywhere;color:var(--ink)}
.sm-title:hover{color:var(--green);text-decoration:underline}
.sm-badge{display:inline-block;margin:2px 0;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1.5;white-space:nowrap;background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.sm-sub .sm-badge{margin:0 0 0 4px}
.sm-badge.ok{background:var(--green-light);color:var(--green-dark);border-color:transparent}
.sm-badge.wait{color:var(--ink)}
.sm-badge.off{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:transparent}
.sm-select{width:auto;min-width:0;max-width:100%;padding:7px 9px;font-size:14px}
.sm-url{display:flex;gap:6px;align-items:center;min-width:170px}
.sm-url .btn{padding:7px 9px}
.sm-url .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sm-url input{flex:1 1 auto;width:auto;min-width:0;padding:7px 9px;font-size:12.5px;color:var(--muted)}
.sm-url .btn .icon{width:14px;height:14px}
.sm-note{font-size:12.5px;color:var(--muted)}
.sm-opens{display:inline-flex;align-items:center;gap:5px}
.sm-opens .icon{width:16px;height:16px;color:var(--muted)}
.sm-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.sm-actions .btn{white-space:nowrap}
.sm-cell{min-width:0}
.sm-gone td,.sm-expired td{background:var(--paper)}
.sm-gone .sm-cell,.sm-gone .sm-title,.sm-expired .sm-title{color:var(--muted)}
.sm-gone .sm-title{font-weight:500}
.sm-gone .sm-badge.gone{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.sm-empty{padding:18px;border:1px dashed var(--line);border-radius:12px;text-align:center}
@media(max-width:1100px){
    .sm-table-wrap{border:0;overflow:visible;background:none}
    .sm-table thead{display:none}
    .sm-table,.sm-table tbody,.sm-table tr,.sm-table td{display:block;width:100%}
    .sm-table tr{margin-bottom:10px;padding:4px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
    .sm-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:6px 12px;padding:9px 0;text-align:right;min-width:0;max-width:none;overflow-wrap:anywhere;background:none!important}
    .sm-table td>.sm-cell{flex:1 1 0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
    .sm-gone,.sm-expired{background:var(--paper)!important}
    .sm-table tr td:first-child{border-top:0}
    .sm-table td:before{content:attr(data-label);flex:0 0 auto;max-width:45%;color:var(--muted);font-size:12.5px;text-align:left}
    .sm-table td .sm-sub{white-space:normal}
    .sm-table td.sm-link{flex-direction:column;align-items:stretch;text-align:left}
    .sm-table td.sm-link>.sm-cell{align-items:stretch}
    .sm-url{min-width:0;width:100%}
    .sm-url .btn span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
    .sm-table td.sm-name{justify-content:flex-start;text-align:left}
    .sm-table td.sm-name>.sm-cell{align-items:flex-start}
    .sm-table td.sm-name:before{display:none}
    .sm-recipient{align-items:flex-end}
    .sm-dates{white-space:normal}
    .sm-actions{align-self:stretch;justify-content:flex-end}
    .sm-name{max-width:none}
}
@media(max-width:700px){
    .profile-row{padding-bottom:18px}
    .account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
    .account-tabs button{justify-content:center;padding:9px 8px;font-size:14px}
    .account-card{padding:16px}
    .account-inline{flex-wrap:wrap}
    .account-inline .btn{flex:1 1 100%}
    .account-card .row-actions .btn{flex:1 1 100%}
    .sm-search{flex:1 1 100%}
}
@media(max-width:380px){
    .sm-table td:before{max-width:40%}
    .sm-actions .btn{flex:1 1 100%}
}

/* A8 legal pages (/terms, /privacy), the legal links of every footer and the back-office tab "กฎหมาย" */
body[data-page=legal] .language-picker{position:absolute}
.legal-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink)}
.legal-header{width:100%;max-width:820px;margin:0 auto;box-sizing:border-box;padding:18px 20px 6px;display:flex;flex-direction:column;gap:14px}
.legal-header .brand{align-self:flex-start}
.legal-switch{display:flex;flex-wrap:wrap;gap:8px}
.legal-switch a{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font-size:14px;line-height:1.5}
.legal-switch a[aria-current=page]{background:var(--green);border-color:var(--green);color:var(--c18)}
.legal-main{width:100%;max-width:820px;margin:0 auto;box-sizing:border-box;padding:6px 20px 36px;flex:1}
.legal-main h1{font-size:30px;line-height:1.35;letter-spacing:-.4px;margin:14px 0 4px}
.legal-meta{margin:0 0 14px;color:var(--muted);font-size:14px}
.legal-note{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:var(--c163);color:var(--c164);font-size:14px;line-height:1.6}
.legal-toc{margin:0 0 26px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.legal-toc h2{margin:0 0 6px;font-size:15px;line-height:1.5}
.legal-toc ul{margin:0;padding:0;list-style:none;columns:2 250px;column-gap:28px}
.legal-toc li{break-inside:avoid;padding:3px 0;font-size:15px;line-height:1.5}
.legal-body{font-size:16px;line-height:1.85;overflow-wrap:anywhere}
.legal-body h2{margin:34px 0 8px;font-size:21px;line-height:1.45;scroll-margin-top:16px}
.legal-body h3{margin:22px 0 6px;font-size:17px;line-height:1.5;scroll-margin-top:16px}
.legal-body p{margin:0 0 12px}
.legal-body ul,.legal-body ol{margin:0 0 12px;padding-left:22px}
.legal-body li{margin:3px 0}
.legal-body code{padding:1px 5px;border-radius:5px;background:var(--c17);font-size:13.5px}
.legal-body blockquote{margin:0 0 12px;padding:8px 16px;border-left:3px solid var(--line);color:var(--muted)}
.legal-body table{width:100%;margin:6px 0 16px;border-collapse:collapse;font-size:14.5px;line-height:1.6;background:var(--white)}
.legal-body th,.legal-body td{padding:8px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.legal-body th{background:var(--c165);color:var(--c166);font-weight:600;font-size:13.5px}
.legal-body .legal-contact{list-style:none;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.legal-consent{margin:18px 0 22px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--white);scroll-margin-top:16px}
.legal-consent h3{margin:0 0 6px;font-size:17px}
.legal-consent-state{margin:0 0 10px}
.legal-consent-saved{margin:0 0 10px;padding:6px 10px;border-radius:8px;background:var(--c168);color:var(--c169);font-size:14px}
.legal-consent-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;margin:0 0 10px}
.legal-consent-buttons .btn{width:100%;font-size:15px;color:var(--ink)}
.legal-consent-buttons .btn[aria-pressed=true]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.legal-consent-help{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.legal-slot{padding:12px 14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:14px}
.legal-footer{width:100%;max-width:820px;margin:0 auto;box-sizing:border-box;padding:16px 20px 26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:13px;line-height:1.7}
.legal-footer .login-contact a{color:inherit}
.legal-links{display:inline-flex;flex-wrap:wrap;gap:2px 8px}
.legal-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sidebar-legal{margin:10px 9px 0;color:var(--c77);font-size:12px;line-height:1.6}
.register-legal{margin:-14px 0 20px;color:var(--c48);font-size:12.5px;line-height:1.6}
.register-legal a{text-decoration:underline;text-underline-offset:2px}
#name-field[hidden]~.register-legal{display:none}
.legal-editor .legal-langs{margin:4px 0 10px}
.legal-editor textarea{display:block;width:100%;box-sizing:border-box;min-height:420px;resize:vertical;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.legal-editor .legal-meta-line{margin:8px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6}
#modal:has(.legal-preview){max-width:820px}
.legal-preview.legal-body p{font-size:15px;line-height:1.8;color:var(--ink)}
.legal-preview.legal-body h2{margin:26px 0 8px;font-size:19px}
@media(max-width:640px){
    .legal-header{padding:14px 16px 4px}
    .legal-header .brand .brand-logo{width:140px}
    .legal-main{padding:4px 16px 28px}
    .legal-main h1{font-size:25px}
    .legal-body{font-size:15.5px}
    .legal-body h2{font-size:19px}
    .legal-body table,.legal-body tbody,.legal-body tr,.legal-body td{display:block;width:100%;box-sizing:border-box}
    .legal-body table{border:0;background:none}
    .legal-body thead{display:none}
    .legal-body tr{margin-bottom:10px;padding:2px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
    .legal-body td{padding:8px 0;border:0;border-top:1px solid var(--line)}
    .legal-body tr td:first-child{border-top:0}
    .legal-body td[data-label]:before{content:attr(data-label);display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
    .legal-consent{padding:16px}
    .legal-footer{padding:14px 16px 22px}
    .legal-editor textarea{min-height:320px}
}
@media print{.language-picker,.legal-switch,.legal-consent-buttons{display:none}}
/* A1 (kv-flow RULES 38): the other kinds in the trash (trash.js) and the audit log of the back office (backoffice-audit.js). */
.trash-more{margin-top:30px}
.trash-section .section-heading h2 .muted{font-size:12.5px;font-weight:400}
.trash-row{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.trash-row-icon{display:flex;color:var(--muted);flex-shrink:0}
.trash-row-main{flex:1;min-width:0}
.trash-row-main strong{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.trash-row-main small{display:block;margin-top:3px;font-size:12.5px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.trash-row-actions{display:flex;gap:6px;flex-shrink:0}
.trash-note{font-size:12.5px;margin:6px 0 12px}
/* Owner 6 Nov 2026: see what each trashed item is (thumbnails, the look-at dialogs), "ล้างทั้งหมด", the AI menu entry. */
.trash-thumb{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:8px;overflow:hidden;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.trash-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.trash-file-name{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.trash-auto-note{display:flex;align-items:center;gap:6px;margin-top:-6px}
.trash-empty-all{white-space:nowrap}
#trash-empty-reason{display:block;width:100%;box-sizing:border-box;margin-top:6px;resize:vertical}
.note-card .trash-actions{flex-wrap:wrap}
.note-card .trash-actions .btn{white-space:nowrap}
dialog:has(.trash-view){max-width:720px}
.trash-view-meta{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0 0 12px;overflow-wrap:anywhere}
.trash-view-heading{font-size:14px;margin:16px 0 6px}
.trash-view-list{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:5px}
.trash-view-list li{display:flex;align-items:center;gap:6px;font-size:13.5px;overflow-wrap:anywhere;min-width:0}
.trash-view-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:13.5px}
.trash-view-facts dt{color:var(--muted)}
.trash-view-facts dd{margin:0;overflow-wrap:anywhere}
.trash-view-file{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:inherit;cursor:pointer;text-align:left;font:inherit}
.trash-view-file img{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}
.trash-view-file span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.trash-view-file small{color:var(--muted);font-size:12px}
.trash-note-body{max-height:45vh}
.account-tab-intro{font-size:13.5px;color:var(--muted);margin:0 0 14px;line-height:1.7}
.account-export-off{display:flex;align-items:center;gap:6px}
.audit-filters input{flex:1 1 150px}
.audit-filters input[name=from],.audit-filters input[name=to]{flex:0 1 140px}
.audit-table td{vertical-align:top;white-space:normal}
.audit-table td:nth-child(2),.audit-table td:nth-child(4){min-width:150px}
.audit-table td:nth-child(5){min-width:260px}
.audit-table td:nth-child(6){min-width:130px}
.audit-changes{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.75;max-width:460px}
.audit-changes li{overflow-wrap:anywhere}
.audit-table code{font-size:12px;overflow-wrap:anywhere}
.audit-action{display:block;margin-top:4px;color:var(--muted)}
.audit-meta{display:block;margin-top:4px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.audit-links{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12.5px}
.audit-links a,.audit-ip{white-space:nowrap}
.audit-verb{display:inline-block;padding:3px 8px;border-radius:5px;font-size:12px;background:var(--green-light);color:var(--green-dark);white-space:nowrap}
.audit-verb.deleted,.audit-verb.purged,.audit-verb.erased{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.audit-verb.restored{background:transparent;border:1px solid var(--green);color:var(--green)}
@media(max-width:700px){
    .trash-row{flex-wrap:wrap}
    .trash-thumb{width:52px;height:52px}
    .trash-view-facts{grid-template-columns:1fr;gap:2px}
    .trash-view-facts dd{margin-bottom:6px}
    .trash-row-actions{width:100%}
    .trash-row-actions .btn{flex:1 1 0}
    .audit-filters input,.audit-filters input[name=from],.audit-filters input[name=to],.audit-filters select{flex:1 1 100%}
    .audit-filters .btn{flex:1 1 0}
    .audit-table td:nth-child(n){min-width:0}
    .audit-table td:nth-child(5){flex-direction:column;align-items:stretch;text-align:left}
    .audit-table td:nth-child(3),.audit-table td:nth-child(6){flex-wrap:wrap}
    .audit-table td:nth-child(3) .audit-action,.audit-table td:nth-child(6) .audit-meta{flex:1 1 100%;margin-top:0;text-align:right}
    .audit-table td:nth-child(5):before{max-width:none}
    .audit-changes{max-width:none}
    .audit-table td>.audit-links{justify-content:flex-end}
}
/* Popup menus at the pointer: note cards, notebooks and the editor's "ตัวเลือกโน้ต" (context-menu.js, owner 2 Nov 2026) */
.context-menu{position:fixed;z-index:150;min-width:230px;max-width:min(340px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow-y:auto;padding:6px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px var(--c213)}
.context-menu-title{margin:2px 10px 6px;padding-bottom:7px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.context-menu [role=menuitem]{display:flex;align-items:center;gap:11px;width:100%;min-height:38px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:14px;line-height:1.4;text-align:left}
.context-menu [role=menuitem]:focus{outline:0}
.context-menu [role=menuitem]:hover,.context-menu [role=menuitem]:focus-visible{background:var(--c62)}
.context-menu [role=menuitem]:focus-visible{box-shadow:inset 0 0 0 2px var(--c14)}
.context-menu [role=menuitem] .icon{width:17px;height:17px;color:var(--muted)}
.context-menu .danger,.context-menu .danger .icon{color:var(--danger)}
.context-menu hr{border:0;border-top:1px solid var(--line);margin:5px 6px}
@media(pointer:coarse){.context-menu [role=menuitem]{min-height:44px}}
/* A card dragged between cards of a notebook sorted by the dragged order (drag-drop.js) */
.notes-grid .note-card.dnd-before::after,.notes-grid .note-card.dnd-after::after{content:'';position:absolute;top:10px;bottom:10px;width:4px;border-radius:2px;background:var(--green);pointer-events:none}
.notes-grid .note-card.dnd-before::after{left:-10px}
.notes-grid .note-card.dnd-after::after{right:-10px}
.notes-grid.dnd-rows .note-card.dnd-before::after,.notes-grid.dnd-rows .note-card.dnd-after::after{left:12px;right:12px;width:auto;height:4px;top:auto;bottom:auto}
.notes-grid.dnd-rows .note-card.dnd-before::after{top:-10px}
.notes-grid.dnd-rows .note-card.dnd-after::after{bottom:-10px}
/* Share dialog: the note order of a notebook's shared page, link passwords and who opened the link (sharing.js) */
.share-order{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:14px 0 4px;font-size:14px}
.share-order select{font-size:13px;padding:8px}
.share-passwords{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.share-passwords h4{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:14px}
.share-passwords h4 .icon,.share-password-row .icon{width:15px;height:15px}
.share-password-row .member-name{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.share-password-row .member-name strong{display:inline-flex;align-items:center;gap:6px}
.share-password-row .btn{flex-shrink:0;white-space:nowrap}
.share-password-form{display:grid;gap:4px;margin-top:8px}
.share-password-form label{margin:6px 0 2px;font-size:13px}
.share-password-form label>span:first-child{display:block;margin-bottom:4px}
.share-password-input{display:flex;gap:6px}
.share-password-input input{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px}
.share-password-form>button{justify-self:start;margin-top:6px}
.share-password-new{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:14px}
.share-password-new code{font-size:15px;font-weight:600;letter-spacing:1px}
.share-password-new small{flex-basis:100%;color:var(--muted);font-size:12px}
.share-views-link{margin:12px 0 0}
.share-views-link .btn{color:var(--ink)}
dialog:has(.share-views){max-width:820px}
.share-views h3{font-size:15px;margin:18px 0 8px}
.sv-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.sv-table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
.sv-table th{padding:9px 12px;font-weight:500;font-size:12px;color:var(--muted);background:var(--paper)}
.sv-table td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.sv-viewer{display:inline-flex;align-items:center;gap:6px}
.sv-viewer .icon{width:14px;height:14px;color:var(--muted)}
@media(max-width:620px){.sv-table thead{display:none}.sv-table tr{display:block;padding:8px 0;border-top:1px solid var(--line)}.sv-table tr:first-child{border-top:0}.sv-table td{display:flex;justify-content:space-between;gap:12px;padding:4px 12px;border:0;text-align:right}.sv-table td::before{content:attr(data-label);color:var(--muted);font-size:12px;text-align:left}}
/* "จัดการแชร์": the open count opens who opened the link; a lock badge for links with passwords (share-manager.js) */
button.sm-opens{border:0;background:none;padding:3px 7px;margin:-3px -7px;border-radius:6px;color:inherit;font:inherit;cursor:pointer}
button.sm-opens:hover{background:var(--c62)}
.sm-badge.lock{display:inline-flex;align-items:center;gap:4px;margin:4px 0 0}
.sm-badge.lock .icon{width:12px;height:12px}
/* "บัญชีผู้ใช้" in the back office: the plan of each account */
.plan-select{font-size:12.5px;padding:6px 8px}
/* Photo albums in a note (collaborative-editor.js, album.js). While dragging, the picture frame or album under the pointer shows
   a line above or below it (reorder) or a frame with a label (merge); then the album grid and its controls */
[data-album-drop=before]{box-shadow:0 -8px 0 -4px var(--green)}
[data-album-drop=after]{box-shadow:0 8px 0 -4px var(--green)}
.album-drop-active .prosemirror-dropcursor-block,.album-drop-active .prosemirror-dropcursor-inline{display:none}
.collab-attachment .embed-preview[draggable=true]{cursor:grab}
.collab-album{position:relative;max-width:100%;margin:16px 0;border:1px solid var(--line);border-radius:10px;background:var(--white);user-select:none}
.collab-album[draggable=true]{cursor:grab}
.collab-album.ProseMirror-selectednode{outline:2px solid var(--c204)}
.album-grid{display:grid;grid-template-columns:repeat(var(--album-columns,2),minmax(0,1fr));gap:6px;padding:6px}
.album-item{position:relative;margin:0;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--paper)}
.album-open{display:block;height:100%;cursor:pointer}
.album-item img{display:block;width:100%;height:100%;object-fit:cover}
.album-open:not(:has(img)),.album-missing{display:flex;align-items:center;justify-content:center;height:100%;padding:8px;font-size:12px;line-height:1.4;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.album-item-actions{position:absolute;left:4px;right:4px;bottom:4px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;opacity:0;transition:opacity .15s}
.album-item:hover .album-item-actions,.album-item:focus-within .album-item-actions{opacity:1}
.album-item-actions .btn{min-height:30px;padding:2px 9px;font-size:13px;line-height:1.2;background:color-mix(in srgb,var(--white) 90%,transparent)}
.album-item-dragging{opacity:.45}
.album-item[data-thumb-drop]::after{content:'';position:absolute;top:4px;bottom:4px;width:4px;border-radius:2px;background:var(--green);box-shadow:0 0 0 2px var(--white);pointer-events:none}
.album-item[data-thumb-drop=before]::after{left:2px}
.album-item[data-thumb-drop=after]::after{right:2px}
.album-controls{border-top:1px solid var(--line)}
.album-controls .album-split,.image-controls .album-merge-next,.image-controls .album-merge-previous{font-size:13px}
.album-grip{font-size:17px;line-height:1;color:var(--muted);cursor:grab;padding:0 2px}
.album-count{font-weight:600;color:var(--ink)}
@media(hover:none){.album-item-actions{opacity:1}}
@media(max-width:640px){.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.album-item-actions{left:2px;right:2px;bottom:2px;gap:3px}.album-item-actions .btn{padding:2px 6px;font-size:12px}}
@media print{.album-controls,.album-item-actions{display:none}}
.album-caption{margin:0;padding:2px 12px 8px;font-size:15px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.album-caption-input{display:block;width:calc(100% - 12px);margin:0 6px 8px;padding:8px 10px;font-size:15px}
.album-controls .album-caption-edit{font-size:15px;min-width:34px}
/* Albums outside the editor (offline copy, revision preview in app.js): one frame, one line per file */
.note-body div[data-album]{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:14px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.note-body div[data-album]>div[data-attachment]::before{content:'📎 '}
.note-body div[data-album]>.revision-file{margin:0}
.note-body div[data-album][data-caption]::after{content:attr(data-caption);font-size:15px;color:var(--muted);overflow-wrap:anywhere}
/* Album round 2 (owner 3 Nov 2026): merging glows blue with a fixed label on screen (collaborative-editor.js AlbumDrop), unlike the
   green line of a reorder; the same blue flashes on the album a merge made. Fixed colours in both themes, so outside the tokens. */
/* theme-tokens:skip */
[data-album-drop=merge]{box-shadow:0 0 0 3px #2f80ed,0 0 28px rgba(47,128,237,.65)}
.album-merge-label{position:fixed;z-index:200;padding:9px 18px;border:2px solid #2f80ed;border-radius:999px;background:#1a66cc;color:#ffffff;font:600 15px/1.4 Notekrub,sans-serif;white-space:nowrap;box-shadow:0 0 22px rgba(47,128,237,.6);pointer-events:none}
@media(prefers-reduced-motion:no-preference){.album-flash{animation:album-flash 1.2s ease-out}}
@media(prefers-reduced-motion:reduce){.album-flash{box-shadow:0 0 0 3px #2f80ed}}
@keyframes album-flash{from{box-shadow:0 0 0 3px #2f80ed,0 0 28px rgba(47,128,237,.65)}to{box-shadow:0 0 0 3px rgba(47,128,237,0),0 0 28px rgba(47,128,237,0)}}
/* theme-tokens:end */
/* "อัลบั้ม" (?view=albums, albums.js): a card per album and note with its cover, three more thumbnails and where it is; the picker
   of "แทรกอัลบั้ม…" lists the albums of other notes */
.albums-page{max-width:1100px}
.albums-page .view-header>.icon{width:30px;height:30px;color:var(--c134)}
.albums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.album-card{display:flex;flex-direction:column;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.album-card-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px}
.album-card-photos a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:7px;background:var(--paper)}
.album-card-photos a.album-card-cover{grid-column:1/-1;aspect-ratio:4/3}
.album-card-photos img{display:block;width:100%;height:100%;object-fit:cover}
.album-card-photos a[data-more]::after{content:attr(data-more);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink) 55%,transparent);color:var(--white);font-weight:600;font-size:16px}
.album-card-body{display:flex;flex-direction:column;gap:4px;padding:10px 14px 14px;min-width:0}
.album-card-body h3{margin:0;font-size:15px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.album-card-body p,.album-card-more{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.album-card-body .text-btn{padding:0;font-size:12.5px;text-align:left;overflow-wrap:anywhere}
.album-card-more summary{cursor:pointer;color:var(--green)}
.album-card-more .text-btn{display:block;margin:4px 0 0}
.album-picker{display:grid;gap:6px;max-height:min(420px,60dvh);overflow:auto;margin-top:12px}
.album-option{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line);background:var(--c160);border-radius:9px;padding:8px;font-size:14px;color:var(--ink)}
.album-option:hover{background:var(--c211)}
.album-option img{width:56px;height:56px;flex-shrink:0;object-fit:cover;border-radius:6px;background:var(--paper)}
.album-option span{flex:1;min-width:0}
.album-option strong,.album-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-option small{font-size:12px;color:var(--muted)}
@media(max-width:640px){.albums-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.album-card-body{padding:8px 10px 10px}}
/* Attachment list: pictures and PDFs open the viewer, the arrow beside them downloads */
.file-row>a.file-download{flex:none}
/* Link cards in a note (collaborative-editor.js linkPreview, link-embeds.js): site, title, description and thumbnail; a video
   card plays in place after a click. Outside the editor (offline copy) a card is one line with its title */
.link-card{position:relative;display:flex;gap:14px;max-width:680px;margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--white);user-select:none}
.link-card.ProseMirror-selectednode{outline:2px solid var(--green);outline-offset:2px}
.link-thumb{position:relative;flex:0 0 200px;align-self:flex-start;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--paper)}
.link-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.link-card-video{flex-direction:column}
.link-card-video .link-thumb{flex:none;align-self:stretch;width:100%}
.link-play{position:absolute;inset:0;margin:auto;width:68px;height:48px;border:0;border-radius:14px;background:color-mix(in srgb,var(--ink) 82%,transparent);color:var(--white);font-size:21px;cursor:pointer;box-shadow:var(--shadow)}
.link-play:hover,.link-play:focus-visible{background:var(--danger);color:var(--white)}
.link-playing iframe{display:block;width:100%;height:100%;border:0}
.link-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;flex:1}
.link-site{font-size:12.5px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.note-prosemirror .link-title,.link-title{font-size:16px;font-weight:600;line-height:1.45;color:var(--green);text-decoration:none;overflow-wrap:anywhere}
.link-title:hover{text-decoration:underline}
.link-description{margin:0;font-size:14px;line-height:1.55;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.link-url,.link-status{max-width:100%;font-size:12.5px;line-height:1.4;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-card .link-plain{margin-top:6px;font-size:13px}
.note-body div[data-link-preview]{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;overflow-wrap:anywhere}
.note-body div[data-link-preview]::before{content:'🔗 ' attr(data-url)}
.note-body div[data-link-preview][data-title]::before{content:'🔗 ' attr(data-title)}
@media(max-width:640px){.link-card{flex-direction:column;padding:10px}.link-thumb{flex:none;align-self:stretch;width:100%}}
@media print{.link-card .link-plain,.link-play{display:none}}
/* Viewer of pictures and PDFs (viewer.js): dark in both themes like a photo viewer, the file in the middle, ‹ › at the sides */
/* theme-tokens:skip */.media-viewer{--mv-bg:#101311fa;--mv-ink:#f3f5f1;--mv-muted:#bcc4b9;--mv-button:#ffffff1f;--mv-button-hover:#ffffff3d;--mv-page:#ffffff;--mv-page-ink:#5d655e;--mv-shadow:#0006}/* theme-tokens:end */
.media-viewer-open,.media-viewer-open body{overflow:hidden}
.media-viewer{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:var(--mv-bg);color:var(--mv-ink);overscroll-behavior:contain}
.media-viewer [hidden],.media-viewer[hidden]{display:none!important}
.mv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:58px;padding:10px 14px}
.mv-title{display:flex;align-items:baseline;gap:10px;flex:1 1 220px;min-width:0}
.mv-count{flex:none;font-size:13px;color:var(--mv-muted);font-variant-numeric:tabular-nums}
.mv-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mv-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:6px 14px;border:0;border-radius:999px;background:var(--mv-button);color:var(--mv-ink);font:inherit;font-size:14px;line-height:1.2;text-decoration:none;cursor:pointer}
.mv-button:hover{background:var(--mv-button-hover)}
.mv-button:focus-visible,.mv-nav:focus-visible{outline:2px solid var(--mv-ink);outline-offset:2px}
.mv-close{width:38px;padding:0;font-size:17px}
.mv-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 68px 16px;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.mv-image{display:block;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.mv-stage.mv-actual{align-items:flex-start;justify-content:flex-start;padding:0;overflow:auto;touch-action:auto}
.mv-actual .mv-image{max-width:none;max-height:none;margin:auto;cursor:zoom-out}
.mv-stage.mv-stage-pdf{display:block;padding:0 68px 28px;overflow:auto;touch-action:pan-y pinch-zoom}
.mv-pdf{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(1000px,100%);margin:0 auto}
.mv-pdf-page{display:flex;align-items:center;justify-content:center;width:100%;background:var(--mv-page);color:var(--mv-page-ink);font-size:13px;box-shadow:0 4px 18px var(--mv-shadow)}
.mv-pdf-page canvas{display:block;width:100%;height:auto}
.mv-loading{margin:48px 0 0;font-size:14px;color:var(--mv-muted)}
.mv-message{max-width:440px;margin:auto;font-size:15px;line-height:1.6;text-align:center}
.mv-message p{margin:0 0 14px}
.mv-nav{position:absolute;top:50%;z-index:2;width:48px;height:64px;transform:translateY(-50%);border:0;border-radius:12px;background:var(--mv-button);color:var(--mv-ink);font-size:34px;line-height:1;cursor:pointer}
.mv-nav:hover:not(:disabled){background:var(--mv-button-hover)}
.mv-nav:disabled{opacity:.3;cursor:default}
.mv-previous{left:10px}
.mv-next{right:10px}
.mv-page{position:absolute;left:50%;bottom:12px;z-index:2;padding:4px 12px;transform:translateX(-50%);border-radius:999px;background:var(--mv-bg);font-size:13px;pointer-events:none}
@media(max-width:640px){.mv-bar{padding:8px 10px}.mv-stage,.mv-stage.mv-stage-pdf{padding:0 6px 12px}.mv-nav{top:auto;bottom:14px;width:44px;height:44px;transform:none;background:var(--mv-bg);box-shadow:0 0 0 1px var(--mv-button-hover);font-size:28px}.mv-previous{left:8px}.mv-next{right:8px}.mv-page{bottom:22px}.mv-button{padding:6px 12px;font-size:13px}}
/* The formatting toolbar stays at the top while a note scrolls (owner 3 Nov 2026); on phones it is one row that scrolls sideways */
.editor-layout{height:auto}
/* top = minus the padding-top of .main-content at each width, so the bar meets the top of the scrolling area */
.editor-toolbar{position:sticky;top:-36px;z-index:6}
@media(min-width:1600px){.editor-toolbar{top:-42px}}
@media(max-width:1200px){.editor-toolbar{top:-28px}}
@media(max-width:700px){.editor-toolbar{top:-24px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.editor-toolbar::-webkit-scrollbar{display:none}.editor-toolbar>*{flex-shrink:0}}
/* Quick colour palettes of the text colour and the highlight (color-palette.js) */
.color-palette{position:fixed;z-index:150;width:max-content;max-width:calc(100vw - 16px);padding:10px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px var(--c213)}
.color-palette-title{margin:0 2px 8px;font-size:12px;color:var(--muted)}
.color-swatches{display:grid;grid-template-columns:repeat(5,30px);gap:8px}
.color-swatch{width:30px;height:30px;padding:0;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:7px;background:var(--swatch);cursor:pointer;transition:transform .1s}
.color-swatch:hover{transform:scale(1.08)}
.color-swatch:focus-visible{outline:2px solid var(--c14);outline-offset:2px}
.color-palette-actions{display:flex;gap:6px;margin-top:10px}
.color-palette-actions .btn{flex:1;font-size:12.5px;padding:6px 8px}
@media(pointer:coarse){.color-swatches{grid-template-columns:repeat(5,36px)}.color-swatch{width:36px;height:36px}}
/* From 4 files on, the attachments under a note start as one row that opens the list (owner 3 Nov 2026, file-list.js) */
.file-summary{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:10px 12px;margin-bottom:6px;border:1px solid var(--c159);border-radius:7px;background:var(--c160);color:inherit;font-size:12.5px;text-align:left}
.file-summary:hover{background:var(--c22)}
.file-summary span{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.file-summary-chevron{transition:transform .15s}
.file-summary[aria-expanded=true] .file-summary-chevron{transform:rotate(180deg)}
/* Owner 8 Nov 2026 (what the Evernote migration found missing): repeat "กำหนดเอง…", the note link of a task row, the mark of a
   checklist item linked to a task, file cards, the language label of a code block, indents and table cell tools */
.repeat-custom{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.task-add .repeat-custom{margin-top:0;flex:1 1 260px}
.repeat-custom input[name=repeat_interval]{width:5.5em;flex:0 0 auto;min-width:0}
.repeat-custom select{flex:1 1 150px;min-width:0}
dialog .repeat-custom label.repeat-from,.repeat-custom .repeat-from{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px}
.repeat-from input{width:16px;height:16px;margin:0;flex:0 0 auto}
.task-note-link{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:0;border:0;background:none;color:var(--green);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;vertical-align:baseline;text-align:left}
.task-note-link .icon{width:12px;height:12px;flex:0 0 auto}
.task-note-link span{overflow-wrap:anywhere}
.note-prosemirror ul[data-type=taskList]>li>.task-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:4px;padding:0;border:1px solid var(--c11);border-radius:6px;background:var(--green-light);color:var(--green);cursor:pointer}
.note-prosemirror ul[data-type=taskList]>li>.task-link .icon{width:13px;height:13px}
.note-prosemirror ul[data-type=taskList]>li>.task-link:hover,.note-prosemirror ul[data-type=taskList]>li>.task-link:focus-visible{background:var(--green);color:var(--white)}
.note-body:not(:has(.note-prosemirror)) li[data-task]>p:first-child::after,.note-body:not(:has(.note-prosemirror)) li[data-task]>div>p:first-child::after{content:'';display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--green);vertical-align:middle}
.toolbar-context{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.toolbar-context .btn.small{min-height:30px;padding:4px 10px;font-size:12.5px;white-space:nowrap;gap:5px}
.toolbar-context .btn.small .icon{width:15px;height:15px}
#code-language{max-width:150px}
.file-card-wrap{display:flex;align-items:center;gap:8px;max-width:100%;margin:12px 0}
.file-card{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:min(100%,520px);padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:inherit;text-decoration:none;line-height:1.4}
a.file-card:hover,a.file-card:focus-visible{border-color:var(--green);background:var(--green-light)}
.file-card .file-card-icon{width:26px;height:26px;flex:0 0 auto;color:var(--green)}
.file-card-name{flex:1 1 auto;min-width:0;font-weight:600;overflow-wrap:anywhere}
.file-card-meta{flex:0 0 auto;color:var(--muted);font-size:12.5px;white-space:nowrap}
.file-card-missing{opacity:.75}
.file-card-remove{flex:0 0 auto;min-width:32px}
.ProseMirror-selectednode>.file-card,.file-card-wrap.ProseMirror-selectednode .file-card{outline:2px solid var(--green);outline-offset:2px}
.note-body pre[data-language]{position:relative;padding-top:30px}
.note-body pre[data-language]::before{content:attr(data-language);position:absolute;top:6px;right:10px;padding:1px 8px;border-radius:999px;background:var(--line);color:var(--muted);font:600 11px/1.6 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none;user-select:none}
.note-body [data-indent="1"]{padding-left:min(2.5em,40%)}
.note-body [data-indent="2"]{padding-left:min(5em,40%)}
.note-body [data-indent="3"]{padding-left:min(7.5em,45%)}
.note-body [data-indent="4"]{padding-left:min(10em,45%)}
.note-body [data-indent="5"]{padding-left:min(12.5em,50%)}
.note-body [data-indent="6"]{padding-left:min(15em,50%)}
.note-body [data-indent="7"]{padding-left:min(17.5em,50%)}
.note-body [data-indent="8"]{padding-left:min(20em,50%)}
@media(max-width:700px){.file-card{max-width:100%;padding:9px 12px;gap:8px}.file-card .file-card-icon{width:22px;height:22px}}
.note-body a.file-card,.note-body a.file-card:hover{text-decoration:none}
@media(max-width:700px){.task-add input[name=due_date]{flex:1 1 45%}}
/* Delete a picture or PDF from its card in the note (owner 9 Nov 2026, editor-media.js .embed-delete → app.js "delete-file") */
.embed-delete{width:25px;height:25px;color:var(--muted)}
.embed-delete .icon{width:15px;height:15px}
.embed-delete:hover,.embed-delete:focus-visible{color:var(--danger)}
/* Owner 9 Nov 2026 (nk-ui2): the notebook name and the pin and star of a card, the list view switch, the split view (list left, note right), the open-mode choices with their draft pictures, list items indented with data-indent. */
.note-card .card-top{gap:8px}.card-notebook{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;max-width:none;color:var(--ink);font-size:13px;font-weight:600}.card-notebook>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-card .card-top .card-notebook .icon{width:15px;height:15px;color:var(--brand-champagne,var(--green));stroke-width:2}.card-notebook.no-book{color:var(--muted);font-weight:500}.note-card .card-top .card-notebook.no-book .icon{color:var(--muted);stroke-width:1.65}
.card-flags{display:inline-flex;gap:5px;flex-shrink:0;margin:-4px -4px -4px 0}.card-flag{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--c8);color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.note-card .card-top .card-flag .icon{width:20px;height:20px}.card-flag:hover:not(:disabled){border-color:var(--c114);background:var(--green-light);color:var(--ink)}.card-flag:focus-visible{outline:2px solid var(--c14);outline-offset:2px}.card-pin.on{border-color:var(--ink);background:var(--ink);color:var(--c8)}.card-pin.on .icon{fill:currentColor}.card-star.on{border-color:var(--c122);background:var(--c8);color:var(--c122)}.card-star.on .icon{fill:var(--c121)}.card-flag:disabled{opacity:.45;cursor:default}.card-flag[aria-busy]{opacity:.7}@media(max-width:480px){.card-flags{gap:3px}.card-flag{width:30px;height:30px}}
.view-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--c8)}.view-switch-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:30px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted)}.view-switch-btn .icon{width:18px;height:18px}.view-switch-btn:hover:not(.on){color:var(--ink)}.view-switch-btn.on{background:var(--green-light);color:var(--green-dark)}@media(max-width:899px){.view-switch{display:none}}
#main-content.is-split{display:flex;padding:0;overflow:hidden}.split-view{flex:1 1 auto;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);min-width:0;min-height:0}.split-list{min-height:0;overflow:auto;padding:22px 16px 24px;border-right:1px solid var(--line)}.split-note{min-width:0;min-height:0;overflow:auto;background:var(--c8)}.split-note .editor-layout{margin:0;height:auto;min-height:100%}.split-note .editor-paper{padding:28px 34px 48px}.split-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;padding:24px;color:var(--muted);font-size:14px;text-align:center}.split-empty .icon{width:34px;height:34px;color:var(--c134)}
.split-list .view-header{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:14px}.split-list .view-header h1{font-size:22px}.split-list .view-header .actions{flex-wrap:wrap;justify-content:flex-start;max-width:none}.split-list .all-notes .notes-grid{grid-template-columns:minmax(0,1fr);gap:8px}.split-list .note-card{min-height:0;padding:11px 12px}.split-list .note-card:hover{transform:none}.split-list .note-card h3{margin:6px 0 2px;font-size:14px;-webkit-line-clamp:1}.split-list .note-card p{margin:0 0 6px;-webkit-line-clamp:2}.split-list .card-tags{margin:0 0 6px}.split-list .card-bottom{padding-top:6px}.note-card.is-open{border-color:var(--brand-champagne,var(--green));background:var(--green-light);box-shadow:inset 3px 0 0 var(--brand-champagne,var(--green))}
.open-intro{margin:0 0 14px}.open-choices{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}.open-choices>legend{margin-bottom:8px;padding:0}.open-choices label.open-choice{display:flex;align-items:center;gap:14px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--c8);font-size:14px;font-weight:400;letter-spacing:normal;cursor:pointer}.open-choices label.open-choice:has(input:checked){border-color:var(--green);background:var(--green-light);box-shadow:0 0 0 1px var(--green)}.open-choices .open-choice input{flex:0 0 auto;width:18px;height:18px;margin:0;padding:0;accent-color:var(--green);box-shadow:none}.open-art-wrap{display:flex;flex:0 0 112px}.open-art{display:block;width:112px;height:auto}.open-choice-text{display:flex;flex-direction:column;gap:2px;min-width:0}.open-choice-text strong{font-size:15px;color:var(--ink)}.open-choice-text small{font-size:12.5px;line-height:1.6;color:var(--muted)}
.open-art .oa-frame{fill:var(--c8);stroke:var(--c11);stroke-width:1.5}.open-art .oa-front{stroke:var(--green)}.open-art .oa-tab{fill:var(--green-light);stroke:var(--green);stroke-width:1.5}.open-art .oa-row{fill:var(--c62)}.open-art .oa-row-on{fill:var(--green-light);stroke:var(--green);stroke-width:1}.open-art .oa-line{fill:var(--c6)}.open-art .oa-accent{fill:var(--green)}.open-art .oa-divider{fill:none;stroke:var(--c11);stroke-width:1.5}.open-art .oa-arrow,.open-art .oa-back{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}@media(max-width:480px){.open-choices label.open-choice{gap:10px;padding:9px}.open-art-wrap{flex-basis:84px}.open-art{width:84px}}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.note-body li[data-indent]:not([data-type=taskItem]),.note-prosemirror li[data-indent]{padding-left:0}.note-body li[data-indent="1"]{margin-left:min(2.5em,40%)}.note-body li[data-indent="2"]{margin-left:min(5em,40%)}.note-body li[data-indent="3"]{margin-left:min(7.5em,45%)}.note-body li[data-indent="4"]{margin-left:min(10em,45%)}.note-body li[data-indent="5"]{margin-left:min(12.5em,50%)}.note-body li[data-indent="6"]{margin-left:min(15em,50%)}.note-body li[data-indent="7"]{margin-left:min(17.5em,50%)}.note-body li[data-indent="8"]{margin-left:min(20em,50%)}
@media print{.split-list,.view-switch,.card-flags{display:none!important}#main-content.is-split{display:block;overflow:visible;padding:0}.split-view{display:block}}
/* The note title (owner 9 Nov 2026, note-title.js): a one-row textarea that wraps a long title and grows with it, no scrollbar or handle. */
.note-title{display:block;height:auto;resize:none;overflow:hidden;field-sizing:content;padding:2px 0;line-height:1.3;white-space:pre-wrap;overflow-wrap:anywhere;background:transparent;color:var(--ink)}
.note-title:disabled{opacity:1;-webkit-text-fill-color:currentColor}
/* Phones: the input was held at 16px by the iOS zoom rule of brand.css; the textarea gets a title size that wraps well (≥16px, no zoom). */
@media(max-width:700px){.note-title{font-size:22px;letter-spacing:-.3px}}
/* Note colours (owner 9 Nov 2026, note-colors.js; the values are tested there): a soft tint on the card and the editor, a darker partner on the dark theme; secondary text darker (lighter on dark) so it stays readable. */
[data-note-color=sand]{--note-tint:#f4ede1;--note-edge:#e7d7bd}
[data-note-color=rose]{--note-tint:#f9e7eb;--note-edge:#f1cbd3}
[data-note-color=peach]{--note-tint:#fcebe0;--note-edge:#f8d3bc}
[data-note-color=lemon]{--note-tint:#f9f4d9;--note-edge:#f3e7ab}
[data-note-color=mint]{--note-tint:#dff2e8;--note-edge:#b9e3cc}
[data-note-color=sky]{--note-tint:#dfeef8;--note-edge:#b9d9f0}
[data-note-color=lavender]{--note-tint:#ece8f9;--note-edge:#d5ccf1}
[data-note-color=stone]{--note-tint:#ebebe9;--note-edge:#d3d3cf}
[data-note-color=custom]{--note-tint:var(--custom-tint);--note-edge:var(--custom-edge)}
[data-theme=dark] [data-note-color=sand]{--note-tint:#3d3831;--note-edge:#524839}
[data-theme=dark] [data-note-color=rose]{--note-tint:#403537;--note-edge:#584146}
[data-theme=dark] [data-note-color=peach]{--note-tint:#423730;--note-edge:#5b4638}
[data-theme=dark] [data-note-color=lemon]{--note-tint:#3d3a2b;--note-edge:#514b2d}
[data-theme=dark] [data-note-color=mint]{--note-tint:#2f3c35;--note-edge:#364f42}
[data-theme=dark] [data-note-color=sky]{--note-tint:#2f393f;--note-edge:#364957}
[data-theme=dark] [data-note-color=lavender]{--note-tint:#383540;--note-edge:#474158}
[data-theme=dark] [data-note-color=stone]{--note-tint:#373736;--note-edge:#464644}
[data-theme=dark] [data-note-color=custom]{--note-tint:var(--custom-tint-dark);--note-edge:var(--custom-edge-dark)}
.note-card[data-note-color],.editor-layout[data-note-color]{--muted:#615f59;background:var(--note-tint)}
[data-theme=dark] .note-card[data-note-color],[data-theme=dark] .editor-layout[data-note-color]{--muted:#b8b4ab}
.note-card[data-note-color]{border-color:var(--note-edge)}
.note-card.is-open[data-note-color]{border-color:var(--brand-champagne,var(--green))}
.note-card[data-note-color] .card-bottom{color:var(--muted);border-top-color:var(--note-edge)}
.note-card[data-note-color] .card-tags span{background:color-mix(in srgb,var(--white) 60%,transparent);color:var(--muted)}
.editor-layout[data-note-color] .editor-toolbar{background:color-mix(in srgb,var(--white) 45%,transparent)}
.editor-layout[data-note-color] .editor-top,.editor-layout[data-note-color] .editor-toolbar{border-bottom-color:var(--note-edge)}
.editor-layout[data-note-color] .editor-meta,.editor-layout[data-note-color] .editor-footer,.editor-layout[data-note-color] .editor-top .save-status{color:var(--muted)}
/* "สีโน้ต" in the editor's meta row: the current colour, opens the swatches under it. */
.editor-meta{flex-wrap:wrap}
.note-color-btn{display:inline-flex;align-items:center;gap:6px;min-height:30px;margin-left:auto;padding:3px 11px 3px 4px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:inherit;font-size:12px;line-height:1.2;cursor:pointer}
.note-color-btn:hover{border-color:var(--b46,var(--c114))}
.note-color-btn:focus-visible{outline:2px solid var(--c14);outline-offset:2px}
.note-color-btn:disabled{cursor:default}
.note-color-dot{position:relative;flex:none;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:50%;background:var(--swatch,var(--white));overflow:hidden}
.note-color-dot.is-none::after,.menu-swatch.is-none::after{content:'';position:absolute;left:3px;right:3px;top:50%;border-top:1.5px solid color-mix(in srgb,var(--ink) 45%,transparent);transform:rotate(-45deg)}
@media(max-width:480px){.note-color-text{display:none}.note-color-btn{padding:3px}}
/* A row of swatches in a popup menu (context-menu.js): the card's menu, "ตัวเลือกโน้ต" and the "สีโน้ต" button. */
.menu-swatches{padding:4px 8px 8px}
.menu-swatches-label{display:block;margin:2px 2px 8px;font-size:12px;color:var(--muted)}
.menu-swatch-row{display:flex;flex-wrap:wrap;gap:5px}
.menu-swatch{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:50%;background:var(--swatch);color:var(--ink);cursor:pointer;transition:transform .1s}
/* A circle keeps its named colour on the dark theme too (the dark partners look alike that small), with a dark tick; "ไม่มีสี" is the theme's surface. */
[data-theme=dark] .menu-swatch{background:var(--swatch-dark)}
.menu-swatch:not(.is-none){color:var(--brand-carbon,#202121)}
.menu-swatch:hover{transform:scale(1.08)}
.menu-swatch:focus{outline:0}
.menu-swatch:focus-visible{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--c14)}
.menu-swatch[aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.menu-swatch[aria-checked=true]:focus-visible{box-shadow:inset 0 0 0 1px var(--ink),0 0 0 2px var(--white),0 0 0 4px var(--c14)}
.swatch-check{position:relative;z-index:1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.menu-swatch[aria-checked=true] .swatch-check{opacity:1}
.menu-swatch.is-none[aria-checked=true]::after{display:none}
/* Shared pages, prints and HTML exports stay on white paper. */
@media print{.editor-layout[data-note-color]{background:var(--c8)!important}.note-color-btn{display:none!important}}