:root{
  --bg: #f6f7fb;
  --card: #ffffff;

  --text: #0f172a;
  --muted: #64748b;

  --border: #e5e7eb;

  /* Palette fissa */
  --primary: #0ea5e9;
  --primary-600: #0284c7;

  --secondary: #334155;
  --secondary-700: #1f2937;

  --success: #16a34a;
  --success-700: #15803d;

  --danger: #ef4444;
  --danger-700: #dc2626;

  --warning: #f59e0b;
  --warning-700: #d97706;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{
  font-weight:800;
  letter-spacing:.3px;
  color: var(--primary);
}

.user{
  color: var(--muted);
  font-size:14px;
}

.user a{
  color: var(--primary);
  text-decoration:none;
}

/* Layout */
.wrap{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px;
}

.section{
  margin:18px 0 10px;
  color:#334155;
  font-weight:700;
  font-size:14px;
  text-transform: uppercase;
  letter-spacing:.05em;
}

/* Cards */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin:14px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* Toolbar */
.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.search{ flex:1; position:relative; min-width:260px; }
.search input{
  width:100%;
  padding:10px 12px 10px 34px;
  border:1px solid var(--border);
  border-radius:10px;
  font:inherit;
}
.search svg{
  position:absolute;
  left:10px;
  top:50%;
  transform: translateY(-50%);
  color: var(--muted);
}

/* Grid / Tiles */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}
.tile{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  transition: transform .06s ease, box-shadow .06s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  position:relative;
}
.tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.tile .icon{ color: var(--primary); flex: 0 0 auto; }
.tile h3{ margin:0 0 6px; font-size:18px; }
.tile p{ margin:0; color: var(--muted); font-size:14px; }
.tile a.stretched{
  position:absolute;
  inset:0;
  border-radius:16px;
  text-indent:-9999px;
}
.tile .badge{
  position:absolute;
  top:10px;
  right:10px;
  font-size:11px;
  background:#f1f5f9;
  color:#334155;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
}

/* Forms */
.form-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.form-grid label{ display:block; font-size:14px; color:#334155; }
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font:inherit;
  background:#fff;
}
.form-grid .full{ grid-column: 1 / -1; }

/* Tables */
.table-wrap{ overflow:auto; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; }
th{ color:#334155; font-weight:700; }

/* Notices */
.notice{
  background:#f1f5f9;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:10px;
  margin:12px 0;
}
.muted{ color: var(--muted); }

/* Buttons (colorati, fissi) */
.btn-group{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  font: inherit;
  line-height:1;
  user-select:none;
  transition: transform .04s ease, filter .06s ease;
}

.btn:active{ transform: translateY(1px); }

/* Varianti */
.btn.primary{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
}
.btn.primary:hover{ background: var(--primary-600); border-color: var(--primary-600); }

.btn.secondary{
  background:#fff;
  border-color: var(--border);
  color: var(--secondary);
}
.btn.secondary:hover{ filter: brightness(0.98); }

.btn.success{
  background: var(--success);
  border-color: var(--success);
  color:#fff;
}
.btn.success:hover{ background: var(--success-700); border-color: var(--success-700); }

.btn.danger{
  background: var(--danger);
  border-color: var(--danger);
  color:#fff;
}
.btn.danger:hover{ background: var(--danger-700); border-color: var(--danger-700); }

.btn.warning{
  background: var(--warning);
  border-color: var(--warning);
  color:#111827;
}
.btn.warning:hover{ background: var(--warning-700); border-color: var(--warning-700); color:#fff; }

/* Piccolo */
.btn.sm{ padding:8px 10px; border-radius:10px; font-size:14px; }

/* Link-like */
.btn.link{
  background:transparent;
  border-color:transparent;
  color: var(--primary);
  padding:8px 0;
}