@font-face{font-family:"TH Sarabun New";src:url("/assets/fonts/THSarabunNew.ttf")}
@font-face{font-family:"TH Sarabun New";font-weight:bold;src:url("/assets/fonts/THSarabunNew Bold.ttf")}
body{margin:0;background:#eef2f7;font-family:"TH Sarabun New",Tahoma,Arial,sans-serif;font-size:20px;color:#111827}
.wrap{width:100%;max-width:1900px;margin:0 auto;padding:16px 20px;box-sizing:border-box}
.wrap.narrow{max-width:1500px}
.head{background:#123c9c;color:#fff;border-radius:18px;padding:16px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.head h1{margin:0;font-size:38px}.head p{margin:2px 0 0;opacity:.9;font-size:20px}
.head .user{font-size:16px;text-align:right}
.user-name{font-weight:bold;font-size:17px;margin-bottom:6px}
.user-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.head-btn{background:rgba(255,255,255,.16);color:#fff;font-size:15px;padding:8px 13px;border-radius:999px}
.head-btn:hover{background:rgba(255,255,255,.3)}
.head-btn-active{background:#fff;color:#123c9c}
.head-btn-active:hover{background:#fff}
.head-current{font-weight:normal;opacity:.85;font-size:28px}
.grid{display:grid;grid-template-columns:410px minmax(0,1fr);gap:16px;margin-top:16px}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 4px 14px #0001;margin-bottom:16px}
.card h2{font-size:24px;margin:0 0 10px}
label{font-weight:bold;display:block;margin:10px 0 5px;font-size:19px}
input,textarea,select{width:100%;padding:10px 11px;border:1px solid #cbd5e1;border-radius:10px;font-size:19px;box-sizing:border-box;font-family:inherit}
textarea{min-height:80px;resize:vertical}
textarea#summary{min-height:140px}
.row{display:flex;gap:8px}.row>*{flex:1}
button,.btn{display:inline-block;border:0;border-radius:10px;padding:11px 15px;font-weight:bold;font-size:17px;cursor:pointer;text-decoration:none;text-align:center;font-family:inherit}
.blue{background:#1d4ed8;color:#fff}.green{background:#15803d;color:#fff}.gray{background:#e5e7eb;color:#111}
.light{background:#dbeafe;color:#1e3a8a}.orange{background:#fed7aa;color:#9a3412}.red{background:#fee2e2;color:#991b1b}
.msg{background:#fff7ed;border:1px solid #fed7aa;padding:10px;border-radius:10px;margin:10px 0}
.err{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:10px;border-radius:10px;margin:10px 0}
.checks label{font-weight:normal;display:flex;gap:8px;align-items:center;font-size:19px}.checks input{width:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:9px 10px;text-align:left;font-size:16px;vertical-align:top}
.table th{background:#f8fafc}
.small{font-size:20px;color:#111827}
.pill{display:inline-block;background:#e0e7ff;color:#1e3a8a;border-radius:999px;padding:4px 10px;font-size:14px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.toolbar .btn{font-size:17px;padding:11px 15px}
.previewBox{min-height:900px;max-height:85vh;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;text-align:center;position:relative;overflow:hidden}
.previewBox img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 10px #0002;background:white}
.previewToolbar{position:absolute;top:0;left:0;right:0;height:54px;z-index:5;display:flex;align-items:center;justify-content:center;gap:8px;background:#f8fafc;border-bottom:1px solid #e2e8f0;box-sizing:border-box}
.zoomPct{font-weight:bold;color:#1e3a8a;min-width:52px;display:inline-block}
.previewScroll{position:absolute;top:54px;left:0;right:0;bottom:0;overflow:auto;text-align:center;padding:12px;box-sizing:border-box;cursor:grab;touch-action:none;scrollbar-width:auto}
.previewScroll.dragging{cursor:grabbing}
.previewScroll img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.previewImgWrap{width:100%}
.hint{color:#64748b;padding:80px 20px;line-height:1.8;font-size:15px}
.loading{display:none;color:#1d4ed8;font-weight:bold;margin:10px 0}
.sticky{position:sticky;top:10px}
.type-badge{display:inline-block;border-radius:999px;padding:5px 10px;font-size:14px;font-weight:bold;margin:2px 3px 2px 0}
.type-normal{background:#dbeafe;color:#1e40af}.type-circular{background:#fed7aa;color:#9a3412}
.type-card{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0}
.type-card div{border-radius:12px;padding:10px;text-align:center;font-weight:bold;font-size:20px}
.stat-normal{background:#dbeafe;color:#1e40af}.stat-circular{background:#fed7aa;color:#9a3412}.stat-total{background:#dcfce7;color:#166534}
.stat-next{display:block;font-size:20px;font-weight:bold;margin-top:4px;opacity:.85}
.input-with-mic{position:relative}
.input-with-mic input,.input-with-mic textarea{padding-right:46px}
.mic-btn{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;border:1px solid #cbd5e1;background:#f8fafc;font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1}
.mic-btn:hover{background:#eef2f7}
.mic-btn.listening{background:#fee2e2;border-color:#f87171;animation:micPulse 1.2s infinite}
.mic-btn:disabled{opacity:.35;cursor:not-allowed}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
.doc-type-box{display:flex;gap:8px}
.doc-type-box label{font-weight:normal;display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:10px;padding:8px;flex:1}
.doc-type-box input{width:auto}
.dept-badge{display:inline-block;border-radius:999px;padding:4px 9px;font-size:14px;font-weight:bold;margin:2px 3px 2px 0}
.dept-resource{background:#dbeafe;color:#1e40af}.dept-plan{background:#ede9fe;color:#5b21b6}
.dept-student{background:#dcfce7;color:#166534}.dept-academic{background:#fef3c7;color:#92400e}.dept-none{background:#e5e7eb;color:#374151}
.dept-box{padding:8px;border-radius:10px;margin:5px 0}
.dept-box.dept-resource{border-left:6px solid #2563eb}.dept-box.dept-plan{border-left:6px solid #7c3aed}
.dept-box.dept-student{border-left:6px solid #16a34a}.dept-box.dept-academic{border-left:6px solid #f59e0b}
.sigbox{background:#f8fafc;border:1px dashed #94a3b8;border-radius:12px;padding:10px;margin-top:14px}
.sigbox label{margin:0;font-weight:normal;display:flex;align-items:center;gap:8px}.sigbox input{width:auto}
iframe.docframe{width:100%;height:82vh;border:1px solid #ddd;border-radius:12px;background:white}
.login-wrap{max-width:380px;margin:80px auto;padding:16px}
body.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d2d7a,#1d4ed8 55%,#3b82f6);padding:24px;box-sizing:border-box}
.login-shell{width:100%;max-width:480px}
.login-card{background:#fff;border-radius:28px;padding:48px 40px;box-shadow:0 30px 70px rgba(13,45,122,.4);text-align:center}
.login-icon{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#e0e7ff,#c7d6ff);display:flex;align-items:center;justify-content:center;font-size:42px;margin:0 auto 18px;box-shadow:0 6px 16px rgba(29,78,216,.18)}
.login-card h1{margin:0;font-size:40px;text-align:center;color:#123c9c}
.login-sub{text-align:center;color:#64748b;font-size:20px;line-height:1.5;margin:10px 0 30px}
.login-card form{text-align:center}
.login-card label{font-size:22px;margin:16px 0 8px;text-align:center}
.login-card input{font-size:24px;padding:16px 18px;border-radius:14px;min-height:58px;text-align:center;transition:border-color .15s,box-shadow .15s}
.login-card input:focus{outline:none;border-color:#1d4ed8;box-shadow:0 0 0 4px rgba(29,78,216,.15)}
.login-submit{width:100%;margin-top:26px;font-size:24px;padding:16px;border-radius:14px;min-height:60px;box-shadow:0 10px 24px rgba(29,78,216,.3)}
.login-divider{display:flex;align-items:center;gap:12px;margin:26px 0;color:#94a3b8;font-size:18px}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:#e2e8f0}
.login-google{width:100%;box-sizing:border-box;background:#fff;color:#374151;border:1.5px solid #cbd5e1;font-size:21px;padding:16px;border-radius:14px;min-height:58px;display:flex;align-items:center;justify-content:center;gap:12px;transition:border-color .15s,box-shadow .15s}
.login-google:hover{background:#f8fafc;border-color:#94a3b8;box-shadow:0 4px 12px rgba(0,0,0,.08)}
@media(max-width:480px){.login-card{padding:32px 24px;border-radius:20px}.login-card h1{font-size:34px}}
.tdp-wrap{position:relative}
.tdp-input{cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 10px center/20px 20px}
.tdp-panel{display:none;position:absolute;z-index:40;top:calc(100% + 6px);left:0;background:#fff;border:1px solid #cbd5e1;border-radius:14px;box-shadow:0 12px 30px #0002;padding:12px;width:290px}
.tdp-panel.tdp-open{display:block}
.tdp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tdp-label{font-weight:bold;font-size:17px;color:#123c9c}
.tdp-nav{background:#eef2f7;border-radius:8px;width:32px;height:32px;font-size:18px;font-weight:bold;color:#1d4ed8;padding:0}
.tdp-nav:hover{background:#dbeafe}
.tdp-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:13px;color:#64748b;margin-bottom:4px}
.tdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tdp-day{background:none;border-radius:8px;padding:7px 0;font-size:15px;color:#111827;font-weight:normal}
.tdp-day:hover{background:#eef2f7}
.tdp-blank{visibility:hidden;cursor:default}
.tdp-today-cell{box-shadow:inset 0 0 0 1.5px #1d4ed8}
.tdp-selected{background:#1d4ed8;color:#fff}
.tdp-footer{text-align:center;margin-top:8px;border-top:1px solid #e5e7eb;padding-top:8px}
.tdp-today{background:#dbeafe;color:#1e3a8a;font-size:14px;padding:6px 14px}
.layout-item{position:absolute;transform:translate(-50%,-50%);background:rgba(29,78,216,.88);color:#fff;font-size:11px;padding:3px 7px;border-radius:999px;cursor:move;white-space:nowrap;box-shadow:0 1px 4px #0003}
.layout-item:active{background:rgba(220,38,38,.9)}
@media(max-width:1200px){.grid{grid-template-columns:1fr}.doc-grid{grid-template-columns:1fr}.sticky{position:static}.previewBox{min-height:420px}.row{flex-direction:column}.head{display:block}}