/* ApplyDIY components.css — cards, badges, tables, auth, UI components */

/* v0.2 */

.notice-bar{padding:10px 20px;text-align:center;background:#fff7ed;color:#9a3412;border-bottom:1px solid #fed7aa;font-weight:800}.dark .notice-bar{background:#301a08;color:#fdba74;border-color:#7c2d12}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:.76rem;font-weight:900;border:1px solid var(--border)}.badge.ok{background:rgba(16,185,129,.12);color:var(--good)}.badge.warn{background:rgba(245,158,11,.12);color:var(--warn)}.badge.danger{background:rgba(239,68,68,.12);color:var(--danger)}.chip{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:7px 11px;color:var(--muted);font-weight:800}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.stats-grid article{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:18px;padding:18px}.stats-grid b{display:block;font-size:2rem}.stats-grid span{color:var(--muted);font-weight:800}.admin-grid{grid-template-columns:1.4fr .6fr}.wide{grid-column:1/-1}.review-table{display:grid;gap:12px}.review-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:14px;align-items:start;border:1px solid var(--border);border-radius:16px;padding:14px;background:color-mix(in srgb,var(--card) 94%,var(--brand) 6%)}.review-row a,.source-list a,.panel a{overflow-wrap:anywhere;word-break:break-word;color:var(--brand)}.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input,.inline-form select{min-width:0;flex:1}.mini-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--border);padding:10px 0;overflow-wrap:anywhere}.compact-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.jv-card h3{margin:18px 0 6px}.notice-card{background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(124,58,237,.10));border:1px solid var(--border);border-radius:20px;padding:18px;margin-top:18px}.program-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.progress{height:10px;border-radius:999px;background:color-mix(in srgb,var(--border) 72%,transparent);overflow:hidden}.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--brand2))}.progress .w0{width:0}.progress .w10{width:10%}.progress .w20{width:20%}.progress .w30{width:30%}.progress .w40{width:40%}.progress .w50{width:50%}.progress .w60{width:60%}.progress .w70{width:70%}.progress .w80{width:80%}.progress .w90{width:90%}.progress .w100{width:100%}.risk-list,.check-list{padding-left:18px;line-height:1.7}.risk-list li::marker{color:var(--warn)}.block-code{display:block;margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--card) 92%,var(--brand) 8%);white-space:pre-wrap;overflow-wrap:anywhere}.doc-preview{white-space:pre-wrap;overflow-wrap:anywhere;max-height:520px;overflow:auto;background:color-mix(in srgb,var(--card) 88%,#000 4%);border:1px solid var(--border);border-radius:14px;padding:14px}.auth-card small,.muted{color:var(--muted)}
@media(max-width:820px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.review-row{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}.nav{max-height:75vh;overflow:auto}.program-grid,.card-grid{grid-template-columns:1fr}}
@media(max-width:520px){.stats-grid{grid-template-columns:1fr}.inline-form{display:grid;grid-template-columns:1fr}.mini-row{display:block}.review-row{padding:12px}.school-card,.program-card,.panel{min-width:0}}

/* v0.3 mobile overflow hotfix */

.source-list em,.source-list small,.source-list b{overflow-wrap:anywhere;word-break:break-word;min-width:0}.toast:not(.show){transform:translateX(120%);right:12px}.toast.show{right:12px;max-width:calc(100vw - 24px)}

/* v0.4: unified buttons, my-hub, admin separation */

.primary,.secondary,.ghost,.small,a.button{height:44px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.93rem;padding:0 20px;white-space:nowrap;border-radius:12px}.small{height:36px;padding:0 15px;font-size:.88rem;border-radius:10px}.icon-btn{width:40px;height:40px;padding:0;border-radius:12px}.my-grid{grid-template-columns:1fr 1.2fr}.bg-summary{display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--bg) 50%,var(--card));margin-bottom:14px}.bg-summary span{font-weight:700;color:var(--muted)}.mini-row.bordered{border:1px solid var(--border);border-radius:14px;padding:10px 14px;margin-bottom:8px}.mini-row.bordered b{display:block}.full{width:100%}
@media(max-width:680px){.my-grid{grid-template-columns:1fr}.primary,.secondary,.ghost,.small,.full{height:42px;font-size:.92rem;padding:0 16px}.small{height:34px;padding:0 12px;font-size:.84rem}}

/* v0.4.2 tables and personalized recommendations */

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th,.data-table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.personalized-strip article small{line-height:1.5}.rank-source-tabs{display:flex;gap:8px;flex-wrap:wrap}

/* v0.5.0 UX closure: pw toggle, strength meter, hover, prefers-color-scheme */

.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{padding-right:44px!important}
.pw-toggle{position:absolute;right:8px;background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.15rem;padding:6px;line-height:1;user-select:none;transition:color .15s}
.pw-toggle:hover{color:var(--text)}
.pw-strength{height:5px;border-radius:99px;background:var(--border);margin-top:6px;overflow:hidden}
.pw-strength i{display:block;height:100%;width:0;transition:width .25s,background .25s}
.pw-strength.weak i{width:33%;background:var(--danger)}
.pw-strength.fair i{width:66%;background:var(--warn)}
.pw-strength.strong i{width:100%;background:var(--good)}
.pw-hint{font-size:.78rem;color:var(--muted);margin-top:4px;display:block}
@media(prefers-color-scheme:dark){:root:not(.light){--bg:#08111f;--card:#101a2c;--text:#e5edf8;--muted:#94a3b8;--border:#22314a;--brand:#60a5fa;--brand2:#a78bfa;--shadow:0 22px 70px rgba(0,0,0,.35);--soft:color-mix(in srgb,var(--bg) 55%,var(--card))}}
.school-v03-card,.program-card,.doc-card,.candidate-card,.download-card,.review-row{transition:transform .15s ease,box-shadow .15s ease}
.school-v03-card:hover,.program-card:hover,.doc-card:hover,.candidate-card:hover,.download-card:hover,.review-row:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(15,23,42,.12)}
.dark .school-v03-card:hover,.dark .program-card:hover,.dark .doc-card:hover,.dark .candidate-card:hover,.dark .download-card:hover,.dark .review-row:hover{box-shadow:0 14px 44px rgba(0,0,0,.4)}
.primary,.secondary,.ghost,.small,.icon-btn,button,a{transition:opacity .15s ease,transform .1s ease}
.primary:hover,.secondary:hover,.ghost:hover{opacity:.88}
.primary:active,.secondary:active,.ghost:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.school-v03-card,.program-card,.doc-card,.candidate-card,.download-card,.review-row{transition:none}.school-v03-card:hover,.program-card:hover,.doc-card:hover,.candidate-card:hover,.download-card:hover,.review-row:hover{transform:none}.glass-card{transform:none}}


/* v0.9.4 mobile bottom tab bar */
.mobile-tab-bar{display:none}
@media(max-width:768px){
  .mobile-tab-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;background:color-mix(in srgb,var(--card) 92%,transparent);border-top:1px solid var(--border);backdrop-filter:blur(20px);padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px))}
  .mobile-tab-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:.68rem;color:var(--muted);text-decoration:none;min-height:48px;justify-content:center;transition:color .15s}
  .mobile-tab-bar a .tab-icon{font-size:1.35rem;line-height:1}
  .mobile-tab-bar a.active{color:var(--brand);font-weight:800}
  .mobile-tab-bar a:active{opacity:.7;transform:scale(.95)}
  .main-wrap{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px) + 32px)!important}
  .topbar .nav{display:none!important}
  .topbar{padding:10px 16px}
  .top-actions{gap:6px}
  .top-actions .user-pill{display:none}
}