.cact-share   { display: none; }
.new-folder-btn { display: none; }
.new-folder-form { display: none; }
.shortcuts-panel { display: none; }
.folders-sec  { display: none; }
.folder-compose { display: none; }

@media (max-width:679px) {

  .new-folder-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; border: none; border-bottom: 1px solid var(--bd);
    padding: 7px 16px;
    font-family: var(--mono); font-size: 0;
    color: var(--dim); background: none; cursor: pointer;
    transition: color .15s;
  }
  .new-folder-btn::before { content: 'cartelle'; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
  .new-folder-btn::after  { content: '[+]'; font-size: 10px; }
  .new-folder-btn:active { color: var(--text); }


  .new-folder-form {
    display: none; align-items: center;
    border-bottom: 1px solid var(--bd);
  }
  .new-folder-form.open { display: flex; }
  .nfinp {
    flex: 1; background: none; border: none; outline: none;
    font-family: var(--mono); font-size: 12px; color: var(--text);
    padding: 9px 0 9px 16px;
  }
  .nfinp::placeholder { color: var(--dim); }
  .nfok {
    background: none; border: none; font-family: var(--mono); font-size: 11px;
    color: var(--accent); cursor: pointer; padding: 9px 14px;
  }
  .nfcancel {
    background: none; border: none; font-family: var(--mono); font-size: 11px;
    color: var(--dim); cursor: pointer; padding: 9px 12px 9px 0;
  }


  .folders-sec.has-folders {
    display: block !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-bottom: 1px solid var(--bd);
    padding: 6px 12px;
  }
  .folders-sec.has-folders::-webkit-scrollbar { display: none; }
  .folder-hdr { display: none; }
  #folders-list { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-wrap: nowrap; min-width: max-content; }

  .folder-item {
    display: inline-flex !important; align-items: center;
    flex-shrink: 0; white-space: nowrap;
    touch-action: pan-x;
    padding: 4px 12px !important;
    border-radius: 20px; border: 1px solid var(--bd2) !important; border-left: 1px solid var(--bd2) !important;
    font-size: 11px; color: var(--muted);
    background: none; font-family: var(--mono); cursor: pointer;
    -webkit-appearance: none; width: auto !important;
    transition: background .12s, color .12s;
  }
  .folder-item.on {
    background: var(--text) !important; color: var(--bg) !important;
    border-color: var(--text) !important;
    padding-left: 12px !important;
  }
  .folder-del { display: none !important; }
  .folder-clr { display: none !important; }


  #v-folder .folder-compose {
    display: block;
    border-bottom: 1px solid var(--bd); margin-bottom: 12px;
  }
  .fc-title {
    display: block; width: 100%; background: none; border: none; outline: none;
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    color: var(--text); padding: 14px 16px 6px; letter-spacing: -.01em;
  }
  .fc-title::placeholder { color: var(--dim); font-weight: 400; }
  .fc-body {
    display: block; width: 100%; background: none; border: none; outline: none;
    font-family: var(--mono); font-size: 12px; color: var(--text);
    padding: 4px 16px 10px; resize: none; min-height: 60px; line-height: 1.6;
  }
  .fc-body::placeholder { color: var(--dim); }
  .fc-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px 8px 16px; border-top: 1px solid var(--bd);
  }
  .fc-hint { font-size: 9px; color: var(--dim); }
  .fc-save {
    background: none; border: 1px solid var(--bd2); border-radius: 3px;
    font-family: var(--mono); font-size: 10px; color: var(--text);
    padding: 4px 10px; cursor: pointer;
  }
}

