/* _server/publc/css/Tangles-llc_IP_infringment.css */
:root{
  --bg:#f8fafc; --card:#ffffff; --ink:#0f172a; --muted:#475569;
  --accent:#06b6d4; --accent-2:#7c3aed; --success:#16a34a; --danger:#dc2626;
  --border: rgba(15,23,42,.1);
  --radius: 16px; --shadow: 0 8px 18px rgba(2,6,23,.08);
  color-scheme: light; font-synthesis-weight:none;
}

html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font: clamp(14px, 1.6vw, 16px)/clamp(1.5, 2.2vw, 1.7)
        system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
}
a{ color:var(--accent); }
.wrap{ max-width: clamp(760px, 92vw, 1000px); margin:0 auto; padding: clamp(20px, 5vw, 32px) clamp(12px, 4vw, 20px); }

header{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1px solid var(--border); border-radius:var(--radius);
  padding: clamp(16px, 4.5vw, 24px) clamp(12px, 4vw, 16px);
  box-shadow:var(--shadow);
  background:#ff4d6d; color:#fff;
}
#closeBtn{
  position:absolute; top: clamp(6px, 2.5vw, 10px); right: clamp(10px, 4vw, 16px);
  background:transparent; border:none; cursor:pointer;
  font-size: clamp(18px, 4.8vw, 22px); line-height:1; color:black;
}
.logo{
  width: clamp(32px, 6vw, 40px);
  height: clamp(32px, 6vw, 40px);
  border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow);
  font-size: clamp(14px, 3.6vw, 18px);
  margin: clamp(4px, 2vw, 6px) 0 clamp(8px, 2.6vw, 10px);
}
.title{
  margin:0;
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 900;
  letter-spacing: clamp(.2px, .5vw, .2px);
  color:red;
  font-family: fantasy;
}
header p{ margin: clamp(6px, 2vw, 8px) 0 0; color:#fff; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.section{ padding: clamp(14px, 3.6vw, 22px); }

.grid{ display:grid; grid-template-columns:1fr; gap: clamp(12px, 3.2vw, 18px); }
@media (min-width:880px){ .grid{ grid-template-columns:2fr 1fr; } }

h2{ margin:0 0 clamp(8px, 2.6vw, 12px); font-size: clamp(18px, 3.6vw, 22px); }
h3{ margin: clamp(12px, 3.2vw, 18px) 0 clamp(6px, 2vw, 8px); font-size: clamp(16px, 3vw, 18px); }
.muted{ color:var(--muted); }

.pill{
  display:inline-block; border:1px solid var(--border); border-radius:999px;
  padding: 2px clamp(8px, 2.6vw, 10px); margin:0 clamp(6px, 2.4vw, 8px) clamp(6px, 2.4vw, 8px) 0;
  color:var(--muted); font-size: clamp(11px, 2.4vw, 12px);
}

form{ display:grid; gap: clamp(10px, 3.5vw, 16px); }
.row{ display:grid; gap: clamp(10px, 3vw, 14px); }
@media (min-width:700px){ .row{ grid-template-columns:1fr 1fr; } }

label{ font-weight:600; font-size: clamp(14px, 2.6vw, 16px); }
.req::after{ content:" *"; color:var(--danger); font-weight:700; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea{
  width:100%;
  padding: clamp(8px, 2.6vw, 10px) clamp(10px, 3vw, 12px);
  border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--ink);
  font: inherit; box-sizing:border-box;
}
textarea{ min-height: clamp(100px, 24vw, 140px); resize: vertical; }
input[type="file"]{ font: inherit; }
.help{ font-size: clamp(.85rem, 2.2vw, .95rem); color:var(--muted); margin-top: clamp(2px, 1.2vw, 4px); }

.checks{ display:grid; gap: clamp(8px, 2.6vw, 10px); margin-top: clamp(4px, 1.6vw, 6px); }
.checks label{ font-weight:500; }

.actions{ display:flex; flex-wrap:wrap; gap: clamp(8px, 3vw, 10px); margin-top: clamp(6px, 2vw, 8px); }
.btn{
  display:inline-flex; align-items:center; gap: clamp(6px, 2.4vw, 8px);
  border:1px solid var(--border); background:#fff; color:var(--ink);
  padding: clamp(8px, 2.8vw, 10px) clamp(12px, 3.4vw, 14px);
  border-radius:10px; text-decoration:none; cursor:pointer;
  font-size: clamp(14px, 2.6vw, 16px);
}
.btn.primary{ background:var(--accent); border-color:transparent; color:#fff; }
.btn.secondary{ background:#fff; }
.btn:hover{ filter:brightness(.98); }

.alert{ border-radius:10px; padding: clamp(10px, 3vw, 12px) clamp(12px, 3.4vw, 14px); margin: clamp(8px, 2.6vw, 10px) 0; border:1px solid var(--border); }
.alert.success{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.alert.error{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

aside .card{ position:sticky; top: clamp(12px, 3.6vw, 24px); }
.callout{ border-left:3px solid var(--accent); background:#eef9fc; padding: clamp(10px, 3vw, 14px); border-radius:10px; }

footer{ margin-top: clamp(18px, 5vw, 26px); text-align:center; color:var(--muted); font-size: clamp(.85rem, 2.2vw, .95rem); }
.small{ font-size: clamp(.82rem, 2vw, .9rem); }

.list{ padding-left: clamp(14px, 3.6vw, 18px); margin: clamp(6px, 2vw, 8px) 0; }
.list li{ margin: clamp(2px, 1.2vw, 4px) 0; }