:root{ --bg:#0b0f14; --panel:#111823; --panel-2:#0f1620; --text:#e6edf3; --muted:#9aa4b2; --accent:#7ee787; --accent-2:#5fb3ff; --danger:#ff7b72; --border:#243142; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.4); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6} a{color:var(--accent-2);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:1000px;margin:0 auto;padding:24px} .nav{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,rgba(11,15,20,.85),rgba(11,15,20,.6));backdrop-filter:blur(8px);border-bottom:1px solid var(--border)} .nav .container{display:flex;gap:18px;align-items:center;justify-content:space-between} .brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.3px} .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 12px var(--accent)} .menu{display:flex;gap:16px;flex-wrap:wrap} .menu a{padding:8px 10px;border-radius:10px} .menu a:hover{background:rgba(95,179,255,.12)} .hero{display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:center} .hero .card{min-height:220px} .card{background:linear-gradient(180deg, var(--panel), var(--panel-2));border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .grid{display:grid;gap:18px} .grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .btn{background:var(--accent-2);color:#06101c;border:0;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700;letter-spacing:.2px;box-shadow:0 6px 16px rgba(95,179,255,.25)} .btn:hover{transform:translateY(-1px)} .btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none} .btn.danger{background:var(--danger);color:#2a0c0c} .input, select, textarea{width:100%;padding:12px 14px;border-radius:12px;background:#0b1220;border:1px solid var(--border);color:var(--text)} label{font-size:14px;color:var(--muted);display:block;margin-bottom:6px} .row{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:center;margin-bottom:12px} .table{width:100%;border-collapse:collapse} .table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;font-size:14px} .kbd{border:1px solid var(--border);border-bottom-width:3px;background:#0b1220;padding:1px 6px;border-radius:6px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace} small.muted{color:var(--muted)} footer{color:var(--muted);border-top:1px solid var(--border);margin-top:40px;background:rgba(17,24,35,.7);backdrop-filter:blur(8px)} .status{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:#0b1220;font-size:13px} .status[data-state="created"]{border-color:#4b5563} .status[data-state="confirmed"]{border-color:#38bdf8} .status[data-state="in_progress"]{border-color:#f59e0b} .status[data-state="ready"]{border-color:#22c55e} .status[data-state="delivered"]{border-color:#a78bfa} .status[data-state="cancelled"]{border-color:#ef4444} hr{border:0;border-top:1px solid var(--border);margin:16px 0} .badge{font-size:12px;background:var(--accent-2);color:#081221;border-radius:999px;padding:2px 8px} /* Animated background: gradient + subtle moving stitches */ .bg-animated{ position:fixed;inset:0;z-index:-1;overflow:hidden; background: radial-gradient(1200px 600px at 20% -10%, rgba(95,179,255,.18), transparent 60%), radial-gradient(800px 500px at 110% 20%, rgba(126,231,135,.12), transparent 60%), linear-gradient(180deg, #0a0f15, #0b1118 60%, #0a0e14); } .bg-animated::before, .bg-animated::after{ content:"";position:absolute;inset:-50px;pointer-events:none; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px), radial-gradient(circle at 10% 10%, rgba(95,179,255,.10), transparent 40%); mix-blend-mode:soft-light;opacity:.6; animation:bgMove 35s linear infinite; } .bg-animated::after{ background-image: repeating-linear-gradient(60deg, rgba(126,231,135,.04) 0 1px, transparent 1px 18px), radial-gradient(circle at 80% 20%, rgba(126,231,135,.12), transparent 40%); animation-duration: 50s; opacity:.5; } @keyframes bgMove{ from{transform:translate3d(0,0,0) rotate(0deg)} to{transform:translate3d(-60px,-40px,0) rotate(1turn)} } .tagline{color:var(--muted);margin-top:4px} .highlight{color:var(--accent)} .code{background:#0b1220;border:1px solid var(--border);padding:10px;border-radius:10px;display:inline-block} /* Print receipt */ @media print{ body{background:white;color:black} .nav, footer, .bg-animated{display:none !important} .print-area{display:block !important} .card{box-shadow:none;border:1px solid #ddd} }