dialog.account-popup {position:fixed;inset:auto auto 72px 10px;width:220px;margin:0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-color:#98acc6}
dialog.account-popup::backdrop{background:transparent}
dialog.account-popup p{overflow-wrap:anywhere}
.feature-bar { padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.quick-form {display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.quick-form input {flex:1;min-width:120px;}
.feature-bar label { display:flex; align-items:center; gap:16px; }
.feature-bar select { min-width:180px; max-width:360px; }
.idea-layout {display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px;}
.idea-layout textarea {width:100%;min-height:360px;resize:vertical;padding:18px;margin-top:18px;}
.idea-layout aside {border-left:1px solid var(--line);padding-left:24px;}
.idea-layout .list button {overflow-wrap:anywhere;text-align:left;}
.pdf-start {min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
.pdf-start>svg {width:64px;height:64px;}
.start-gallery { margin:-32px -40px; min-height:calc(100vh - 128px); }
.gallery-inner { max-width:1160px; margin:0 auto; padding:38px 46px 60px; }
.gallery-inner > h2, .recent-heading h2 { font-size:18px; margin:0; }
.template-row { display:flex; gap:18px; overflow-x:auto; padding:20px 2px 38px; }
.template-card { width:176px; height:202px; padding:20px; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; text-align:left; color:var(--ink); background:#fff; border:1px solid #d5dce7; border-radius:6px; box-shadow:0 1px 2px #17233413; }
.template-card:hover, .recent-card:hover { border-color:#2563c8; box-shadow:0 4px 14px #1723341f; transform:translateY(-2px); }
.template-card .template-symbol { margin:auto; display:grid; place-items:center; color:#2666c7; }
.template-symbol svg { width:54px; height:54px; stroke-width:1.4; }
.template-card strong { font-size:15px; margin-bottom:7px; }
.template-card span:last-child { color:var(--muted); font-size:12px; line-height:1.45; }
.template-card.idea .template-symbol { color:#e08a12; }.template-card.words .template-symbol { color:#7448c9; }.template-card.plan .template-symbol { color:#23855d; }.template-card.calendar .template-symbol { color:#cf4a58; }
.template-card.pdf-card { align-items:center; justify-content:center; gap:14px; background:#fff9f3; }.template-card.pdf-card svg{width:50px;height:50px;color:#c84949}.template-card.pdf-card span{color:var(--muted);font-size:12px}
.recent-heading { border-top:1px solid var(--line); padding-top:28px; display:flex; align-items:center; justify-content:space-between; }.recent-heading span { color:var(--muted); font-size:13px; }
.recent-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:20px; margin-top:22px; }
.recent-card { min-height:218px; position:relative; overflow:visible; background:var(--bg); border:1px solid #d5dce7; border-radius:6px; color:var(--ink); }.card-open { width:100%; min-height:218px; padding:0 0 14px; display:flex; flex-direction:column; text-align:left; overflow:hidden; border:0; border-radius:6px; background:transparent; color:inherit; }.recent-card:hover { border-color:#2563c8; box-shadow:0 4px 14px #1723341f; transform:translateY(-2px); }.recent-card strong,.recent-card small { padding:0 42px 0 13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.recent-card strong{margin-top:12px;font-size:14px}.recent-card small{margin-top:5px;color:var(--muted);font-size:12px}
.card-menu { position:absolute; right:8px; bottom:8px; width:30px; height:30px; padding:0; display:grid; place-items:center; border:0; background:transparent; color:var(--muted); }.card-menu:hover { background:var(--panel); color:var(--ink); }
.card-dropdown { position:absolute; z-index:30; right:7px; bottom:40px; width:155px; padding:5px; display:grid; gap:1px; background:var(--bg); border:1px solid var(--line); border-radius:6px; box-shadow:0 10px 24px #17233445; }.card-dropdown button { padding:8px 9px; border:0; justify-content:flex-start; background:transparent; text-align:left; }.card-dropdown button:hover { background:var(--panel); }.card-dropdown .danger { color:#d44b4b; }
.doc-preview { min-height:142px; padding:18px 15px; display:block; overflow:hidden; white-space:pre-line; color:#6b7280; font:11px/1.65 Georgia,serif; border-bottom:1px solid var(--line); background:linear-gradient(90deg,#fff,#fdfdfd); }.doc-preview.words{font-family:inherit;color:#7448c9;font-weight:600}.doc-preview.plan{font-family:inherit;color:#536779;line-height:2}.doc-preview.calendar{font-family:inherit;color:#cf4a58;font-weight:600;line-height:2}.doc-preview.idea{font-family:inherit;color:#a25e15;line-height:1.6}
.recent-empty { margin-top:22px; min-height:190px; border:1px dashed #b7c4d4; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); gap:10px; }.recent-empty svg{width:32px;height:32px;color:#7b9ccc}.recent-empty p{margin:0}
body.dark .template-card,body.dark .recent-card,body.dark .doc-preview { background:#202b3a; border-color:#45566c; color:#eef4ff; }.start-gallery{background:color-mix(in srgb,var(--panel) 42%,transparent)}
@media(max-width:1050px){.idea-layout{grid-template-columns:minmax(0,1fr)}.idea-layout aside{border-left:0;border-top:1px solid var(--line);padding:16px 0;}.top .actions{flex-wrap:wrap;}}
@media(max-width:1050px){.start-gallery{margin:-20px}.gallery-inner{padding:28px 24px}.recent-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));}.template-card{width:155px;height:188px;}}
@media(max-width:1050px){dialog.account-popup{width:170px}}
.brand {
  gap: 8px;
  font-size: 17px;
  padding: 16px 12px;
}
.brand strong {
  flex: 1;
}
.brand button {
  padding: 6px;
  border: 0;
}
.mark {
  flex-shrink: 0;
}
.account {
  min-height: 66px;
  gap: 0;
  padding: 12px 8px;
}
.account button {
  white-space: nowrap;
  font-size: 12px;
  flex: 1;
  padding: 10px 5px;
  gap: 5px;
}
.account button + button {
  border-left: 1px solid var(--line);
  border-radius: 0;
}
.nav {
  scrollbar-width: thin;
}
.top h1 {
  font-size: 26px;
}
.brand .mark {
  background: url(app.png) center/cover;
  font-size: 0;
}
.nav button {
  min-height: 44px;
}
.authbox .mark {
  background: url(app.png) center/cover;
  font-size: 0;
  width: 48px;
  height: 48px;
}
.authbox .google-login { width:100%; margin-top:10px; justify-content:center; background:var(--panel); border-color:var(--line); color:var(--ink); }
.authbox .google-login svg { color:#4285f4; }
.feature-actions { display:flex; align-items:center; gap:7px; }
.feature-actions .icon-action { width:40px; height:40px; padding:0; display:grid; place-items:center; }
.feature-actions .icon-action:disabled { opacity:.35; cursor:not-allowed; }
.save-split { position:relative; }
.save-split > button { min-width:92px; }
.save-dropdown { position:absolute; z-index:20; right:0; top:calc(100% + 7px); width:176px; padding:6px; display:grid; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 28px #1723342b; }
.save-dropdown button { justify-content:flex-start; border:0; background:transparent; }
.save-dropdown button:hover { background:var(--panel); }
.toolbar button {
  width: 40px;
  height: 40px;
}
.table td:last-child button {
  border: 0;
  background: transparent;
}
.table td:last-child {
  width: 45px;
}
.table .filename[data-open-double] { cursor: default; user-select: none; }
body { letter-spacing:0; }
body.dark { color-scheme:dark; --sel:#273d39; --green:#69c8ab; }
.sidebar { background:var(--panel); }
.nav button.active { color:var(--green); box-shadow:inset 3px 0 var(--green); }
.nav button:hover { background:var(--sel); }
button:focus-visible,select:focus-visible { outline:2px solid #78a9f4; outline-offset:3px; }
.top { position:sticky; top:0; z-index:35; background:var(--bg); padding:20px 28px; }
.top h1 { font-size:23px; }
.top > div,.actions { min-width:0; }
.icon-action { width:40px;height:40px;padding:0;flex-shrink:0; }
.content { padding:24px 28px; }
.start-gallery { margin:-24px -28px; min-height:0; background:transparent; }
.gallery-inner { max-width:1280px; padding:28px; }
.template-row { gap:12px; padding-bottom:28px; }
.template-card { width:176px;height:166px; box-shadow:none; }
.template-symbol svg { width:36px;height:36px; }
.template-card:hover,.recent-card:hover { transform:none; box-shadow:none; }
body.dark .template-card,body.dark .recent-card,body.dark .doc-preview { background:var(--panel);border-color:var(--line);color:var(--ink); }
.recent-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px; }
.card-open { display:flex;align-items:stretch; }
.doc-preview { width:100%;height:142px;min-height:142px; }
.recent-card strong,.recent-card small { display:block;max-width:100%; }
.recent-heading { gap:12px;flex-wrap:wrap; }
.recent-heading h2 { flex:1; }
#recent-sort { font-size:12px;padding:8px; }
.sidebar.collapsed .nav,.sidebar.collapsed .account { display:flex;flex-direction:column; }
.sidebar.collapsed .nav { padding:0 8px; }
.sidebar.collapsed .nav button { justify-content:center;padding:12px 0; }
.sidebar.collapsed .nav button span,.sidebar.collapsed .nav label,.sidebar.collapsed .account button span { display:none; }
.sidebar.collapsed .account button { flex:none;border:0; }
.sidebar.collapsed .account { flex-shrink:0; }
.auth { padding:24px 16px; }
.authbox { width:min(410px,100%); }
.search-dialog { width:580px; }
#search-results { max-height:50vh;overflow:auto; }
#search-results button { text-align:left;overflow-wrap:anywhere; }
#search-results small { margin-left:12px; }
.table { table-layout:fixed; }
.table th:first-child { width:50%; }
.filename span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#toast { max-width:calc(100vw - 32px);width:max-content;overflow-wrap:anywhere; }
@media(max-width:680px) {
  .sidebar:not(.collapsed) { width:154px; }
  .sidebar .brand strong { font-size:12px; }
  .sidebar .nav { padding:0 6px; }
  .sidebar .nav button { font-size:12px;padding:10px 6px;gap:6px; }
  .sidebar.collapsed { width:52px; }
  .collapsed .brand { padding:8px; }
  .top { position:relative;align-items:flex-start;flex-direction:column;padding:16px; }
  .top h1 { font-size:21px; }
  .content { padding:16px; }
  .start-gallery { margin:-16px; }
  .gallery-inner { padding:20px 16px; }
  .template-row { flex-wrap:wrap; }
  .template-card { width:100%;height:130px; }
  .recent-grid { grid-template-columns:minmax(0,1fr); }
  .table th:first-child { width:auto; }
  .table th:nth-child(2),.table td:nth-child(2),.table th:nth-child(3),.table td:nth-child(3) { display:none; }
  .table td { padding:12px 4px; }
  .clock { font-size:40px; }
  .task { flex-wrap:wrap; }
  .account { flex-direction:column; }
  .account button+button { border-left:0; }
}
@media (max-width: 1050px) {
  .brand strong {
    font-size: 13px;
  }
  .brand .mark {
    width: 25px;
    height: 28px;
  }
  .brand {
    gap: 5px;
    padding: 12px 8px;
  }
  .brand button svg {
    width: 16px;
  }
  .account svg {
    width: 16px;
  }
  .top .actions input {
    width: 155px;
  }
  .feature-actions { gap:4px; }
  .feature-actions .icon-action { width:34px; height:34px; }
}