/* up8 new design (port of up3.css): full rewrite for the unchanged legacy markup.
   Keeps the up3 essence (grey page, framed white box, blue links, black
   notice bar, blue Upload button, striped file list) and is responsive.
   Loaded only by index-newdesign.php; legacy stylesheets are not loaded. */
/* up8 has no subtitle image under the logo. */

:root {
  --page: #eeeeee;
  --box: #ffffff;
  --line: #d0d0d0;
  --line-strong: #999999;
  --text: #222222;
  --muted: #666666;
  --link: #1e90d6;
  --link-hover: #0b5f9a;
  --brand: #0a5ec2;
  --brand-dark: #073f86;
  --notice-bg: #000000;
  --notice-text: #ffffff;
  --stripe: #f7f7f7;
  --danger: #cc2200;
  --ok: #1a7f1a;
  --radius: 6px;
  --column: 760px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0 0 24px;
  background: var(--page);
  color: var(--text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; border: 0; }
iframe, ins, embed, object { max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--link-hover); text-decoration: underline; }
center { display: block; }
/* No doctype (quirks mode): make tables inherit text settings */
table { font-size: inherit; line-height: inherit; color: inherit; }
font[color="red"] { color: var(--danger); }
font[color="green"] { color: var(--ok); }

/* Header: wrapped by index-newdesign.php in .nd-head so it shares the
   content column; logo, tagline, black notice bar with the brand nav */
/* The header is the top band of the main box: same width as .title/.contents
   (the --column width minus the 8px gutters), white, framed, rounded on top. */
.nd-head {
  max-width: calc(var(--column) - 16px);
  margin: 12px auto 0;
  padding: 12px 14px 10px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--box);
  font-size: 12px;
  color: var(--muted);
}
.nd-head br { display: none; }
.nd-head > a:first-of-type { display: block; width: max-content; max-width: 100%; }
.nd-head > a:first-of-type img { display: block; width: 330px; }
.nd-head > img { display: block; width: 390px; margin: 2px 0 6px; }
/* Brand nav: tabs first (UP3 selected, UP8 beside it, TOP on the right),
   then the black legal strip. The legacy markup is <ul><li>warning</li>
   <center><li>UP3</li><li>UP8</li><li></li><li>TOP</li></center></ul>. */
.nd-head > ul { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; padding: 0; list-style: none; }
.nd-head > ul > li:first-child {
  order: 2;
  padding: 7px 12px;
  border-radius: var(--radius);
  background: var(--notice-bg);
  color: var(--notice-text) !important;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}
.nd-head > ul > center { order: 1; display: flex; align-items: flex-end; gap: 0; border-bottom: 2px solid var(--brand); }
.nd-head > ul > center > li { display: block; margin: 0; }
.nd-head > ul > center > li:empty { display: none; }
.nd-head > ul > center > li > a {
  display: block;
  margin-right: 4px;
  padding: 7px 16px 6px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(#ffffff, #e6e6e6);
  color: var(--text);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}
.nd-head > ul > center > li > a:hover { background: #fff; color: var(--brand); }
.nd-head > ul > center > li > a[href="http://up8.kouploader.jp/"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  cursor: default;
}
.nd-head > ul > center > li:last-child { margin-left: auto; }
.nd-head > ul > center > li:last-child > a {
  margin: 0;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--link);
  font-weight: normal;
}

/* Terms line: under the black strip inside the header, small and right-aligned */
.nd-head .nd-legal { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: right; }
.nd-head .nd-legal div { text-align: right !important; }
.nd-head .nd-legal a:first-child { font-weight: bold; margin-right: 4px; }

/* Outer legacy layout tables become a centred column */
table[width="728px"] { width: 100%; max-width: var(--column); margin: 0 auto; border-collapse: collapse; }
table[width="728px"] > tbody > tr > td { padding: 0 8px; }
table.wrap { width: 100%; border-collapse: separate; border-spacing: 0; }
/* The legacy rows carry bgcolor="#ffffff"; keep them transparent so only
   the rounded .title/.contents boxes paint (no white corners). */
table[width="728px"], table[width="728px"] > tbody > tr, table[width="728px"] > tbody > tr > td,
table.wrap, table.wrap > tbody > tr, table.wrap > tbody > tr > td { background: transparent !important; }
table.wrap > tbody > tr > td { padding: 0; }
.title {
  margin-top: 0;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: linear-gradient(#ffffff, #dddddd);
  font-weight: bold;
}
.contents {
  padding: 8px 12px 12px;
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--box);
}
.contents p { margin: 6px 0; text-align: center; }
.notice img { vertical-align: middle; }
.bandwidthInformation, .tool_bar {
  padding: 6px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: var(--page);
}

/* Inner legacy tables: plain blocks unless they are data tables */
.contents table:not(.table-striped),
.contents table:not(.table-striped) > tbody,
.contents table:not(.table-striped) > tbody > tr,
.contents table:not(.table-striped) > tbody > tr > td {
  display: block;
  width: auto;
  max-width: 100%;
}

/* Upload form */
.contents table[width="60%"]:has(form[action*="m=up"]) { width: 100%; max-width: none; }
/* The cell beside the upload form only held an ad slot (now stripped). */
.contents table:has(form[action*="m=up"]) > tbody > tr > td:not(:has(form)):not(:has(:not(br))) { display: none; }
form[action*="m=up"] p:empty { display: none; }
form[action*="m=up"] {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--page);
}
form[action*="m=up"] tr { display: grid !important; grid-template-columns: 110px 1fr; gap: 4px 8px; align-items: center; margin: 6px 0; }
form[action*="m=up"] tr:last-child { grid-template-columns: 1fr; }
form[action*="m=up"] td[colspan] { grid-column: 2; }
form[action*="m=up"] td { width: auto !important; padding: 0; text-align: left; }
form[action*="m=up"] > table { margin: 0; }
form[action*="m=up"] tr:nth-of-type(3) { grid-template-columns: 110px 1fr 70px 1fr; }

