:root{
    --ink:#161a17;
    --paper:#f2f0e9;
    --panel:#ffffff;
    --line:#d8d4c8;
    --amber:#e8720c;
    --amber-dark:#b8560a;
    --ok:#2f7d4f;
    --err:#c23b2f;
    --mono: 'JetBrains Mono', 'Courier New', monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: -1px -1px;
    color:var(--ink);
    font-family:var(--sans);
    min-height:100vh;
    padding:20px 14px 60px;
  }
  .wrap{max-width:520px;margin:0 auto;}

  header{margin-bottom:22px;}
  .tag{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--amber-dark);
    background:#fdece0;
    border:1px solid var(--amber);
    display:inline-block;
    padding:3px 8px;
    border-radius:3px;
    margin-bottom:10px;
  }
  h1{
    font-size:28px;
    line-height:1.1;
    margin:0 0 6px;
    letter-spacing:-0.02em;
    font-weight:800;
  }
  .sub{color:#5a5a52;font-size:14px;margin:0;}

  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:18px;
    margin-bottom:16px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  }
  .step-label{
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#8a8578;
    margin-bottom:12px;
  }
  .step-num{
    width:20px;height:20px;border-radius:50%;
    background:var(--ink); color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; flex-shrink:0;
  }

  label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
    margin-top:14px;
  }
  label:first-of-type{margin-top:0;}
  input[type=text], input[type=url], textarea, select{
    width:100%;
    border:1.5px solid var(--line);
    background:var(--paper);
    border-radius:7px;
    padding:11px 12px;
    font-size:15px;
    font-family:var(--sans);
    color:var(--ink);
    outline:none;
    transition:border-color .15s;
  }
  input:focus, textarea:focus, select:focus{
    border-color:var(--amber);
  }
  textarea{resize:vertical; min-height:70px;}
  .hint{font-size:12px;color:#8a8578;margin-top:5px;}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:none; border-radius:7px;
    padding:12px 16px;
    font-size:14px; font-weight:700;
    cursor:pointer;
    font-family:var(--sans);
    transition: transform .08s, opacity .15s;
  }
  .btn:active{transform:scale(0.98);}
  .btn-primary{background:var(--ink); color:var(--paper); width:100%;}
  .btn-amber{background:var(--amber); color:#1a1200; width:100%;}
  .btn-amber:hover{background:var(--amber-dark);}
  .btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
  .btn-row{display:flex; gap:10px; margin-top:4px;}
  .btn-row .btn{flex:1;}
  .btn:disabled{opacity:.45; cursor:not-allowed;}

  video{
    width:100%; border-radius:8px; background:#000;
    display:block; margin-top:10px; max-height:320px; object-fit:cover;
  }
  canvas{display:none;}
  .photo-preview{
    margin-top:10px; border-radius:8px; overflow:hidden;
    border:1.5px solid var(--line); position:relative;
  }
  .photo-preview img{width:100%; display:block;}
  .photo-preview .remove{
    position:absolute; top:8px; right:8px;
    background:rgba(20,20,15,0.75); color:#fff;
    border:none; border-radius:6px; padding:6px 10px;
    font-size:12px; cursor:pointer; font-family:var(--sans);
  }

  .geo-box{
    margin-top:10px; padding:12px; border-radius:8px;
    background:var(--paper); border:1px dashed var(--line);
    font-family:var(--mono); font-size:13px;
  }
  .geo-box .row{display:flex; justify-content:space-between; margin-bottom:4px;}
  .geo-box .row:last-child{margin-bottom:0;}
  .geo-box .k{color:#8a8578;}
  .geo-empty{color:#8a8578; font-family:var(--sans); font-size:13px;}

  .status{
    font-family:var(--mono); font-size:12px;
    padding:9px 12px; border-radius:6px; margin-top:10px;
    display:none;
  }
  .status.show{display:block;}
  .status.ok{background:#e8f5ec; color:var(--ok); border:1px solid #b7ddc4;}
  .status.err{background:#fbeae8; color:var(--err); border:1px solid #f0c0ba;}
  .status.pending{background:#fdf3e5; color:var(--amber-dark); border:1px solid #f2d3a8;}

  footer{
    text-align:center; font-family:var(--mono); font-size:11px;
    color:#a09a8a; margin-top:24px; letter-spacing:.05em;
  }

  .divider-or{
    display:flex; align-items:center; gap:10px; margin:12px 0;
    font-family:var(--mono); font-size:11px; color:#a09a8a; text-transform:uppercase;
  }
  .divider-or::before, .divider-or::after{content:''; flex:1; height:1px; background:var(--line);}