.att-wrap{max-width:900px;margin:0 auto;padding:0 0 24px;} 
.att-tabs{display:flex;gap:8px;border-bottom:2px solid #0a63ff;margin-bottom:12px;} 
.att-tab{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:1px solid #0a63ff;border-bottom:0;color:#0a63ff;background:#0b0b0b;font-weight:700;text-decoration:none;} 
.att-tab.is-active{background:#0a63ff;color:#fff;} 

.att-cal-head{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 0 14px;} 
.att-nav{display:inline-flex;align-items:center;justify-content:center;width:36px;height:28px;background:#0a63ff;color:#fff;text-decoration:none;font-weight:900;border-radius:2px;} 
.att-ym{font-size:28px;font-weight:900;color:#222;} 

.att-cal{width:100%;border-collapse:collapse;background:#fff;} 
.att-cal th{background:#0a80d8;color:#fff;height:44px;font-weight:800;border:1px solid #1b78c8;} 
.att-cal td{height:98px;border:1px solid #d6d6d6;vertical-align:top;position:relative;} 
.att-cal td.empty{background:#fff;} 
.att-cal td.day .num{position:absolute;top:10px;left:12px;font-weight:800;color:#666;} 
.att-cal td.sun .num{color:#ff2a2a;} 
.att-cal td.sat .num{color:#0a63ff;} 
.att-cal td.is-today{outline:2px solid rgba(10,99,255,.35);outline-offset:-2px;} 
.att-cal td.is-att{  background:
    linear-gradient(180deg, rgba(39, 100, 206, 0.08), rgba(72, 131, 233, 0.2)),
    url(../img/attendance-logo.svg) no-repeat center / contain;} 

.att-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 12px;} 
.att-time{font-size:13px;color:#666;} 
.att-actions{display:flex;gap:8px;} 
.att-mini-btn{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border:1px solid #0a63ff;background:#fff;color:#0a63ff;font-weight:800;text-decoration:none;border-radius:2px;} 

.att-form{display:flex;gap:10px;align-items:center;justify-content:center;background:#f1f4fb;border:1px solid #dfe6fb;padding:12px;border-radius:2px;margin:8px 0 16px;} 
.att-input{flex:1;height:44px;border:1px solid #cfd7ef;border-radius:2px;padding:0 12px;font-size:16px;outline:0;background:#fff;} 
.att-btn{width:180px;height:44px;border:1px solid #0a63ff;background:#fff;color:#0a63ff;font-weight:900;border-radius:50px;cursor:pointer;font-size:16px; display: flex; justify-content: center; align-items: center;} 
.att-btn:disabled{opacity:.6;cursor:default;} 

.att-table-wrap{background:#fff;} 
.att-table{width:100%;border-collapse:collapse;} 
.att-table thead th{background:#d9e7ff;color:#1b2a48;border:1px solid #c6d8ff;height:44px;font-weight:900;} 
.att-table td{border:1px solid #e6e6e6;height:46px;font-size:14px;color:#222;padding:0 10px;} 
.att-table td.t-center{text-align:center;} 
.att-table td.no-data{text-align:center;color:#666;} 
.att-table .streak{color:#0a63ff;font-weight:900;} 

.att-paging{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 0 0;} 
.att-paging .pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid #d7d7d7;background:#fff;color:#222;text-decoration:none;font-weight:800;} 
.att-paging .pg.is-on{border-color:#0a63ff;background:#0a63ff;color:#fff;} 

.event-tabs{margin:20px 0 20px;border-bottom:2px solid #2f67ff;display:flex;align-items:flex-end;}
.event-tab{display:flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border:2px solid #dbe6ff;border-bottom:0;border-radius:6px 6px 0 0;background:#f3f7ff;color:#7b90b6;font-weight:700;font-size:16px;line-height:1;cursor:pointer;}
.event-tab:hover,.event-tab:focus{background:#eef4ff;color:#2f67ff;}
.event-tab + .event-tab{margin-left:-1px;}
.event-tab.is-active{background:#fff;color:#2f67ff;border-color:#2f67ff;border-bottom:2px solid #fff;position:relative;top:2px;}

@media (max-width:768px){
  .att-cal td{height: 70px;}
}