.fm{display:grid;grid-template-columns:250px 1fr;gap:20px;align-items:start}
.fm-side{background:#fff;border:1px solid var(--div);border-radius:16px;padding:16px}
.fm-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.fm-nav a{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border-radius:9px;font-size:14px;color:var(--text);text-decoration:none}
.fm-nav a:hover{background:var(--g100);color:var(--g800)}
.fm-nav a.on{background:var(--g600);color:#fff}
.fm-nav a span{font-size:12px;opacity:.75}
.fm-main{background:#fff;border:1px solid var(--div);border-radius:16px}
.fm-head{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--div)}
.fm-head h2{margin:0;font-size:20px;flex:1}
.fm-empty{padding:56px 20px;text-align:center;color:var(--n600)}
.fm-empty b{display:block;font-family:var(--fh);font-weight:400;font-size:20px;color:var(--n700);margin-bottom:6px}

/* ---------------------------------------------------------- storage quota */
.dk-quota{border-top:1px solid var(--div);padding-top:14px;font-size:12.5px;color:var(--n600);line-height:1.5}
.dk-quota strong{display:block;font-size:14px;color:var(--text);font-weight:600}
.dk-quota i{display:block;height:6px;border-radius:99px;background:var(--n300);margin:8px 0 6px;overflow:hidden}
.dk-quota i b{display:block;height:100%;background:var(--g600);border-radius:99px}
.dk-quota.warn i b{background:#d98324}
.dk-quota a{display:block;margin-top:9px;padding:8px 10px;border-radius:9px;background:var(--a100);border:1px solid var(--a300);
  color:var(--a900);font-size:12.5px;font-weight:600;text-decoration:none;line-height:1.45}
.dk-quota a:hover{background:var(--a200)}

/* ----------------------------------------------------------- email intake */
.dk-intake{margin-top:14px;border:1px solid var(--a300);background:var(--a100);border-radius:12px;padding:0}
.dk-intake summary{cursor:pointer;padding:11px 13px;font-family:var(--fh);font-size:15px;color:var(--a900);list-style:none}
.dk-intake summary::-webkit-details-marker{display:none}
.dk-intake summary::after{content:"+";float:right;font-family:var(--fb);font-weight:700;color:var(--a600)}
.dk-intake[open] summary::after{content:"\2212"}
.dk-intake>p{margin:0 13px 10px;font-size:12.5px;color:var(--a800);line-height:1.5}
.dk-addr{display:flex;align-items:center;gap:6px;margin:0 13px;background:#fff;border:1px solid var(--a300);border-radius:9px;padding:7px 8px}
.dk-addr code{flex:1;min-width:0;font:600 12px ui-monospace,Menlo,monospace;color:var(--a800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-copy,.dk-rotate{border:1px solid var(--a300);background:#fff;color:var(--a800);border-radius:99px;padding:4px 11px;font:700 11.5px var(--fb);cursor:pointer}
.dk-copy:hover,.dk-rotate:hover{background:var(--a200)}
.dk-senders{margin:12px 13px 0;font-size:12.5px}
.dk-senders b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--a700);margin-bottom:5px}
.dk-senders>div{display:flex;align-items:center;gap:6px;padding:4px 0;border-top:1px solid var(--a200)}
.dk-senders>div span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--a900)}
.dk-senders>div em{font-style:normal;font-size:11px;color:var(--a600)}
.dk-senders form{display:contents}
.dk-senders button{border:0;background:none;color:var(--a700);font-size:11.5px;font-weight:700;cursor:pointer;text-decoration:underline}
.dk-add{display:flex!important;gap:6px;margin-top:8px}
.dk-add input{flex:1;min-width:0;border:1px solid var(--a300);border-radius:8px;padding:6px 9px;font-size:12.5px;font-family:var(--fb)}
.dk-fine{margin:8px 0 0;font-size:11.5px;color:var(--a700);line-height:1.45}
.dk-intake>form:last-child{margin:12px 13px 13px}

/* ------------------------------------------------------------ filter bar */
.dk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--div)}
.dk-search{flex:1 1 260px;min-width:230px;display:flex;align-items:center;gap:8px;background:var(--n100);
  border:1px solid var(--n400);border-radius:99px;padding:0 6px 0 13px;color:var(--n600)}
.dk-search input{flex:1;min-width:0;border:0;background:none;padding:9px 0;font-size:14px;font-family:var(--fb);color:var(--text);outline:none}
.dk-case{flex:0 0 auto;border:1px solid var(--n400);background:#fff;border-radius:99px;padding:4px 10px;
  font-size:11.5px;font-weight:700;color:var(--n700);cursor:pointer;user-select:none}
.dk-case input{position:absolute;opacity:0;width:0;height:0}
.dk-case.on{background:var(--g600);border-color:var(--g600);color:#fff}
.dk-drop{position:relative;border:0;padding:0;margin:0;background:none;flex:0 0 auto}
.dk-drop summary{list-style:none;cursor:pointer;border:1px solid var(--n400);background:#fff;border-radius:99px;
  padding:7px 13px;font:600 13px var(--fb);color:var(--text);white-space:nowrap}
.dk-drop summary::-webkit-details-marker{display:none}
.dk-drop summary::after{content:" \25be";opacity:.55}
.dk-drop[open] summary{border-color:var(--g600);background:var(--g100);color:var(--g800)}
.dk-drop>div{position:absolute;top:calc(100% + 6px);left:0;z-index:25;background:#fff;border:1px solid var(--div);
  border-radius:12px;box-shadow:var(--lg);padding:7px;min-width:190px;display:flex;flex-direction:column;gap:2px}
.dk-drop label{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13.5px;cursor:pointer;white-space:nowrap}
.dk-drop label:hover{background:var(--g100)}
.dk-drop input{width:auto;margin:0}
.dk-clear{font-size:12.5px;font-weight:600;color:var(--n600);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------- the list */
.dk-head,.dk-row{display:grid;grid-template-columns:30px minmax(200px,1fr) 96px 132px;gap:12px;align-items:center;padding:0 18px}
.dk-head{height:34px;background:var(--n100);border-bottom:1px solid var(--div);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--n700)}
.dk-head span:last-child{text-align:right}
.dk-row{padding-top:11px;padding-bottom:11px;border-bottom:1px solid var(--div);align-items:start}
.dk-row.wait{background:#fbfdfd}
.dk-row.bad{background:#fffaf9}
.dk-tick{display:grid;place-items:center;height:26px;opacity:0}
.dk-tick input{width:16px;height:16px;margin:0;cursor:pointer}
.dk-row:hover .dk-tick,.dk-list.picking .dk-tick,.dk-tick:focus-within{opacity:1}
.dk-name{min-width:0;display:flex;flex-direction:column;gap:3px}
.dk-t{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dk-t svg{flex:0 0 auto}
.dk-title{border:0;background:none;padding:0;font:600 14.5px var(--fb);color:var(--text);cursor:pointer;text-align:left;overflow-wrap:anywhere}
.dk-title:hover{color:var(--g700);text-decoration:underline;text-underline-offset:3px}
.dk-sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--n600)}
.dk-tag{background:var(--n200);border-radius:99px;padding:1px 9px;font-size:11.5px;font-weight:600;color:var(--n700);text-decoration:none}
.dk-tag:hover{background:var(--g100);color:var(--g800)}
.dk-when{font-size:12.5px;color:var(--n600);padding-top:3px}
.dk-acts{display:flex;align-items:center;justify-content:flex-end;gap:4px;position:relative}
.dk-ico{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;border:1px solid var(--div);
  background:#fff;border-radius:50%;color:var(--n700);cursor:pointer;text-decoration:none}
.dk-ico:hover{background:var(--g100);border-color:var(--g300);color:var(--g800)}
.dk-ico.share:hover{background:var(--a100);border-color:var(--a300);color:var(--a800)}
.dk-ico.danger{color:#a03227}
.dk-ico.danger:hover{background:#fdecea;border-color:#e6b4ae}
.dk-open{display:flex;align-items:center;gap:2px;position:relative}
.dk-caret{width:20px;font-size:11px}
.dk-hold{font-size:11.5px;color:var(--n500)}
.dk-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:26;width:240px;background:#fff;border:1px solid var(--div);
  border-radius:12px;box-shadow:var(--lg);padding:7px;text-align:left}
.dk-menu[hidden]{display:none}
.dk-menu b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);padding:5px 9px 3px}
.dk-menu a{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;text-decoration:none}
.dk-menu a:hover{background:var(--g100)}
.dk-menu i{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:var(--g100);color:var(--g800);
  display:grid;place-items:center;font:400 12px var(--fh);font-style:normal}
.dk-menu span{font-size:13.5px;font-weight:600;color:var(--text)}
.dk-menu em{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--n600)}
.dk-selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;background:var(--g100);border-bottom:1px solid var(--g300)}
.dk-selbar[hidden]{display:none}
.dk-all{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--g900);cursor:pointer}
.dk-all input{width:16px;height:16px;margin:0}
.dk-selbar span{flex:1;font-size:12.5px;color:var(--g800)}
.dk-cancel{border:0;background:none;color:var(--n700);font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline}
.btn.btn-danger{border-color:#e6b4ae;color:#a03227;background:#fff}
.btn.btn-danger:hover{background:#fdecea}
.dk-foot{margin:0;padding:12px 18px;border-top:1px solid var(--div);font-size:12.5px;color:var(--n600)}

@media (max-width:900px){
  .fm{grid-template-columns:1fr}
  .dk-head,.dk-row{grid-template-columns:26px minmax(0,1fr) 118px}
  .dk-head span:nth-child(3),.dk-when{display:none}
  .dk-tick{opacity:1}
}