*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#eef5fb;color:#102337}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#06213c,#0877d9)}.loginbox{width:min(410px,92%);background:#fff;padding:32px;border-radius:16px;text-align:center;box-shadow:0 15px 50px #0005}.loginlogo{width:220px;max-height:110px;object-fit:contain}.loginbox h1{color:#075b9e}.loginbox input{width:100%;padding:13px;margin:7px 0;border:1px solid #b9cfe0;border-radius:8px}.loginbox button{width:100%;padding:13px;margin-top:10px;border:0;border-radius:8px;background:#0877d9;color:white;font-weight:bold}.alert{background:#ffe1e4;color:#a51d2a;padding:10px;border-radius:7px;margin:10px 0}.success{background:#e8f7ed;color:#16743b;padding:10px;border-radius:7px;margin:10px 0}.side{width:235px;position:fixed;inset:0 auto 0 0;background:#061a30;color:white;padding:15px;min-height:100vh}.side img{width:200px;max-height:100px;object-fit:contain}.side a{display:block;color:white;text-decoration:none;padding:13px;border-radius:8px;margin:3px 0;font-weight:bold}.side a:hover{background:#0877d9}.content{margin-left:235px;padding:22px;width:calc(100% - 235px)}.top{display:flex;justify-content:space-between;align-items:center}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card,.panel{background:white;border:1px solid #c6d9e8;border-radius:10px;padding:15px;margin:12px 0;box-shadow:0 2px 8px #1231}.card b{font-size:28px;display:block;margin-top:5px}.panel h2{margin:0 -15px 12px;padding:10px 15px;background:#0877d9;color:#fff;font-size:16px}.btn{border:0;padding:9px 12px;border-radius:7px;font-weight:bold;text-decoration:none;display:inline-block;cursor:pointer;margin:2px}.primary{background:#0877d9;color:#fff}.green{background:#159957;color:#fff}.orange{background:#e99a00;color:#fff}.red{background:#d93444;color:#fff}.gray{background:#718096;color:#fff}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.toolbar input,.toolbar select,.form input,.form select{padding:9px;border:1px solid #b9cfe0;border-radius:6px}.toolbar input{min-width:250px;flex:1}table{width:100%;border-collapse:collapse;overflow:hidden}th,td{border:1px solid #d3e0ea;padding:8px;text-align:left;font-size:13px}th{background:#e4eff8;color:#07518a}.form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.form label{font-size:12px;font-weight:bold;display:block;margin-bottom:4px}.doc{background:#fff;padding:28px;max-width:850px;margin:auto}.dochead{display:flex;justify-content:space-between;border-bottom:3px solid #0877d9;padding-bottom:12px}.dochead img{width:190px}.total{text-align:right;font-size:20px;font-weight:bold}.notice{padding:10px;background:#e9f5ff;border-left:4px solid #0877d9;margin:10px 0}.accessbox{background:#fffbe6;border:2px solid #e8c52e;border-radius:10px;padding:15px;margin:12px 0}.accessbox code{background:#fff;padding:5px 9px;border:1px solid #ddd;border-radius:5px;font-size:16px}.badge{display:inline-block;padding:5px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid #ddd}.badge.paid{background:#e8f7ed;color:#16743b;border-color:#b9e4c7}@media(max-width:900px){.side{width:70px}.side img{width:55px}.side a span{display:none}.content{margin-left:70px;width:calc(100% - 70px)}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.cards,.form{grid-template-columns:1fr}.top{display:block}table{display:block;overflow-x:auto;white-space:nowrap}.content{padding:12px}}