.tool-pano{
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #cbd5e1;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --danger: #b91c1c;
  --ok: #166534;
  --mono: #8ea9db;
  --tri: #f7c400;
}.tool-pano *{ box-sizing: border-box; }.tool-pano{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
}.tool-pano .topbar{
  background: linear-gradient(135deg, #0f172a, #164e63);
  color: white;
  padding: 18px 20px;
}.tool-pano .topbar h1{
  margin: 0 0 4px 0;
  font-size: clamp(22px, 4vw, 34px);
}.tool-pano .topbar p{
  margin: 0;
  color: #cbd5e1;
}.tool-pano .app-shell{
  display: grid;
  grid-template-columns: minmax(330px, 420px) 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 1600px;
  margin: 0 auto;
}.tool-pano .panel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  padding: 16px;
}.tool-pano h2{
  margin: 0 0 14px 0;
  font-size: 20px;
}.tool-pano .grid{
  display: grid;
  gap: 10px;
}.tool-pano .grid.two{
  grid-template-columns: 1fr 1fr;
}.tool-pano label{
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}.tool-pano input,.tool-pano select{
  width: 100%;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  background: white;
  color: var(--text);
}.tool-pano input:focus,.tool-pano select:focus{
  outline: 2px solid rgba(15, 118, 110, 0.25);
  border-color: var(--primary);
}.tool-pano details{
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}.tool-pano summary{
  cursor: pointer;
  font-weight: 800;
  color: var(--primary-dark);
  user-select: none;
}.tool-pano .advanced-grid{
  margin-top: 12px;
}.tool-pano .buttons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}.tool-pano button{
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--text);
  border-radius: 11px;
  padding: 11px 12px;
  font-weight: 800;
  cursor: pointer;
}.tool-pano button:hover{ filter: brightness(0.97); }.tool-pano button.primary{
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}.tool-pano .message{
  min-height: 22px;
  margin-top: 12px;
  font-weight: 700;
}.tool-pano .message.error{ color: var(--danger); }.tool-pano .message.ok{ color: var(--ok); }.tool-pano .output-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}.tool-pano .badge{
  background: #e2e8f0;
  color: #334155;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}.tool-pano .summary{
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}.tool-pano .summary .box{
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  background: #f8fafc;
}.tool-pano .summary .box b{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}.tool-pano .summary .box span{
  font-size: 15px;
  font-weight: 800;
}.tool-pano .canvas-wrap{
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}.tool-pano canvas{
  display: block;
  max-width: none;
  background: white;
}.tool-pano footer{
  text-align: center;
  color: var(--muted);
  padding: 18px;
  font-size: 13px;
}@media (max-width: 900px){.tool-pano .app-shell{
    grid-template-columns: 1fr;
    padding: 10px;
  }.tool-pano .grid.two{
    grid-template-columns: 1fr;
  }.tool-pano .buttons{
    grid-template-columns: 1fr 1fr;
  }.tool-pano .summary{
    grid-template-columns: 1fr 1fr;
  }}@media (max-width: 520px){.tool-pano .buttons,.tool-pano .summary{
    grid-template-columns: 1fr;
  }.tool-pano .panel{ padding: 12px; }}.tool-pano label select:disabled,.tool-pano label input:disabled{
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.tool-pano{--navy:#152b37;--teal:#263b4d;--teal2:#252b31;--bg:#fff;--text:#152b37;--muted:#617176;--line:#dce5e2;--primary:#263b4d;--primary-dark:#252b31;--soft:#f0f2f3;--r:8px;font-family:"Segoe UI",Arial,sans-serif;background:#fff}.tool-pano label{font-weight:600;font-size:.875rem}.tool-pano input,.tool-pano select,.tool-pano textarea{border-radius:5px;font-size:1rem}.tool-pano .btn{border-radius:5px;font-weight:650}.tool-pano .card{box-shadow:none}.tool-pano .option{border-radius:8px;text-align:left;font:inherit;color:var(--ink)}
.tool-pano .app-shell{width:min(1280px,calc(100% - 36px));padding:0;grid-template-columns:minmax(320px,400px) minmax(0,1fr)}.tool-pano .panel{min-width:0;border-radius:8px;box-shadow:none;padding:22px}.tool-pano .summary{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-pano .summary .box b{font-size:.8rem}.tool-pano .summary .box span{font-size:1rem}.tool-pano button{font-size:.875rem;border-radius:5px;font-weight:650}.tool-pano h2{font-size:1.5rem}@media(max-width:900px){.tool-pano .app-shell{grid-template-columns:1fr}}