:root { --paper:#e9e6d1; --light:#f8f6e8; --ink:#373737; --line:#afab89; --wine:#5b2115; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#a7a597 url('/legacy-kathrine/background.jpg') no-repeat top center; color:var(--ink); font:12px Verdana,Arial,sans-serif; }
.legacy-shell { width:780px; margin:0 auto; }
header { height:319px; position:relative; background:url('/legacy-kathrine/classic860-reborn-logo.png') no-repeat top center/780px 245px; }
header:after { content:""; position:absolute; z-index:0; left:0; right:0; bottom:42px; height:32px; background:url('/legacy-kathrine/tabs-bg.png') no-repeat; }
header:before { content:""; position:absolute; z-index:0; left:0; right:0; bottom:0; height:42px; background:url('/legacy-kathrine/submenu.png') no-repeat; }
.brand { display:none; }
nav { position:absolute; z-index:2; right:11px; bottom:53px; height:29px; display:flex; align-items:center; }
nav a { display:block; min-width:69px; padding:9px 5px 8px; text-align:center; color:#e2e2e2; text-decoration:none; font-weight:bold; background:url('/legacy-kathrine/tab.png') no-repeat center/100% 100%; }
nav a:hover { color:#fff; text-decoration:underline; background-image:url('/legacy-kathrine/tab-active.png'); }
.language-switch { display:flex; align-items:center; margin-right:4px; }.language-switch button { width:45px; height:27px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }.language-switch img { display:block; width:45px; height:27px; object-fit:contain; filter:drop-shadow(1px 1px 1px #000); transition:transform .15s ease; }.language-switch button:hover img { transform:scale(1.08); }
.nav-cta { position:absolute; z-index:3; left:18px; bottom:10px; color:#fff; text-decoration:none; font-weight:bold; padding:5px 9px; }
main { min-height:340px; padding:16px 20px 24px; background:url('/legacy-kathrine/site-bg.png') repeat-y; }
footer { min-height:53px; padding:12px 30px 0; color:#fff; text-align:center; text-shadow:1px 1px #000; background:url('/legacy-kathrine/site-bot.png') no-repeat top; font-size:10px; }
.eyebrow { margin:0 0 5px; color:#776e3d; font-size:10px; font-weight:bold; letter-spacing:.7px; }
.hero { display:grid; grid-template-columns:1fr 185px; gap:18px; margin-bottom:14px; padding:14px; border:2px solid var(--line); background:#e5e3d7; box-shadow:2px 2px #d0cdb4; }
.hero h1,.page-title h1 { margin:0 0 8px; color:var(--wine); font:bold 26px Georgia,serif; }.hero h1 em { color:#8f1111; font-style:normal; }.hero p { line-height:1.6; }.lead { font-size:13px; }
.button { display:inline-block; margin-top:7px; padding:6px 14px; border:1px solid #6b250d; background:linear-gradient(#bd5e35,#7a270e); color:#fff!important; font-weight:bold; text-decoration:none; text-shadow:1px 1px #3a1409; }.secondary { background:linear-gradient(#948e66,#615d42)!important; border-color:#45422e; }
.status-card { padding:13px; border:1px solid var(--line); background:#d0cdb4; text-align:center; }.status-card small { display:block; color:#635d3e; }.status-card strong { display:block; margin:7px 0; color:#44780e; font:bold 16px Georgia,serif; }.status-dot { display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:50%; background:#45a106; box-shadow:0 0 5px #45a106; }.online-number { font:bold 42px Georgia,serif; color:var(--wine); }
.status-card.offline strong { color:#9d2419; }.status-card.offline .status-dot { background:#b52b1f; box-shadow:0 0 5px #b52b1f; }
.page-title { margin:0 0 14px; padding:12px 15px; border:1px solid var(--line); background:#e5e3d7; }.page-title h1 { font-size:24px; }.page-title p { margin:5px 0 0; }
.cards,.forms { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }.forms { grid-template-columns:1fr 1fr; margin-top:0; }.cards article,.panel,.news article,form,.progress-card { padding:12px; border:1px solid var(--line); background:var(--light); box-shadow:2px 2px #d0cdb4; }.cards article,.progress-card,.command-panel { border-top:5px solid #7d7957; }.cards h2,.panel h2,form h2,.news h2,.progress-card h2 { margin:0 0 8px; color:var(--wine); font:bold 17px Georgia,serif; }.cards a,.center a,.list-row a { color:#8b1000; font-weight:bold; text-decoration:none; }.cards a:hover,.center a:hover,.list-row a:hover { text-decoration:underline; }.panel { margin-top:14px; }.news { display:grid; gap:12px; }.news article { margin:0; }.news time { color:#776e3d; font-size:10px; font-weight:bold; }
.character-list { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }.account-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }.logout { width:auto; background:#7a270e; }.single-form { max-width:440px; margin:auto; }.center { margin-top:14px; text-align:center; }.search { display:flex; gap:8px; max-width:620px; margin:0 auto 14px; }.search input { margin:0; }.search button { width:auto; margin:0; padding:7px 17px; }
.community-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px!important; }.community-tabs .button { margin-top:0; padding:5px 9px; font-size:11px; }.community-tabs .active { background:linear-gradient(#bd5e35,#7a270e)!important; border-color:#6b250d; }.ranking-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.ranking-panel { padding:12px; border:1px solid var(--line); border-top:5px solid #7d7957; background:var(--light); box-shadow:2px 2px #d0cdb4; }.ranking-panel h2 { margin:0 0 8px; color:var(--wine); font:bold 17px Georgia,serif; }.ranking-panel .list-row { font-size:11px; }.ranking-single { padding:0; border:0; background:transparent; box-shadow:none; }
.guild-controls,.guild-invites,.guild-message { margin-top:14px; padding:12px; border:1px solid var(--line); border-top:5px solid #7d7957; background:var(--light); box-shadow:2px 2px #d0cdb4; }.guild-controls h2,.guild-invites h2 { margin:0 0 8px; color:var(--wine); font:bold 17px Georgia,serif; }.guild-control { margin-top:12px; padding:12px; border:1px solid var(--line); background:#e5e3d7; }.guild-control h3 { margin:0; color:var(--wine); font: bold 16px Georgia,serif; }.guild-invites article { margin-top:10px; padding:10px; border:1px solid var(--line); background:#e5e3d7; }.guild-invites form { margin-top:8px; padding:0; border:0; box-shadow:none; background:transparent; }.guild-invites button { max-width:220px; }.guild-message { line-height:1.6; }
.list-row { display:flex; justify-content:space-between; gap:16px; margin:0; padding:8px 4px; border-bottom:1px solid #d0cdb4; }.list-row:last-child { border-bottom:0; }.list-row strong { color:var(--wine); }.list-row span { color:#5d5d50; text-align:right; }
label { display:block; margin-top:10px; font-weight:bold; } input,select,textarea,button { width:100%; margin-top:4px; padding:7px; border:1px solid #a7a284; border-radius:0; background:#fff; font:12px Verdana,Arial,sans-serif; } textarea { min-height:145px; resize:vertical; } button { margin-top:13px; border-color:#6b250d; background:linear-gradient(#bd5e35,#7a270e); color:#fff; font-weight:bold; cursor:pointer; }.notice { min-height:16px; font-size:11px; }.ok { color:#267317; }.error { color:#a00000; }
table { width:100%; border-collapse:collapse; border:1px solid var(--line); background:#fff; } th,td { padding:8px; text-align:left; border-bottom:1px solid #d0cdb4; } th { background:#77735a; color:#fff; font-family:Georgia,serif; }.rank { padding:8px 4px; border-bottom:1px solid #d0cdb4; }.guide-single { margin-top:14px; }.progress-card { display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:center; }.stage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.stage-grid p { margin:0; padding:8px; border:1px solid var(--line); background:#d0cdb4; text-align:center; }.stage-grid strong,.stage-grid span { display:block; }.stage-grid strong { color:var(--wine); }.stage-grid span { margin-top:3px; color:#44780e; font-size:11px; font-weight:bold; }.news-edit-list { display:grid; gap:12px; margin-top:14px; }.news-delete { margin-top:-6px; padding:10px 12px; background:#e5e3d7; }.news-delete button { margin-top:0; background:#6e2a1e; }
@media(max-width:820px) { .legacy-shell{width:100%;} header{height:250px;background-size:auto 245px;} header:after{background-size:100% 32px;} header:before{background-size:100% 42px;} nav{right:4px;bottom:48px;left:8px;overflow:hidden;} nav a{min-width:auto;padding:8px 5px;font-size:10px;} .hero,.progress-card{grid-template-columns:1fr;} .cards{grid-template-columns:1fr 1fr;} }
@media(max-width:560px) { main{padding:12px;} .cards,.forms,.ranking-grid{grid-template-columns:1fr;} .hero{padding:12px;} .stage-grid{grid-template-columns:repeat(2,1fr);} .search,.list-row{display:block;} .search button{margin-top:7px;} .list-row span{display:block;margin-top:4px;text-align:left;} }