:root{
    --ink:#1D201C; --body:#43473F; --muted:#75786F;
    --accent:#1E6B34; --accent-dark:#145226;
    --bg:#FBFAF6; --panel:#F4F2EC; --line:#D9D6CB;
    --danger:#A42727; --ok:#2E7D46;
    --topbar-h:52px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
    font:15px/1.5 'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    color:var(--body); background:var(--bg);
    display:flex; flex-direction:column; height:100dvh; overflow:hidden;
}

/* ---------- barra superior ---------- */
.topbar{
    flex:0 0 auto; display:flex; align-items:center; gap:10px;
    padding:8px 14px; background:#fff; border-bottom:1px solid var(--line);
}
.tb1{display:flex; align-items:center; gap:10px}
.tb2{flex:1; min-width:0; display:flex; align-items:center; gap:8px}
.brand{
    font-weight:700; letter-spacing:.02em; color:var(--ink);
    text-decoration:none; font-size:1.02rem; white-space:nowrap;
    display:inline-flex; align-items:center; gap:8px;
}
.brandmark{height:26px; width:auto; display:block}
.pname{
    flex:1; min-width:0; border:1px solid transparent; border-radius:8px;
    padding:6px 8px; font:inherit; color:var(--ink); background:transparent;
}
.pname:hover{border-color:var(--line)}
.pname:focus{border-color:#AFAC9F; outline:none; background:#fff}
.quicksave{
    border:1px solid var(--line); background:#fff; color:var(--ink);
    border-radius:8px; font:inherit; font-size:.82rem; padding:6px 10px;
    cursor:pointer; white-space:nowrap;
}
.quicksave:hover{border-color:#AFAC9F; background:#FCFBF8}
.savestate{color:var(--ok); font-size:.8rem}
.savestate.dirty{color:var(--muted)}
.paneltoggle{
    display:none; border:1px solid var(--line); background:#fff; color:var(--ink);
    border-radius:8px; font-size:1.1rem; padding:6px 12px; cursor:pointer;
}

/* ---------- disposição ---------- */
.wrap{flex:1; display:flex; min-height:0}
.panel{
    width:320px; flex:0 0 auto; background:var(--panel);
    border-right:1px solid var(--line);
    display:flex; flex-direction:column; overflow-y:auto;
}
#map{flex:1; min-width:0}

/* ---------- separadores ---------- */
.tabs{display:flex; flex:0 0 auto; border-bottom:1px solid var(--line); background:#fff}
.tab{
    flex:1; border:none; background:none; padding:10px 4px; cursor:pointer;
    font:inherit; font-size:.88rem; color:var(--muted);
    border-bottom:2px solid transparent;
}
.tab.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.tabpane{display:none; padding:14px 14px 18px; flex-direction:column; gap:8px}
.tabpane.active{display:flex}

/* ---------- controlos ---------- */
.btn{
    display:block; width:100%; padding:9px 12px; border-radius:9px;
    font:inherit; font-size:.9rem; cursor:pointer; text-align:center;
    border:1px solid transparent; min-height:38px;
}
.btn.pri{background:var(--accent); color:#fff; font-weight:600}
.btn.pri:hover{background:var(--accent-dark)}
.btn.sec{background:#fff; color:var(--ink); border-color:var(--line)}
.btn.sec:hover{border-color:#AFAC9F; background:#FCFBF8}
.btn.danger{background:#fff; color:var(--danger); border-color:var(--line)}
.btn.danger:hover{border-color:var(--danger)}
#divideBtn{background:var(--danger)}
#divideBtn:hover{background:#8A1F1F}
.filebtn{display:flex; align-items:center; justify-content:center}
.row{display:flex; gap:8px}
.row .btn{width:auto; flex:0 0 auto; padding:12px}
.row input{flex:1; min-width:0}
input[type=search],input[type=number],input[type=text]{
    padding:8px 10px; border:1px solid var(--line); border-radius:9px;
    font:inherit; background:#fff; color:var(--ink); width:100%; min-height:38px;
}
input:focus{outline:none; border-color:var(--accent)}
.fieldlabel{font-size:.82rem; color:var(--muted); margin-bottom:-4px}
.hint{font-size:.8rem; color:var(--muted); margin:2px 0 0}
.group{border-top:1px solid var(--line); padding-top:10px; margin-top:6px;
       display:flex; flex-direction:column; gap:8px}
.grouptitle{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
            color:var(--muted)}

/* chips de forma */
.chips{display:flex; gap:6px}
.chip{
    flex:1; padding:7px 4px; border:1px solid var(--line); border-radius:9px;
    background:#fff; color:var(--body); font:inherit; font-size:.8rem;
    cursor:pointer; min-height:34px;
}
.chip.active{border-color:var(--accent); color:var(--accent); font-weight:600;
             background:#EAF3EC}

/* lista de projetos */
.projectlist{display:flex; flex-direction:column; gap:6px}
.projectrow{
    display:flex; align-items:center; gap:8px; background:#fff;
    border:1px solid var(--line); border-radius:10px; padding:8px 10px;
}
.projectrow .pinfo{flex:1; min-width:0; cursor:pointer}
.projectrow .pinfo b{display:block; color:var(--ink); font-size:.9rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.projectrow .pinfo span{font-size:.75rem; color:var(--muted)}
.projectrow .pdel{border:none; background:none; color:var(--muted);
    font-size:1rem; cursor:pointer; padding:4px}
.projectrow .pdel:hover{color:var(--danger)}

.panelfoot{margin-top:auto; padding-top:16px; font-size:.75rem; color:var(--muted)}
.panelfoot a{color:var(--accent)}

/* ---------- rodapé ---------- */
.botbar{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:6px 14px; background:#fff; border-top:1px solid var(--line);
    font-size:.75rem; color:var(--muted);
}
.netstate{background:#FDF3E7;color:#8A5A12;border-radius:999px;padding:3px 10px;
          white-space:nowrap;font-size:.72rem}
.tilestate{white-space:nowrap;font-size:.72rem;color:var(--muted)}
#installBtn{color:var(--accent);border-color:var(--accent)}
.botbar .pw{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.langs{display:flex; gap:4px; flex:0 0 auto}
.langbtn{
    border:1px solid var(--line); background:#fff; color:var(--muted);
    border-radius:7px; font:inherit; font-size:.72rem; font-weight:600;
    padding:4px 8px; cursor:pointer; letter-spacing:.04em;
}
.langbtn.active{border-color:var(--accent); color:var(--accent); background:#EAF3EC}

/* mensagem de lista vazia por língua */
.projectlist:empty::after{font-size:.8rem; color:var(--muted); content:"No saved projects yet."}
html[lang=pt] .projectlist:empty::after{content:"Ainda sem projetos guardados."}
html[lang=es] .projectlist:empty::after{content:"Aún no hay proyectos guardados."}
html[lang=fr] .projectlist:empty::after{content:"Aucun projet enregistré pour l'instant."}

/* ---------- toast ---------- */
.toast{
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(80px);
    background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px;
    font-size:.9rem; max-width:min(92vw,480px); text-align:center;
    transition:transform .25s ease, opacity .25s ease; opacity:0; z-index:2000;
    pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}

/* ---------- telemóvel ---------- */
@media (max-width:600px){ .tilestate{display:none} }
@media (max-width:767px){
    .paneltoggle{display:block}
    .btn{min-height:44px}
    input[type=search],input[type=number],input[type=text]{min-height:44px}
    .chip{min-height:42px}
    .wrap{position:relative}
    .panel{
        position:absolute; z-index:1500; left:0; right:0; bottom:0; top:auto;
        width:100%; max-height:62dvh; border-right:none;
        border-top:1px solid var(--line); border-radius:16px 16px 0 0;
        box-shadow:0 -8px 30px rgba(0,0,0,.15);
        transform:translateY(105%); transition:transform .25s ease;
    }
    .panel.open{transform:translateY(0)}
    .brand{font-size:.95rem}
    .topbar{flex-wrap:wrap; row-gap:6px}
    .tb1{flex:1 1 100%; justify-content:space-between}
    .tb2{flex:1 1 100%}
}