* { box-sizing: border-box; }
:root { font-family: "Segoe UI", Tahoma, Arial, sans-serif; color: #111; background: #f3f3f3; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: default; }
.notepad { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--app-bg); color: var(--fg); font-size: 13px; --app-bg:#f3f3f3; --editor-bg:#fff; --fg:#111; --muted:#666; --border:#dedede; --hover:#e5f1fb; --menu-bg:#fff; --accent:#0078d4; --selection:#316ac5; }
.notepad.theme-dark { --app-bg:#202020; --editor-bg:#1f1f1f; --fg:#eee; --muted:#aaa; --border:#414141; --hover:#333e49; --menu-bg:#2b2b2b; --accent:#4cc2ff; --selection:#264f78; }
.tabbar { min-height: 38px; display:flex; align-items:end; gap:4px; padding:5px 8px 0; border-bottom:1px solid var(--border); background:var(--app-bg); }
.tabs { display:flex; gap:3px; overflow-x:auto; flex:1; scrollbar-width:thin; }
.tab { display:flex; align-items:center; gap:10px; max-width:220px; min-width:90px; padding:7px 9px 7px 13px; border:1px solid transparent; border-bottom:0; border-radius:6px 6px 0 0; background:#e6e6e6; color:var(--fg); white-space:nowrap; }
.theme-dark .tab { background:#292929; }
.tab.active { background:var(--editor-bg); border-color:var(--border); }
.tab-name { overflow:hidden; text-overflow:ellipsis; }
.tab-close, .new-tab { border:0; background:transparent; color:var(--fg); border-radius:4px; padding:2px 6px; }
.tab-close:hover, .new-tab:hover { background:var(--hover); }
.new-tab { font-size:20px; margin-bottom:3px; }
.menubar { flex:0 0 auto; display:flex; align-items:center; gap:1px; padding:2px 5px; border-bottom:1px solid var(--border); background:var(--app-bg); }
.menu { position:relative; }
.menu-trigger { border:1px solid transparent; background:transparent; color:var(--fg); padding:5px 10px; border-radius:3px; }
.menu-trigger:hover, .menu-trigger[aria-expanded="true"] { background:var(--hover); }
.dropdown { position:absolute; top:calc(100% + 1px); left:0; z-index:20; min-width:245px; padding:5px; background:var(--menu-bg); color:var(--fg); border:1px solid #999; box-shadow:0 5px 16px #0003; }
.dropdown button { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; padding:7px 10px; text-align:left; color:inherit; border:0; background:transparent; white-space:nowrap; }
.dropdown button:hover { background:var(--hover); }
.dropdown button span:not(.checkmark) { color:var(--muted); font-size:12px; }
.dropdown hr { border:0; border-top:1px solid var(--border); margin:4px 5px; }
.checkmark { display:inline-block; width:14px; margin-right:4px; }
.editor-wrap { flex:1; min-height:0; background:var(--editor-bg); }
.editor { display:block; width:100%; height:100%; resize:none; border:0; outline:0; padding:10px 13px; background:var(--editor-bg); color:var(--fg); font-family:Consolas,"Cascadia Mono","Courier New",monospace; font-size:16px; line-height:1.45; tab-size:4; white-space:pre; overflow:auto; }
.editor::selection { background:var(--selection); color:#fff; }
.statusbar { height:25px; flex:0 0 25px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; border-top:1px solid var(--border); background:var(--app-bg); color:var(--muted); font-size:12px; }
.status-right { display:flex; align-items:center; gap:9px; }
.divider { color:var(--border); }
.dialog { width:min(440px, calc(100vw - 28px)); max-height:calc(100dvh - 30px); padding:0; border:1px solid #999; border-radius:5px; color:var(--fg); background:var(--menu-bg); box-shadow:0 12px 40px #0004; }
.dialog::backdrop { background:#0005; }
.dialog form { display:flex; flex-direction:column; max-height:inherit; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border-bottom:1px solid var(--border); }
.icon-close { border:0; background:transparent; color:var(--fg); font-size:21px; line-height:1; }
.dialog-body { padding:16px; overflow:auto; }
.dialog-body label { display:block; margin-bottom:12px; }
.dialog-body label > span { display:block; margin-bottom:5px; }
.dialog-body input[type="text"], .dialog-body input[type="number"], .dialog-body select { width:100%; padding:7px 8px; border:1px solid #999; border-radius:2px; background:var(--editor-bg); color:var(--fg); }
.dialog-body input[type="checkbox"] { margin-right:6px; }
.dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:0 16px 16px; }
.dialog-actions button { min-width:78px; padding:7px 12px; border:1px solid #999; border-radius:3px; background:transparent; color:var(--fg); }
.dialog-actions button.primary { border-color:var(--accent); background:var(--accent); color:white; }
.dialog-actions button:hover { filter:brightness(.96); }
.dialog-note { color:var(--muted); font-size:12px; line-height:1.5; }
.toast { position:fixed; bottom:38px; left:50%; transform:translateX(-50%); z-index:100; max-width:90vw; padding:8px 13px; border-radius:4px; background:#222; color:#fff; box-shadow:0 3px 12px #0003; opacity:0; pointer-events:none; transition:opacity .15s; }
.toast.show { opacity:1; }
@media (max-width:560px) { .tab { min-width:70px; max-width:150px; padding-left:8px; } .menubar { padding-left:2px; } .menu-trigger { padding:6px 7px; } .status-right { gap:5px; } #lineEnding { display:none; } .editor { padding:9px; } }
@media print { html,body { overflow:visible; height:auto; } .tabbar,.menubar,.statusbar { display:none!important; } .notepad,.editor-wrap { height:auto; overflow:visible; } .editor { height:auto; min-height:90vh; overflow:visible; white-space:pre-wrap; color:#000; background:#fff; } }