@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink:#1F2421;
  --paper:#EDEFEA;
  --paper-alt:#E1E5DD;
  --tape:#F2B705;
  --tape-dark:#C99400;
  --teal:#0F5257;
  --rule:#C7CDC1;
  --danger:#B34700;
  --radius:6px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* decorative ruler strip used at top of pages */
.ruler{
  height:14px;
  width:100%;
  background-image:repeating-linear-gradient(
    90deg,
    var(--ink) 0, var(--ink) 1px,
    transparent 1px, transparent 24px
  );
  background-color:var(--tape);
  border-bottom:2px solid var(--ink);
}

.wrap{
  max-width:640px;
  margin:0 auto;
  padding:48px 20px 80px;
}

.wrap.narrow{max-width:380px;}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 6px;
}

h1{
  font-size:1.65rem;
  font-weight:700;
  margin:0 0 4px;
  letter-spacing:-0.01em;
}

p.sub{
  color:#4B564F;
  margin:0 0 28px;
  font-size:0.95rem;
}

/* card */
.card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:22px;
  position:relative;
}
.card::before{
  content:"";
  position:absolute;
  top:-2px;left:16px;right:16px;
  height:2px;
  background-image:repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px);
}

label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:#4B564F;
  margin:14px 0 6px;
}
label:first-of-type{margin-top:0;}

input[type=text],input[type=url],input[type=password]{
  width:100%;
  padding:11px 12px;
  border:1.5px solid var(--rule);
  border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.9rem;
  background:var(--paper);
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(15,82,87,0.15);
}

button, .btn{
  display:inline-block;
  margin-top:16px;
  padding:11px 20px;
  background:var(--ink);
  color:var(--tape);
  border:none;
  border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.02em;
  cursor:pointer;
  text-decoration:none;
  transition:transform .1s ease, background .15s ease;
}
button:hover, .btn:hover{background:#333;}
button:active, .btn:active{transform:translateY(1px);}

.btn-link{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--teal);
  text-decoration:none;
  border-bottom:1px dashed var(--teal);
}

/* header row */
.top-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:2px;
}

/* ticket / result stub */
.stub{
  margin:20px 0;
  padding:14px 16px;
  background:var(--paper-alt);
  border:1.5px dashed var(--teal);
  border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.88rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  word-break:break-all;
}
.stub.error{
  border-color:var(--danger);
  color:var(--danger);
}
.stub .copy{
  flex-shrink:0;
  background:var(--ink);
  color:var(--tape);
  border:none;
  border-radius:4px;
  padding:6px 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  cursor:pointer;
  margin:0;
}

/* table */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:26px;
  font-size:0.87rem;
}
th{
  text-align:left;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#4B564F;
  padding:0 8px 8px;
  border-bottom:2px solid var(--ink);
}
td{
  padding:11px 8px;
  border-bottom:1px solid var(--rule);
  vertical-align:middle;
}
tr:hover td{background:var(--paper-alt);}
td.code a{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--tape);
}
td.orig{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#4B564F;
  font-size:0.85rem;
}
td.clicks{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
}
td.del a{
  color:var(--danger);
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  text-decoration:none;
  border-bottom:1px dashed var(--danger);
}

.empty{
  margin-top:26px;
  padding:28px;
  text-align:center;
  border:1.5px dashed var(--rule);
  border-radius:var(--radius);
  color:#4B564F;
  font-size:0.9rem;
}

.center{text-align:center;}
.center .card{text-align:left;}

@media (max-width:480px){
  td.orig{max-width:120px;}
}