@media (min-width:680px) {
  body {
    background: var(--bg);
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }


  .app {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    overflow: hidden;
    background: var(--bg);
    box-shadow: none;
    display: grid;
    grid-template-columns: 260px 1fr;

    grid-template-rows: auto auto auto auto 1fr auto auto;
  }


  .vhead {
    grid-column: 1; grid-row: 1;
    padding: 26px 20px 18px;
    border-bottom: none;
    border-right: 1px solid var(--bd);
    background: var(--s1);
  }
  .vbig { font-size: 18px; }

  .sbar {
    grid-column: 1; grid-row: 2;
    border-bottom: none;
    border-right: 1px solid var(--bd);
    background: var(--s1);
  }
  .sinp { padding: 10px 20px; font-size: 12px; }

  .tabs {
    grid-column: 1; grid-row: 3;
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid var(--bd);
    background: var(--s1);
  }
  .tab {
    flex: none; text-align: left;
    padding: 13px 16px 13px 24px;
    border-bottom: 1px solid var(--bd);
    border-left: 2px solid transparent;
    font-size: 12px;
    display: flex; justify-content: space-between; align-items: center;
    transition: background .12s, color .15s, border-color .15s;
  }
  .tab.on { background: var(--s2); color: var(--text); border-left-color: var(--text); padding-left: 22px; }
  .tab.on::after { display: none; }
  .tab:hover:not(.on) { background: rgba(255,255,255,.04); color: var(--text); }
  .tab-cnt { color: var(--dim); font-size: 10px; }


  .new-folder-btn {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    grid-column: 1; grid-row: 4;
    border-right: 1px solid var(--bd);
    border-top: 1px solid var(--bd);
    border-bottom: none; border-left: none;
    padding: 12px 16px 12px 24px;
    font-family: inherit; font-size: 11px;
    color: var(--dim); background: var(--s1);
    text-align: left; cursor: pointer;
    transition: color .15s, background .12s;
  }
  .new-folder-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
  .new-folder-form {
    display: none;
    grid-column: 1; grid-row: 4;
    border-right: 1px solid var(--bd);
    border-top: 1px solid var(--bd);
    border-bottom: none;
  }
  .new-folder-form.open { display: flex; }
  .nfinp {
    flex: 1; background: none; border: none; outline: none;
    font-family: inherit; font-size: 12px; color: var(--text);
    padding: 12px 0 12px 24px;
  }
  .nfinp::placeholder { color: var(--dim); }
  .nfok {
    background: none; border: none; font-family: inherit; font-size: 12px;
    color: var(--accent); cursor: pointer; padding: 12px 16px;
    transition: opacity .15s;
  }
  .nfok:hover { opacity: .7; }
  .nfcancel {
    background: none; border: none; font-family: inherit; font-size: 12px;
    color: var(--dim); cursor: pointer; padding: 12px 12px 12px 0;
    transition: color .15s;
  }
  .nfcancel:hover { color: var(--text); }


  .folders-sec {
    grid-column: 1; grid-row: 5;
    border-right: 1px solid var(--bd);
    overflow-y: auto;
    scrollbar-width: none;
    background: var(--s1);
  }
  .folders-sec::-webkit-scrollbar { display: none; }
  .folders-sec.has-folders { display: block; }
  .folder-hdr {
    padding: 10px 16px 10px 24px;
    font-size: 10px; color: var(--dim); letter-spacing: .08em;
    border-bottom: 1px solid var(--bd);
    text-transform: uppercase;
  }
  .folder-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 12px 24px;
    font-size: 12px; color: var(--muted);
    border: none;
    border-bottom: 1px solid var(--bd);
    border-left: 2px solid transparent;
    outline: none;
    transition: background .12s, color .15s, border-color .15s;
    background: none; width: 100%; text-align: left;
    font-family: inherit; cursor: pointer;
  }
  .folder-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
  .folder-item.on { background: var(--s2); color: var(--text); border-left-color: var(--accent); padding-left: 22px; }
  .folder-del {
    background: none; border: none; color: var(--dim); font-family: inherit;
    font-size: 11px; cursor: pointer; opacity: 0; padding: 2px 4px;
    transition: opacity .15s; flex-shrink: 0;
  }
  .folder-item:hover .folder-del { opacity: 1; }
  .folder-del:hover { color: var(--accent); }
  .folder-clr {
    background: none; border: none; font-family: inherit;
    font-size: 11px; cursor: pointer; opacity: 0; padding: 2px 4px;
    transition: opacity .15s; flex-shrink: 0;
  }
  .folder-item:hover .folder-clr { opacity: 1; }


  .shortcuts-panel {
    display: block;
    grid-column: 1; grid-row: 6;
    border-right: 1px solid var(--bd);
    border-top: 1px solid var(--bd);
    padding: 12px 16px 12px 24px;
    background: var(--s1);
  }
  .sc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
  .sc-row:last-child { margin-bottom: 0; }
  .sc-key { font-size: 10px; color: var(--accent); letter-spacing: .04em; }
  .sc-lbl { font-size: 10px; color: var(--dim); }


  .qcap {
    grid-column: 1; grid-row: 7;
    border-right: 1px solid var(--bd);
    border-bottom: none;
    border-top: 1px solid var(--bd);
    background: var(--s1);
  }
  .qinp { padding: 13px 20px; font-size: 12px; }
  .qadd { padding: 13px 16px; font-size: 14px; }


  .views {
    grid-column: 2; grid-row: 1 / -1;
    background: var(--bg);
  }
  .vscroll { padding: 40px 56px 100px; }
  .stack   { max-width: 740px; }

  .fab {
    position: absolute;
    bottom: 36px; right: 44px;
    font-size: 18px;
  }


  .vscroll { padding: 28px 28px 100px; }

  .stack   { max-width: 740px; }
  #prom-l, #idee-l {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 420px));
    gap: 14px;
    align-items: start;
  }
  #prom-l .empty, #idee-l .empty { grid-column: 1 / -1; }


  .card { cursor: default; }
  .card:hover { background: var(--s2); }
  .cact:hover { color: var(--text); }
  .hbt:hover  { color: var(--text); }
  .cact-share { display: inline !important; }


  ::-webkit-scrollbar       { width: 3px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }


  .cacts { opacity: 0; transition: opacity .15s; }
  .card:hover .cacts { opacity: 1; }
  .cmeta { padding: 6px 14px 7px; }
  .card { margin-bottom: 10px; }


  .folder-compose { display: block; }
  .folder-compose {
    background: var(--s1); border: 1px solid var(--bd);
    border-radius: var(--r); margin-bottom: 24px; overflow: hidden;
  }
  .fc-title {
    display: block; width: 100%; background: none; border: none; outline: none;
    font-family: var(--mono); font-size: 14px; font-weight: 600;
    color: var(--text); padding: 18px 20px 8px;
    letter-spacing: -.01em;
  }
  .fc-title::placeholder { color: var(--dim); font-weight: 400; }
  .fc-body {
    display: block; width: 100%; background: none; border: none; outline: none;
    font-family: var(--mono); font-size: 13px; color: var(--text);
    padding: 4px 20px 14px; resize: none; min-height: 80px; line-height: 1.6;
  }
  .fc-body::placeholder { color: var(--dim); }
  .fc-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px 10px 20px;
    border-top: 1px solid var(--bd);
  }
  .fc-hint { font-size: 10px; color: var(--dim); letter-spacing: .04em; }
  .fc-save {
    background: none; border: 1px solid var(--bd2); border-radius: 4px;
    font-family: var(--mono); font-size: 11px; color: var(--text);
    padding: 5px 14px; cursor: pointer; transition: background .12s;
  }
  .fc-save:hover { background: var(--s2); }
}

