/* Estrutura: cabeçalho, área de trabalho (menu + conteúdo) e mesa do documento. */
.app{height:100%;display:flex;flex-direction:column;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));gap:10px;padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.brand{font-family:var(--ff-display);font-weight:700;font-size:21px;letter-spacing:-.01em;margin-right:auto;display:flex;align-items:baseline;gap:10px;min-width:0}
.brand small{font-family:var(--ff-body);font-weight:500;font-size:12.5px;color:var(--muted);letter-spacing:0}
.workspace{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;position:relative}
.content{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);gap:12px}
.scroller{scrollbar-gutter:stable;min-height:0;height:100%;overflow:auto;background:var(--canvas);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;position:relative}
.scroller.drop{outline:3px dashed var(--accent);outline-offset:-8px}
.empty{margin:auto;text-align:center;max-width:380px;color:var(--muted);padding:40px 0}
.empty h2{font-family:var(--ff-display);color:var(--ink);margin:0 0 6px;font-size:22px}
.toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:var(--shadow);z-index:80;max-width:calc(100% - 32px)}
.hint{font-size:13px;color:var(--muted);min-height:48px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}