:root{
  --bg:#f6f1e9; --panel:#ffffff; --panel2:#efe6d8; --border:#e2d5c0;
  --text:#332c22; --muted:#8a7f6d; --accent:#b5652f; --accent2:#b5657a;
  --accent3:#6a9b5e; --danger:#c1483f;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family: Segoe UI, Arial, sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; align-items:center; justify-content:center;
}
body.app{display:block;}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:28px; width:380px; max-width:92vw;
}
.card h1{font-size:20px; margin:0 0 4px 0; display:flex; align-items:center; gap:8px;}
.card .sub{color:var(--muted); font-size:13px; margin-bottom:20px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px;}
input[type=text], input[type=email], input[type=password]{
  width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:9px 10px; font-size:14px; font-family:inherit;
}
button{
  background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:10px 14px; font-size:14px; cursor:pointer; width:100%; font-weight:600;
}
button:hover{background:#9c5527;}
button.secondary{background:var(--panel2); border:1px solid var(--border); color:var(--text); font-weight:400;}
button.secondary:hover{background:#e6dac5;}
button.danger{background:var(--danger);}
.msg{font-size:13px; padding:9px 10px; border-radius:6px; margin-bottom:14px;}
.msg.error{background:rgba(193,72,63,.12); color:#96352c; border:1px solid rgba(193,72,63,.35);}
.msg.ok{background:rgba(106,155,94,.15); color:#3f6636; border:1px solid rgba(106,155,94,.4);}
.tabs{display:flex; gap:6px; margin-bottom:18px;}
.tabs button{background:var(--panel2); border:1px solid var(--border); font-weight:600;}
.tabs button.active{background:var(--accent); border-color:var(--accent);}
.links{text-align:center; margin-top:14px; font-size:13px; color:var(--muted);}
.links a{color:var(--accent); text-decoration:none;}
.links a:hover{text-decoration:underline;}
.hidden{display:none !important;}

header.topbar{
  background:var(--panel); border-bottom:1px solid var(--border);
  padding:10px 18px; display:flex; align-items:center; gap:14px;
}
header.topbar h1{font-size:16px; margin:0; flex:1;}
header.topbar .who{font-size:13px; color:var(--muted);}
header.topbar button{width:auto; padding:7px 12px;}
main.wrap{max-width:760px; margin:0 auto; padding:24px 18px;}

table{width:100%; border-collapse:collapse; margin-top:10px;}
th, td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--border); font-size:13px;}
th{color:var(--muted); font-weight:600; font-size:12px;}
.pill{display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; background:var(--panel2); border:1px solid var(--border);}
.invite-box{background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:14px; margin-bottom:20px;}
.invite-box code{font-size:16px; letter-spacing:1px; color:var(--accent);}

/* ===================== App shell: boczne menu + gorny pasek =====================
   Wspolny uklad dla dashboard.html, wkrotce.html i (jako wzorzec) tree.html.
   tree.html ma wlasny, w pelni samodzielny <style> (nie linkuje tego pliku),
   wiec te same klasy sa tam zduplikowane recznie - to swiadomy kompromis,
   zeby nie rozbijac dzialajacego, samodzielnego pliku tree.html. */
.shell{display:flex; min-height:100vh; align-items:stretch; justify-content:flex-start;}
.sidebar{
  width:230px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--border);
  padding:18px 12px; display:flex; flex-direction:column; gap:4px;
}
.sidebar .brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; padding:4px 8px 18px;}
.sidebar-section{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:14px 8px 6px;}
.sidebar a, .sidebar button.navlink{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; text-decoration:none;
  color:var(--text); font-size:13.5px; background:transparent; border:none; width:100%; text-align:left;
  font-weight:400; cursor:pointer;
}
.sidebar a:hover, .sidebar button.navlink:hover{background:var(--panel2);}
.sidebar a.active{background:var(--accent); color:#fff; font-weight:600;}
.main2{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar2{
  background:var(--panel); border-bottom:1px solid var(--border); padding:12px 24px;
  display:flex; align-items:center; gap:14px;
}
.topbar2 .spacer{flex:1;}
.topbar2 .bell{font-size:18px; background:transparent; border:none; width:auto; cursor:pointer; color:var(--muted); padding:6px;}
.content2{padding:28px; max-width:1100px; width:100%; margin:0 auto;}
.content2 h1{font-size:22px; margin:0 0 4px;}
.content2 .sub2{color:var(--muted); font-size:14px; margin-bottom:24px;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin-bottom:28px;}
.stat-tile{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; text-align:center;}
.stat-tile .num{font-size:28px; font-weight:700; color:var(--accent);}
.stat-tile .label{font-size:13px; color:var(--muted); margin-top:2px;}

.dash-card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px; margin-bottom:20px;}
.dash-card h2{margin:0 0 14px; font-size:15px; display:flex; align-items:center; gap:8px;}

.coming-soon{text-align:center; padding:60px 20px; color:var(--muted);}
.coming-soon .icon{font-size:44px; margin-bottom:12px;}
.coming-soon h1{color:var(--text); font-size:20px; margin:0 0 8px;}
.coming-soon .hint{margin-top:16px; font-size:13px; background:var(--panel2); display:inline-block; padding:10px 16px; border-radius:8px;}