.vhead {
  padding:calc(var(--st) + 12px) 20px 10px;flex-shrink:0;
  display:flex;align-items:flex-start;justify-content:space-between;
  border-bottom:1px solid var(--bd);
}
.vbig  {font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.vbig .hl {color:var(--accent)}
.vname {color:var(--text);cursor:pointer;border-bottom:1px dashed var(--dim);padding-bottom:1px}
.vdate {font-size:9px;color:var(--muted);letter-spacing:.06em;margin-top:3px}

.hbts  {display:flex;gap:12px;margin-top:2px;align-items:center}

.hbt   {
  background:transparent;border:none;padding:0;
  cursor:pointer;font-size:10px;color:var(--muted);
  font-family:var(--mono);letter-spacing:.04em;
  -webkit-appearance:none;transition:color .15s;
  display:flex;align-items:center;
}
.hbt:active {color:var(--text)}

.hbt img.emoji {width:12px;height:12px;pointer-events:none;margin:0 1px}

.sbar {
  border-bottom:1px solid var(--bd);flex-shrink:0;
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.sbar.open {max-height:50px}
.sinp {
  display:block;width:100%;background:transparent;border:none;
  padding:9px 20px;color:var(--text);font-family:var(--mono);font-size:12px;
  outline:none;letter-spacing:.04em;
}
.sinp::placeholder {color:var(--dim);text-transform:uppercase;letter-spacing:.1em}

.tabs {display:flex;border-bottom:1px solid var(--bd);flex-shrink:0;background:var(--s1)}
.tab  {
  flex:1;padding:9px 0;font-size:10px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);background:none;border:none;
  cursor:pointer;font-family:var(--mono);position:relative;transition:color .15s;
  -webkit-appearance:none;
}
.tab.on {color:var(--text)}
.tab.on::after {
  content:'';position:absolute;bottom:0;left:25%;right:25%;
  height:1px;background:var(--text);border-radius:1px;
}
.tab-badge {font-size:7px;color:var(--muted);margin-left:3px}
.tab-cnt { color: var(--dim); font-size: 9px; }

.qcap {
  display:flex;align-items:center;
  border-bottom:1px solid var(--bd);flex-shrink:0;
}
.qinp {
  flex:1;background:transparent;border:none;outline:none;
  padding:9px 20px;color:var(--text);font-family:var(--mono);
  font-size:12px;letter-spacing:.02em;
}
.qinp::placeholder {color:var(--dim);letter-spacing:.06em}
.qadd {
  background:none;border:none;cursor:pointer;color:var(--muted);
  font-family:var(--mono);font-size:14px;padding:9px 18px;
  letter-spacing:.04em;transition:color .12s;-webkit-appearance:none;
}
.qadd:active {color:var(--text)}

.views {flex:1;overflow:hidden;position:relative}
.view  {
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;display:none;
}
.view.on  {display:block}

.vscroll  {padding:18px 16px calc(var(--sb) + 80px)}
.stack    {display:flex;flex-direction:column;gap:18px}
#folder-l {display:flex;flex-direction:column;gap:18px}

.fab {
  position:fixed;bottom:calc(var(--sb) + 52px);right:20px;z-index:60;
  background:transparent;border:none;padding:4px;
  font-size:20px;cursor:pointer;color:var(--muted);font-family:var(--mono);
  letter-spacing:.04em;transition:color .15s;-webkit-appearance:none;
}
.fab:active {color:var(--text)}