input[type="text"], input[type="password"], input[type="file"] {
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
}
input[type="text"]:focus, input[type="password"]:focus { outline: 2px solid #8cc8f5; border-color: var(--brand); }
input[type="submit"] {
  min-height: 40px;
  padding: 8px 22px;
  border: 1px solid var(--brand-dark);
  border-radius: var(--radius);
  background: linear-gradient(#2a86e8, var(--brand));
  color: #fff !important;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}
input[type="submit"]:hover { background: linear-gradient(#1f74cf, var(--brand-dark)) !important; }
form[action*="m=up"] input[type="submit"] { width: 100%; font-size: 18px; }
/* File picker. Without JS: a styled native control. With /n/js/up3.js: a
   drop zone whose transparent native input covers the whole zone. */
input[type="file"] { padding: 4px; cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 5px 12px;
  border: 1px solid var(--brand-dark);
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.nd-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 12px 14px;
  border: 2px dashed #8fb3d9;
  border-radius: var(--radius);
  background: #f5f9fe;
  text-align: center;
  transition: background .15s, border-color .15s;
}
.nd-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.nd-drop-icon {
  width: 28px; height: 28px; margin-bottom: 2px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a5ec2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E");
}
.nd-drop-main { font-weight: bold; color: var(--brand-dark); overflow-wrap: anywhere; }
.nd-drop-sub { font-size: 12px; color: var(--muted); }
.nd-drop:hover, .nd-drop.is-over { border-color: var(--brand); background: #e8f2fd; }
.nd-drop.is-focus { outline: 2px solid #8cc8f5; outline-offset: 2px; }
.nd-drop.has-file { border-style: solid; border-color: var(--brand); background: #fff; }
.nd-drop.too-big { border-color: var(--danger); background: #fff4f2; }
.nd-drop.too-big .nd-drop-sub { color: var(--danger); font-weight: bold; }

form[action*="m=up"] div { margin-top: 8px; color: var(--muted); font-size: 12px; text-align: left; }
form[action*="m=up"] div span[style*="float"] { float: none !important; display: block; text-align: right; }

/* Public file list: striped table on wide screens, cards on narrow ones */
table.table-striped[bgcolor] { width: 100%; border-collapse: collapse; background: var(--box); }
table.table-striped[bgcolor] tr[bgcolor="#eeeeee"] td { background: var(--stripe); font-weight: bold; }
table.table-striped[bgcolor] td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
table.table-striped[bgcolor] tr:nth-child(even) td { background: var(--stripe); }
table.table-striped[bgcolor] td:nth-child(1), table.table-striped[bgcolor] td:nth-child(3),
table.table-striped[bgcolor] td:nth-child(4), table.table-striped[bgcolor] td:nth-child(5) { white-space: nowrap; overflow-wrap: normal; }

/* File and delete pages */
.contents td[bgcolor="#eeeeee"][align="center"] { padding: 8px 0; }
.contents p[style*="background-color:black"] { padding: 6px 10px; border-radius: var(--radius); }
table.table-striped:not([bgcolor]) { width: 100%; max-width: 520px; margin: 0 auto; border-collapse: collapse; background: var(--box); }
table.table-striped:not([bgcolor]) td { padding: 8px; border-top: 1px solid var(--line); text-align: left; }
table.table-striped:not([bgcolor]) tr > td:first-child:not([colspan]) { width: 9em; color: var(--muted); white-space: nowrap; }
.dl_area { padding: 8px 0; text-align: center; }
.dl_area input[type="text"] { max-width: 280px; margin: 6px 0; font-size: 16px; }

/* Result, message and error boxes (genmsg / error / provideMessage) */
.contents table[width="60%"][bgcolor]:not(.table-striped):not(:has(form)) {
  max-width: 520px;
  margin: 16px auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--page);
  overflow: hidden;
}
.contents table[width="60%"][bgcolor]:not(.table-striped):not(:has(form)) td { padding: 14px 16px; text-align: center; }
.contents table[width="60%"][bgcolor]:not(:has(form)) font[color="red"]:first-child,
.contents table[width="60%"][bgcolor]:not(:has(form)) font[color="blue"]:first-child {
  display: block;
  margin: -14px -16px 10px;
  padding: 6px 12px;
  color: #fff;
  font-weight: bold;
  letter-spacing: .08em;
}
.contents table[width="60%"][bgcolor]:not(:has(form)) font[color="red"]:first-child { background: var(--danger); }
.contents table[width="60%"][bgcolor]:not(:has(form)) font[color="blue"]:first-child { background: var(--brand); }
input[type="button"] {
  min-height: 36px;
  padding: 6px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.contents form[action*="m=deldo"] { max-width: 420px; margin: 12px auto; }
.contents form[action*="m=deldo"] tr { display: grid !important; grid-template-columns: 7em 1fr; gap: 6px; align-items: center; margin: 6px 0; text-align: left; }
.contents form[action*="m=deldo"] input[type="submit"] { width: 100%; margin-top: 8px; background: linear-gradient(#e0533a, var(--danger)); border-color: #8a1700; }

.contents form[action*="m=deldo"] ~ *, .contents table:has(form[action*="m=deldo"]) font[color="red"] { font-weight: bold; }

/* Pager and footer */
.btn-group { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 0 !important; justify-content: center; }
.btn-group .btn { min-width: 34px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; text-align: center; }
.btn-group .btn.active { background: var(--brand); border-color: var(--brand-dark); color: #fff; }
.copy { margin-top: 12px; color: var(--muted); font-size: 11px; text-align: right; }
p:has(> a[href*="control.php"]) { text-align: right; font-size: 12px; }

@media (max-width: 760px) {
  body { font-size: 15px; }
  .nd-head { margin: 6px 6px 0; padding: 10px 10px 8px; }
  .nd-head > a:first-of-type img { width: 260px; }
  .nd-head > img { width: 300px; }
  .nd-head > ul > center > li > a { padding: 7px 10px 6px; font-size: 12px; }
  table[width="728px"], table[width="728px"] > tbody, table[width="728px"] > tbody > tr, table[width="728px"] > tbody > tr > td,
  table.wrap, table.wrap > tbody, table.wrap > tbody > tr, table.wrap > tbody > tr > td { display: block; width: 100%; }
  table[width="728px"] > tbody > tr > td { padding: 0 6px; }
  .contents { padding: 8px; overflow-x: hidden; }
  form[action*="m=up"] { padding: 10px; }
  form[action*="m=up"] tr, form[action*="m=up"] tr:nth-of-type(3) { grid-template-columns: 1fr; }
  form[action*="m=up"] td[colspan] { grid-column: 1; }
  input[type="text"], input[type="password"] { font-size: 16px; }

  table.table-striped[bgcolor], table.table-striped[bgcolor] > tbody { display: block; }
  table.table-striped[bgcolor] tr[bgcolor="#eeeeee"] { display: none; }
  table.table-striped[bgcolor] tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 2px 12px;
    padding: 10px 6px;
    border-top: 1px solid var(--line);
    background: var(--box);
  }
  table.table-striped[bgcolor] tr:nth-child(even) { background: var(--stripe); }
  table.table-striped[bgcolor] td { display: block; padding: 0; border: 0; background: transparent !important; }
  table.table-striped[bgcolor] td:nth-child(1) { grid-column: 1 / 3; font-weight: bold; }
  table.table-striped[bgcolor] td:nth-child(2) { grid-column: 1 / 4; grid-row: 2; }
  table.table-striped[bgcolor] td:nth-child(3), table.table-striped[bgcolor] td:nth-child(4) { grid-row: 3; color: var(--muted); font-size: 12px; }
  table.table-striped[bgcolor] td:nth-child(5) { grid-column: 3; grid-row: 1; text-align: right; }
  table.table-striped[bgcolor] td:nth-child(3)::before { content: "\30B5\30A4\30BA  "; }
  table.table-striped[bgcolor] td:nth-child(4)::before { content: "\65E5\4ED8  "; }

  table.table-striped:not([bgcolor]), table.table-striped:not([bgcolor]) > tbody { display: block; }
  table.table-striped:not([bgcolor]) tr { display: grid; grid-template-columns: minmax(6em, max-content) 1fr; column-gap: 8px; border-top: 1px solid var(--line); }
  table.table-striped:not([bgcolor]) td { border: 0; }
  table.table-striped:not([bgcolor]) td[colspan] { grid-column: 1 / 3; }
  .dl_area input[type="text"], .dl_area input[type="submit"] { width: 100%; max-width: none; }
}