:root{--bg:#0b1020;--card:#151b2f;--text:#e7ecff;--muted:#aab3d6;--accent:#7aa2ff}
*{box-sizing:border-box} body{margin:0;font-family:'Segoe UI',Tahoma,'Arial Unicode MS',Arial,'Helvetica Neue',Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:980px;margin:40px auto;padding:24px}
.card{background:var(--card);padding:20px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);margin-bottom:18px}
h1,h2,h3{margin:0 0 12px} h1{font-size:28px} h2{font-size:22px}
input,button,textarea{font:inherit} input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #2a3352;background:#0f1428;color:var(--text)}
button{padding:10px 14px;border-radius:12px;border:0;background:var(--accent);color:#06102b;font-weight:700;cursor:pointer}
button.secondary{background:#2c365a;color:var(--text)} .row{display:flex;gap:12px;flex-wrap:wrap} .row>div{flex:1 1 240px}
table{width:100%;border-collapse:collapse;margin-top:12px} th,td{border-bottom:1px solid #2a3352;padding:8px;text-align:left}
.kv{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.kv input{flex:1} .muted{color:var(--muted);font-size:12px}
.badge{padding:3px 8px;border-radius:999px;background:#233055;color:var(--text);font-size:12px}
iframe{width:100%;height:70vh;border:1px solid #2a3352;border-radius:12px;background:#0f1428}
.canvas-wrap{background:#0f1428;border:1px dashed #2a3352;border-radius:12px;padding:12px}
canvas{width:100%;max-width:800px;height:220px;background:#ffffff;border-radius:8px;display:block;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .container {
    margin: 20px auto;
    padding: 16px;
  }
  
  .card {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  .row {
    flex-direction: column;
    gap: 8px;
  }
  
  .row > div {
    flex: none;
  }
  
  input, button, textarea {
    padding: 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  button {
    padding: 14px 20px;
    font-size: 16px;
    min-height: 48px; /* Better touch target */
  }
  
  iframe {
    height: 50vh;
  }
  
  canvas {
    height: 180px;
    max-width: 100%;
  }
  
  .canvas-wrap {
    padding: 8px;
  }
  
  /* Mobile-specific button styles */
  .mobile-button {
    width: 100%;
    margin: 8px 0;
    padding: 16px 20px;
    font-size: 16px;
    min-height: 48px;
  }
  
  /* Mobile PDF viewer */
  .pdf-viewer-mobile {
    flex-direction: column;
    gap: 12px;
  }
  
  .pdf-viewer-mobile button {
    width: 100%;
    margin: 4px 0;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .container {
    margin: 10px auto;
    padding: 12px;
  }
  
  .card {
    padding: 12px;
  }
  
  h1 {
    font-size: 22px;
  }
  
  h2 {
    font-size: 18px;
  }
  
  input, button, textarea {
    padding: 14px;
  }
  
  button {
    padding: 16px 24px;
  }
  
  canvas {
    height: 160px;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  button {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  input {
    min-height: 44px;
  }
  
  .row {
    gap: 16px;
  }
}

/* Table improvements for links and codes */
#tbl td:last-child {
  max-width: 300px;
  word-break: break-all;
}

#tbl td:last-child div {
  max-width: 100%;
}

#tbl td:last-child button {
  font-size: 10px;
  padding: 4px 8px;
  margin: 2px;
}

/* Mobile table improvements */
@media (max-width: 768px) {
  #tbl td:last-child {
    max-width: 200px;
  }
  
  #tbl td:last-child button {
    font-size: 9px;
    padding: 3px 6px;
    margin: 1px;
  }
  
  /* Mobile table layout */
  #tbl {
    font-size: 12px;
  }
  
  #tbl th, #tbl td {
    padding: 6px 3px;
  }
  
  #tbl td:last-child div {
    font-size: 10px;
  }
}

/* Additional mobile improvements */
.mobile-input {
  font-size: 16px !important;
  padding: 12px !important;
  min-height: 44px;
}

/* Document item styling */
.document-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #2a3352;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #1a1f35;
  transition: all 0.3s ease;
}

.document-item:hover {
  background: #1f2438;
  border-color: #3a4562;
}

.document-content {
  flex: 1;
  cursor: pointer;
}

.document-actions {
  margin-left: 15px;
}

.delete-btn {
  background: #ff4444 !important;
  color: white !important;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background: #ff6666 !important;
  transform: translateY(-1px);
}

.delete-btn:active {
  transform: translateY(0);
}

/* Prevent zoom on input focus (iOS) */
@media screen and (max-width: 768px) {
  input[type="tel"],
  input[type="text"],
  input[type="email"] {
    font-size: 16px !important;
  }
}

/* Better touch targets for mobile */
@media (max-width: 768px) {
  .mobile-button {
    min-height: 48px;
    font-size: 16px;
    padding: 14px 20px;
  }
  
  .canvas-wrap {
    margin: 10px 0;
  }
  
  canvas {
    touch-action: none; /* Prevents scrolling while drawing */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: crosshair;
  }
}