/* SOURCE_FILE: app.css
 * MODULE: Web/UI
 * DETAIL_DESIGN_BOOK: X AUTO 詳細設計書
 * DETAIL_DESIGN_BLOCK: XAUT-DD-0001 Rev.1.0 Section 10 UI / Component 詳細
 * VERSION: v0.5
 * AUTHORITATIVE_PROJECT: CLIENT
 * IMPLEMENTATION_SIDE: CLIENT
 * SCOPE: FULL_FILE
 */
:root{
  --color-primary:#111111;--color-bg:#f6f7f8;--color-surface:#ffffff;--color-border:#dedfe2;
  --color-text:#17181a;--color-muted:#686b70;--color-danger:#b42318;--color-ok:#087443;--radius:16px;
  --shadow:0 8px 28px rgba(0,0,0,.06);--max:1120px;
}
*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;line-height:1.55}
button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.boot-card{max-width:520px;margin:16vh auto;padding:32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);text-align:center}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{width:min(100%,460px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.brand{font-size:22px;font-weight:800}.sub{color:var(--color-muted);font-size:14px;margin-top:4px}.segmented{display:flex;gap:6px;background:#f0f1f2;border-radius:12px;padding:4px;margin:22px 0}.segmented button{flex:1;border:0;background:transparent;padding:10px;border-radius:9px}.segmented button.active{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.field{display:grid;gap:6px;margin:14px 0}.field label{font-size:13px;font-weight:700}.field input,.field textarea,.field select{width:100%;border:1px solid var(--color-border);border-radius:11px;padding:12px;background:#fff;outline:none}.field input:focus,.field textarea:focus{border-color:#9b9da2;box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.btn{border:1px solid var(--color-border);background:#fff;border-radius:11px;padding:10px 14px;font-weight:700}.btn.primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn.danger{color:var(--color-danger)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.full{width:100%}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:20px;background:#fff;border-right:1px solid var(--color-border)}.nav{display:grid;gap:6px;margin-top:24px}.nav button{border:0;background:transparent;text-align:left;padding:11px 12px;border-radius:10px}.nav button.active{background:#f0f1f2;font-weight:800}.sidebar-foot{position:absolute;bottom:18px;left:20px;right:20px}.main{padding:26px}.main-inner{max-width:var(--max);margin:0 auto}.topline{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px}.topline h1{font-size:26px;margin:0}.muted{color:var(--color-muted)}
.grid{display:grid;gap:14px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.02)}.metric{font-size:28px;font-weight:800;margin-top:6px}.card h2,.card h3{margin:0 0 10px}.status{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:#f0f1f2;font-size:12px;font-weight:700}.status.ok{color:var(--color-ok);background:#eaf7f0}.status.bad{color:var(--color-danger);background:#fff0ef}
.post-list{display:grid;gap:12px}.post-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:16px}.post-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.post-card textarea{min-height:100px}.post-meta{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.flash{padding:12px 14px;border-radius:11px;background:#eef6ff;margin-bottom:14px}.flash.error{background:#fff0ef;color:var(--color-danger)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--color-border);padding:11px;text-align:left;vertical-align:top;font-size:14px}.empty{padding:30px;text-align:center;color:var(--color-muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.danger-zone{border-color:#f3c7c2}.inline-note{font-size:13px;color:var(--color-muted);margin-top:8px}.hide{display:none!important}
@media(max-width:820px){.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--color-border);padding:12px}.sidebar .brand{font-size:18px}.nav{display:flex;overflow:auto;margin-top:10px}.nav button{white-space:nowrap}.sidebar-foot{position:static;margin-top:8px}.main{padding:16px}.grid.cards{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.topline{align-items:flex-start}.post-meta{grid-template-columns:1fr}}
@media(max-width:430px){.grid.cards{grid-template-columns:1fr}.auth-card{padding:20px}.main{padding:12px}.card,.post-card{padding:14px}.topline h1{font-size:22px}}

/* v2.6 setup diagnostics */
.setup-shell{max-width:1100px;margin:32px auto;padding:0 16px 48px}.setup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}.setup-item{border:1px solid #d7dbe0;border-radius:12px;padding:14px;background:#fff}.check-list{line-height:1.9;padding-left:20px}

/* v2.7 release control center */
.section-gap{margin-top:14px}.evidence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}.progress-track{height:10px;border-radius:999px;background:#eceef0;overflow:hidden;margin:12px 0 6px}.progress-bar{height:100%;background:var(--color-primary);transition:width .2s ease}.action-list{display:grid;gap:10px;padding-left:22px}.action-list code{white-space:normal;word-break:break-word}.tiny{font-size:11px;color:var(--color-muted);margin-top:7px}

/* =========================================================
   One Mate AI for X
   COSMIC UI v1.0 PREVIEW
   UI ONLY / NO BACKEND CHANGE
   ========================================================= */

:root{
  --oma-bg:#040b18;
  --oma-bg-2:#071329;
  --oma-panel:rgba(10,24,48,.72);
  --oma-panel-strong:rgba(8,20,42,.90);
  --oma-line:rgba(84,187,255,.18);
  --oma-line-strong:rgba(73,202,255,.36);
  --oma-text:#f7fbff;
  --oma-muted:#8fa6c3;
  --oma-blue:#1d8fff;
  --oma-cyan:#18ddff;
  --oma-danger:#ff6577;
  --oma-success:#48dfa2;
  --oma-radius:20px;
  --oma-shadow:0 18px 55px rgba(0,0,0,.32);
}

*{
  box-sizing:border-box;
}

html,
body{
  min-height:100%;
}

body{
  margin:0;
  color:var(--oma-text);
  background:
    radial-gradient(circle at 12% 15%, rgba(29,143,255,.14), transparent 25%),
    radial-gradient(circle at 82% 12%, rgba(24,221,255,.09), transparent 23%),
    radial-gradient(circle at 72% 92%, rgba(29,143,255,.08), transparent 30%),
    linear-gradient(145deg,#020712 0%,#061124 52%,#020712 100%);
  font-family:
    -apple-system,BlinkMacSystemFont,
    "Segoe UI","Hiragino Sans","Noto Sans JP",
    sans-serif;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.40;
  background-image:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.65) 0 1px,transparent 1.5px),
    radial-gradient(circle at 34% 72%,rgba(255,255,255,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 52% 28%,rgba(255,255,255,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 62%,rgba(255,255,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 88% 24%,rgba(255,255,255,.38) 0 1px,transparent 1.5px);
  background-size:
    240px 240px,
    300px 300px,
    360px 360px,
    280px 280px,
    420px 420px;
}

body::after{
  content:"";
  position:fixed;
  left:18%;
  right:-8%;
  bottom:-31vw;
  height:46vw;
  min-height:310px;
  pointer-events:none;
  z-index:-1;
  border-radius:50% 50% 0 0;
  border-top:1px solid rgba(91,207,255,.34);
  box-shadow:
    0 -10px 70px rgba(13,131,255,.10),
    0 -2px 25px rgba(53,216,255,.10);
  opacity:.58;
}

/* ---------- Layout ---------- */

.layout{
  min-height:100vh;
  display:grid;
  grid-template-columns:255px minmax(0,1fr);
  background:transparent;
}

.sidebar{
  min-height:100vh;
  padding:28px 20px 22px;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg,rgba(3,12,28,.96),rgba(4,15,34,.88));
  border-right:1px solid rgba(84,187,255,.14);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:18px 0 50px rgba(0,0,0,.20);
}

.brand{
  color:#fff;
  font-size:21px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.035em;
  margin:3px 6px 2px;
  text-shadow:0 0 24px rgba(55,194,255,.20);
}

.sub{
  margin:7px 6px 28px;
  color:#6d8eb3;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.nav button,
.nav a{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  padding:0 15px;
  border:1px solid transparent;
  border-radius:14px;
  color:#91a8c5;
  background:transparent;
  font-weight:700;
  text-decoration:none;
  transition:.18s ease;
}

.nav button:hover,
.nav a:hover{
  color:#eaf8ff;
  border-color:rgba(74,191,255,.18);
  background:rgba(37,121,200,.09);
}

.nav .active,
.nav button.active,
.nav a.active{
  color:#fff;
  border-color:rgba(67,204,255,.26);
  background:
    linear-gradient(135deg,rgba(22,120,255,.20),rgba(15,218,255,.09));
  box-shadow:
    inset 0 0 24px rgba(26,152,255,.07),
    0 0 22px rgba(22,143,255,.08);
}

.sidebar-footer{
  margin-top:auto;
  padding-top:24px;
}

.main{
  min-width:0;
  background:transparent;
}

.main-inner{
  width:min(1180px,calc(100% - 52px));
  margin:0 auto;
  padding:42px 0 70px;
}

/* ---------- Page headings ---------- */

.topline{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}

.topline h1{
  margin:0;
  font-size:31px;
  line-height:1.18;
  letter-spacing:-.045em;
  color:#fff;
}

.topline .muted{
  margin-top:7px;
}

h1,h2,h3{
  color:#fff;
}

h2{
  letter-spacing:-.025em;
}

.muted{
  color:var(--oma-muted)!important;
}

/* ---------- Cards ---------- */

.card{
  border:1px solid var(--oma-line);
  border-radius:var(--oma-radius);
  background:
    linear-gradient(145deg,rgba(13,30,59,.78),rgba(6,18,39,.69));
  box-shadow:
    var(--oma-shadow),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.card:hover{
  border-color:rgba(72,197,255,.26);
}

.grid.cards{
  gap:15px;
}

.metric{
  color:#fff;
  font-size:31px;
  font-weight:800;
  line-height:1;
  margin-top:9px;
  text-shadow:0 0 24px rgba(41,179,255,.12);
}

.split{
  gap:16px;
}

/* ---------- Buttons ---------- */

.btn{
  min-height:44px;
  padding:0 17px;
  border-radius:12px;
  border:1px solid rgba(78,183,255,.22);
  background:rgba(12,30,57,.72);
  color:#dff7ff;
  font-weight:750;
  box-shadow:none;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(64,216,255,.42);
  background:rgba(16,47,83,.78);
}

.btn.primary{
  border-color:rgba(38,201,255,.40);
  color:#03101d;
  background:
    linear-gradient(100deg,var(--oma-blue),var(--oma-cyan));
  box-shadow:
    0 10px 30px rgba(20,159,255,.22),
    0 0 24px rgba(36,214,255,.10);
}

.btn.primary:hover{
  box-shadow:
    0 12px 35px rgba(20,159,255,.30),
    0 0 28px rgba(36,214,255,.16);
}

.btn.danger{
  color:#ffadb8;
  border-color:rgba(255,101,119,.26);
  background:rgba(96,25,39,.14);
}

.btn.full{
  width:100%;
}

/* ---------- Forms ---------- */

.field label{
  color:#c6d8eb;
  font-size:13px;
  font-weight:700;
  margin-bottom:7px;
}

input,
textarea,
select{
  width:100%;
  color:#f7fbff;
  border:1px solid rgba(91,182,255,.19);
  border-radius:13px;
  background:rgba(2,13,29,.55);
  outline:none;
  transition:.16s ease;
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(42,209,255,.55);
  box-shadow:
    0 0 0 3px rgba(31,164,255,.09),
    0 0 26px rgba(22,181,255,.07);
}

input::placeholder,
textarea::placeholder{
  color:#637b99;
}

/* ---------- Status ---------- */

.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  color:#c9e8ff;
  background:rgba(59,145,212,.12);
  border:1px solid rgba(85,187,255,.15);
  font-size:12px;
  font-weight:800;
}

.status.posted,
.status.Posted{
  color:#9af2cb;
  background:rgba(40,191,128,.10);
  border-color:rgba(72,223,162,.18);
}

.status.failed,
.status.Failed{
  color:#ffadb8;
  background:rgba(255,101,119,.09);
  border-color:rgba(255,101,119,.20);
}

.status.scheduled,
.status.Scheduled{
  color:#9adfff;
  background:rgba(31,159,255,.10);
  border-color:rgba(57,194,255,.20);
}

/* ---------- Weekly posts ---------- */

.post-list{
  display:grid;
  gap:15px;
}

.post-list .card{
  position:relative;
  overflow:hidden;
}

.post-list .card::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(var(--oma-blue),var(--oma-cyan));
  opacity:.55;
}

.inline-note{
  color:#829ab8;
  border:1px solid rgba(75,174,255,.12);
  border-radius:13px;
  background:rgba(8,25,48,.45);
}

/* ---------- Tables / History ---------- */

.table-wrap{
  overflow:auto;
  border-radius:17px;
  border:1px solid rgba(78,182,255,.14);
  background:rgba(4,15,31,.40);
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th{
  color:#7795b7;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:none;
  background:rgba(8,24,47,.72);
}

.table th,
.table td{
  padding:15px 14px;
  border-bottom:1px solid rgba(73,166,230,.10);
}

.table td{
  color:#d9e7f6;
}

.table tbody tr:hover{
  background:rgba(30,124,203,.06);
}

/* ---------- Account ---------- */

.danger-zone{
  border-color:rgba(255,101,119,.20)!important;
  background:
    linear-gradient(145deg,rgba(67,22,36,.28),rgba(18,18,35,.65))!important;
}

/* ---------- Auth ---------- */

.auth-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:36px 22px;
}

.auth-card{
  width:min(470px,100%);
  padding:30px;
  border:1px solid rgba(74,194,255,.22);
  border-radius:24px;
  color:#fff;
  background:
    linear-gradient(145deg,rgba(10,29,58,.90),rgba(4,17,37,.92));
  box-shadow:
    0 30px 90px rgba(0,0,0,.40),
    0 0 50px rgba(20,155,255,.08);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.auth-card .brand{
  margin:0 0 5px;
  font-size:25px;
}

.segment{
  border:1px solid rgba(74,180,255,.13);
  background:rgba(2,13,29,.52);
}

.segment button{
  color:#8ca8c5;
}

.segment button.active{
  color:#fff;
  background:rgba(29,143,255,.16);
  box-shadow:inset 0 0 20px rgba(24,221,255,.05);
}

/* ---------- Scrollbar ---------- */

*{
  scrollbar-width:thin;
  scrollbar-color:#1a5982 transparent;
}

*::-webkit-scrollbar{
  width:8px;
  height:8px;
}

*::-webkit-scrollbar-thumb{
  background:#174c70;
  border-radius:999px;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px){
  .layout{
    grid-template-columns:210px minmax(0,1fr);
  }

  .main-inner{
    width:min(100% - 28px,1000px);
    padding-top:28px;
  }

  .sidebar{
    padding-left:14px;
    padding-right:14px;
  }
}

@media (max-width: 720px){
  .layout{
    display:block;
  }

  .sidebar{
    min-height:auto;
    position:sticky;
    top:0;
    z-index:20;
    padding:12px 13px;
    border-right:0;
    border-bottom:1px solid rgba(84,187,255,.14);
  }

  .brand{
    font-size:17px;
  }

  .sub{
    display:none;
  }

  .nav{
    margin-top:11px;
    display:flex;
    flex-direction:row;
    gap:7px;
    overflow-x:auto;
    padding-bottom:3px;
  }

  .nav button,
  .nav a{
    width:auto;
    min-width:max-content;
    min-height:39px;
    padding:0 12px;
  }

  .sidebar-footer{
    display:none;
  }

  .main-inner{
    width:calc(100% - 24px);
    padding:25px 0 54px;
  }

  .topline{
    flex-direction:column;
  }

  .topline h1{
    font-size:27px;
  }

  .grid.cards,
  .split{
    grid-template-columns:1fr!important;
  }
}


/* === OneMate AI official brand logo === */
.oma-brand-logo{
  display:block;
  width:100%;
  max-width:190px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(29,216,255,.18));
}

.auth-card .brand .oma-brand-logo{
  max-width:300px;
  margin:0 auto 10px;
}

.sidebar .brand .oma-brand-logo{
  max-width:185px;
  margin:0;
}
/* === OneMate AI for X brand lockup === */
.oma-for-x{
  margin-top:2px;
  text-align:center;
  font-size:15px;
  font-weight:600;
  letter-spacing:.38em;
  line-height:1.2;
  color:#dff7ff;
  text-shadow:0 0 12px rgba(29,216,255,.42);
}
.auth-card .brand .oma-for-x{
  font-size:16px;
  margin-top:3px;
}
.sidebar .brand .oma-for-x{
  font-size:12px;
  margin-top:1px;
  letter-spacing:.30em;
}
/* === for X side lines === */
.oma-for-x{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
}
.oma-for-x::before,
.oma-for-x::after{
  content:"";
  display:block;
  width:28px;
  height:1px;
  background:linear-gradient(90deg,transparent,#29d8ff);
  box-shadow:0 0 8px rgba(29,216,255,.55);
}
.oma-for-x::after{
  background:linear-gradient(90deg,#29d8ff,transparent);
}
.sidebar .oma-for-x{
  gap:6px;
}
.sidebar .oma-for-x::before,
.sidebar .oma-for-x::after{
  width:18px;
}
/* === subtle X accent === */
.oma-x-accent{
  display:inline-block;
  margin-left:2px;
  font-size:1.18em;
  font-weight:800;
  color:#66e7ff;
  text-shadow:
    0 0 6px rgba(102,231,255,.55),
    0 0 12px rgba(29,216,255,.28);
  transform:translateY(-1px);
}
.sidebar .oma-x-accent{
  font-size:1.16em;
}

/* === HOME ACTION POLISH === */
#view .card .btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

#view #toWeek{
  min-width:180px;
  padding:12px 18px;
  font-weight:800;
}

#view #togglePause,
#view #xConnect,
#view #xDisconnect{
  min-width:145px;
}

@media (min-width:900px){
  #view .card .btn-row{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr;
    gap:10px;
  }

  #view #xDisconnect{
    grid-column:1 / 2;
    justify-self:start;
  }
}

@media (max-width:700px){
  #view .card .btn-row{
    display:grid;
    grid-template-columns:1fr;
  }

  #view #toWeek,
  #view #togglePause,
  #view #xConnect,
  #view #xDisconnect{
    width:100%;
    min-width:0;
  }
}


/* === WEEK POSTS COSMIC POLISH === */

.post-list{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.post-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(29,216,255,.07),transparent 32%),
    rgba(7,24,49,.88) !important;
  border:1px solid rgba(84,187,255,.20) !important;
  border-radius:20px !important;
  padding:20px !important;
  color:#f7fbff !important;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.post-card .post-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.post-card .post-head strong{
  font-size:18px;
  font-weight:800;
  color:#fff;
}

.post-card .status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(84,187,255,.25);
  background:rgba(29,143,255,.10);
  color:#bfeaff;
  font-size:12px;
  font-weight:800;
}

.post-card .field label{
  display:block;
  margin-bottom:7px;
  color:#8fa6c3;
  font-size:13px;
  font-weight:700;
}

.post-card .post-body,
.post-card .post-time{
  width:100%;
  box-sizing:border-box;
  background:rgba(2,14,34,.70) !important;
  border:1px solid rgba(84,187,255,.20) !important;
  color:#f7fbff !important;
  border-radius:13px !important;
}

.post-card .post-body{
  min-height:125px;
  padding:14px;
  line-height:1.7;
  resize:vertical;
}

.post-card .post-time{
  min-height:46px;
  padding:10px 12px;
}

.post-card .post-meta{
  margin-top:14px;
}

.post-card .btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px;
}

.post-card .save-post,
.post-card .ai-post,
.post-card .cancel-post{
  min-width:110px;
}

.post-card .ai-post{
  border-color:rgba(29,216,255,.34);
}

.post-card .cancel-post{
  margin-left:auto;
}

@media (max-width:700px){
  .post-card{
    padding:16px !important;
  }

  .post-card .btn-row{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .post-card .save-post,
  .post-card .ai-post,
  .post-card .cancel-post{
    width:100%;
    min-width:0;
    margin-left:0;
  }

  .post-card .cancel-post{
    grid-column:1 / -1;
  }
}


/* === SETTINGS COSMIC POLISH === */

#settingsForm .field{
  margin-top:16px;
}

#settingsForm .field label{
  display:block;
  margin-bottom:8px;
  color:#a9bdd6;
  font-size:13px;
  font-weight:700;
}

#settingsForm input,
#settingsForm textarea{
  display:block;
  width:100%;
  box-sizing:border-box;
  background:rgba(2,14,34,.78) !important;
  color:#f7fbff !important;
  border:1px solid rgba(84,187,255,.22) !important;
  border-radius:14px !important;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .18s ease,box-shadow .18s ease;
}

#settingsForm input{
  min-height:52px;
  padding:12px 14px;
}

#settingsForm textarea{
  min-height:130px;
  padding:14px;
  line-height:1.65;
  resize:vertical;
}

#settingsForm input:focus,
#settingsForm textarea:focus{
  border-color:rgba(29,216,255,.65) !important;
  box-shadow:
    0 0 0 3px rgba(29,216,255,.08),
    inset 0 1px 0 rgba(255,255,255,.03);
}

#settingsForm input::placeholder,
#settingsForm textarea::placeholder{
  color:#7188a4;
  opacity:1;
}

#settingsForm .card{
  margin-bottom:16px;
}

#settingsForm button.primary{
  min-width:170px;
  min-height:48px;
  margin-top:4px;
  font-weight:800;
}

@media(max-width:700px){
  #settingsForm button.primary{
    width:100%;
  }
}


/* === HISTORY COSMIC POLISH === */

.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table-wrap .table{
  width:100%;
  min-width:760px;
  table-layout:fixed;
  border-collapse:collapse;
}

.table-wrap .table th,
.table-wrap .table td{
  padding:14px 12px;
  vertical-align:top;
  text-align:left;
  line-height:1.55;
}

.table-wrap .table th:nth-child(1),
.table-wrap .table td:nth-child(1){
  width:110px;
}

.table-wrap .table th:nth-child(2),
.table-wrap .table td:nth-child(2){
  width:170px;
}

.table-wrap .table th:nth-child(3),
.table-wrap .table td:nth-child(3){
  width:auto;
  min-width:300px;
  word-break:normal;
  overflow-wrap:anywhere;
}

.table-wrap .table th:nth-child(4),
.table-wrap .table td:nth-child(4){
  width:120px;
}

.table-wrap .table tbody tr{
  border-top:1px solid rgba(84,187,255,.14);
}

.table-wrap .table .status{
  white-space:nowrap;
}

/* === Cosmic flash notification === */
.flash{
  margin:0 0 18px;
  padding:14px 18px;
  border:1px solid rgba(41,216,255,.34);
  border-radius:14px;
  background:rgba(5,25,48,.92);
  color:#dffbff;
  font-weight:700;
  line-height:1.5;
  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.flash:not(.error){
  border-color:rgba(41,216,255,.42);
  box-shadow:
    0 0 20px rgba(41,216,255,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.flash.error{
  border-color:rgba(255,105,125,.42);
  background:rgba(52,15,29,.90);
  color:#ffd7df;
}

/* === ONBOARDING FINAL UI === */

.onboarding-card{
  max-width:760px;
  padding:24px !important;
}

.ob-progress{
  margin-bottom:24px;
}

.ob-progress-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  color:#9db6d6;
  font-size:13px;
  font-weight:700;
}

.ob-progress-bar{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(84,187,255,.12);
}

.ob-progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#249dff,#1dd8ff);
}

.ob-help{
  margin:8px 0 22px;
  line-height:1.7;
}

.ob-field{
  margin-top:20px;
}

.ob-field > label{
  display:block;
  margin-bottom:9px;
  font-weight:700;
}

.onboarding-card input[type="text"],
.onboarding-card textarea,
.ob-select{
  width:100%;
  box-sizing:border-box;
  background:rgba(2,14,34,.82) !important;
  color:#f7fbff !important;
  border:1px solid rgba(84,187,255,.25) !important;
  border-radius:14px !important;
  outline:none;
}

.onboarding-card input[type="text"],
.ob-select{
  min-height:52px;
  padding:12px 14px;
}

.onboarding-card textarea{
  min-height:120px;
  padding:14px;
  line-height:1.65;
  resize:vertical;
}

.ob-choice-list{
  display:grid;
  gap:11px;
}

.ob-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}

.ob-choice{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:52px;
  padding:11px 14px;
  box-sizing:border-box;
  border:1px solid rgba(84,187,255,.20);
  border-radius:13px;
  background:rgba(4,24,52,.68);
  cursor:pointer;
  line-height:1.45;
}

.ob-choice:hover{
  border-color:rgba(41,216,255,.48);
}

.ob-choice input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0;
  accent-color:#29d8ff;
}

.ob-choice span{
  min-width:0;
  font-weight:650;
}

.ob-purpose-list{
  margin-top:16px;
}

.ob-select-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.ob-ai-box{
  margin:18px 0;
  padding:20px;
  border:1px solid rgba(41,216,255,.28);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0%,rgba(29,216,255,.08),transparent 40%),
    rgba(4,24,52,.72);
}

.ob-ai-box b{
  display:block;
  margin-bottom:6px;
  font-size:17px;
}

.ob-ai-box p{
  margin:0 0 16px;
  color:#9db6d6;
}

.ob-summary{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.ob-summary > div{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:16px;
  padding:14px 16px;
  border:1px solid rgba(84,187,255,.18);
  border-radius:12px;
  background:rgba(4,24,52,.62);
}

.ob-summary span{
  color:#9db6d6;
}

.ob-summary b{
  font-weight:700;
  line-height:1.55;
}

.ob-actions{
  margin-top:24px;
}

.ob-hidden{
  display:none !important;
}

@media (max-width:700px){
  .ob-choice-grid,
  .ob-select-grid{
    grid-template-columns:1fr;
  }

  .ob-summary > div{
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* IMG-IMP-005 image picker polish */
#view .img005-picker-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:180px;
  min-height:50px;
  padding:0 24px;
  margin:0 auto;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
}
#view .btn-row:has(.img005-picker-btn){
  justify-content:center;
}

/* IMG-IMP-005 picker final sizing */
#view .btn-row:has(.img005-picker-btn){
  display:flex;
  justify-content:center;
  width:100%;
}
#view .btn-row .img005-picker-btn{
  width:200px !important;
  min-width:200px !important;
  max-width:200px !important;
  min-height:50px;
  flex:0 0 200px !important;
  margin:0 auto !important;
  padding:0 20px;
  box-sizing:border-box;
}

/* IMG-IMP-005 picker alignment final */
#view .btn-row .img005-picker-btn{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:1 1 100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 !important;
}

/* === POST MEDIA UI 2026-09-14 === */
.post-card .post-media-add{
  font-size:12px !important;
  padding:7px 11px !important;
  min-height:36px !important;
  width:auto !important;
  min-width:0 !important;
}




/* === POST MEDIA HINT 2026-09-14 === */
.post-media-hint{
  margin-top:7px;
  color:#8fa6c3;
  font-size:11px;
  line-height:1.5;
}

/* === POST MEDIA HINT LAYOUT FINAL === */
.post-card .btn-row:has(.post-media-add){
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:0 !important;
}

.post-card .post-media-add{
  width:auto !important;
}

.post-card .post-media-hint{
  display:block !important;
  width:100% !important;
  margin:7px 0 0 0 !important;
  font-size:11px !important;
  line-height:1.5 !important;
  text-align:left !important;
}

/* === POST MEDIA HINT MOBILE ONE LINE === */
@media (max-width:700px){
  .post-card .post-media-hint{
    width:auto !important;
    max-width:100% !important;
    font-size:9px !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
    margin-top:7px !important;
  }
}

/* === MOBILE POST TIME WIDTH FIX === */
@media (max-width:700px){
  .post-card .post-meta,
  .post-card .post-time,
  .post-card .post-time input,
  .post-card input[type="datetime-local"]{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .post-card .post-meta{
    overflow:hidden !important;
  }
}

/* === MOBILE POST CARD WIDTH FINAL === */
@media (max-width:700px){
  .post-card,
  .post-card .field,
  .post-card .post-meta{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .post-card .post-time,
  .post-card input[type="datetime-local"]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* === IOS DATETIME FIT FINAL === */
@media (max-width:700px){
  .post-card input.post-time[type="datetime-local"]{
    display:block !important;
    width:-webkit-fill-available !important;
    max-width:-webkit-fill-available !important;
    min-width:0 !important;
    -webkit-min-logical-width:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }
}

/* === WEEK HEADER MOBILE ORGANIZE === */
.week-status-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:8px 15px !important;
  border-radius:999px !important;
  font-size:14px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
.week-status-pill.preparing{
  color:#9fdfff !important;
  border:1px solid rgba(55,190,255,.55) !important;
  background:rgba(55,190,255,.10) !important;
}
.week-status-pill.approved{
  color:#baff72 !important;
  border:1px solid rgba(170,255,90,.55) !important;
  background:rgba(170,255,90,.10) !important;
}
.week-summary-line{
  white-space:nowrap !important;
}

@media (max-width:700px){
  .topline .muted{
    font-size:12px !important;
  }
  .week-summary-line{
    display:block !important;
    white-space:nowrap !important;
    font-size:11px !important;
  }
  .topline .btn-row{
    align-items:center !important;
    gap:8px !important;
  }
}


/* === HOME ACTION UI V2 === */

.home-action-card{
  cursor:pointer !important;
  position:relative !important;
}

.home-action-open{
  margin-top:5px;
  font-size:11px;
  color:#8fdfff;
}

.home-action-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,8,24,.74);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.home-action-dialog{
  width:min(620px,100%);
  max-height:82vh;
  overflow:auto;
  padding:18px;
  border:1px solid rgba(55,190,255,.42);
  border-radius:22px;
  background:rgba(4,23,48,.98);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

.home-action-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.home-action-head h2{
  margin:0 0 4px;
}

.home-action-close{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  padding:0 !important;
  font-size:22px !important;
}

.home-action-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.home-action-item{
  width:100%;
  padding:14px;
  border:1px solid rgba(55,190,255,.28);
  border-radius:16px;
  background:rgba(7,35,68,.88);
  color:#fff;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.home-action-item-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.home-action-status{
  padding:4px 9px;
  border:1px solid rgba(255,145,90,.45);
  border-radius:999px;
  background:rgba(255,120,70,.10);
  color:#ffd0b0;
  font-size:11px;
  font-weight:800;
}

.home-action-date{
  margin-bottom:7px;
  color:#aec6df;
  font-size:13px;
}

.home-action-guide{
  color:#eef7ff;
  font-size:13px;
  line-height:1.55;
}

.home-action-link{
  margin-top:9px;
  color:#66dfff;
  font-size:12px;
  font-weight:800;
}

.home-action-empty{
  padding:24px 12px;
  text-align:center;
  color:#9fb8d8;
}

.home-action-target{
  outline:2px solid rgba(55,220,255,.95) !important;
  box-shadow:0 0 0 5px rgba(55,220,255,.12),
             0 0 36px rgba(55,220,255,.35) !important;
}

@media(max-width:700px){
  .home-action-overlay{
    align-items:flex-end;
    padding:12px;
  }

  .home-action-dialog{
    width:100%;
    padding:15px;
    border-radius:22px 22px 14px 14px;
  }
}


/* ===== NEXT WEEK BADGES HORIZONTAL FIX ===== */
@media (max-width: 700px){
  .week-summary-line + span{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    margin-left:0 !important;
    margin-top:8px !important;
    width:max-content !important;
    max-width:100% !important;
  }

  .week-summary-line + span > span{
    flex:0 0 auto !important;
    display:inline-flex !important;
    white-space:nowrap !important;
  }
}


/* ===== NEXT WEEK USAGE BADGES SIDE BY SIDE ===== */
.nextweek-usage-badges{
    display:inline-flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
    margin-left:10px !important;
    width:auto !important;
    white-space:nowrap !important;
    vertical-align:middle !important;
}

.nextweek-usage-badges > span{
    display:inline-flex !important;
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
    padding:4px 10px !important;
    border:1px solid rgba(55,190,255,.35) !important;
    border-radius:999px !important;
    font-size:12px !important;
    line-height:1.4 !important;
    color:#9fdfff !important;
    white-space:nowrap !important;
}

@media (max-width:700px){
    .nextweek-usage-badges{
        display:inline-flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        gap:8px !important;
        margin-left:10px !important;
        white-space:nowrap !important;
    }

    .nextweek-usage-badges > span{
        display:inline-flex !important;
        flex:0 0 auto !important;
        width:auto !important;
        margin:0 !important;
        white-space:nowrap !important;
    }
}

/* POST SETTING STATUS COLORS */
.post-card .status.setting-set{
  color:#67e8f9;
  background:rgba(34,211,238,.14);
  border-color:rgba(34,211,238,.48);
  box-shadow:0 0 14px rgba(34,211,238,.10);
}
.post-card .status.setting-unset{
  color:#fdba74;
  background:rgba(249,115,22,.14);
  border-color:rgba(249,115,22,.48);
  box-shadow:0 0 14px rgba(249,115,22,.10);
}

/* REAPPROVAL STATUS */
.post-card .status.setting-reapproval{
  color:#ffd36a;
  background:rgba(255,193,7,.14);
  border:1px solid rgba(255,193,7,.48);
  box-shadow:0 0 14px rgba(255,193,7,.10);
}


/* CURRENT WEEK STATUS COLORS */
.post-card .status.current-scheduled{
  color:#67e8f9;
  background:rgba(34,211,238,.14);
  border-color:rgba(34,211,238,.48);
  box-shadow:0 0 14px rgba(34,211,238,.10);
}
.post-card .status.current-posted{
  color:#86efac;
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.48);
  box-shadow:0 0 14px rgba(34,197,94,.10);
}
.post-card .status.current-unposted{
  color:#fdba74;
  background:rgba(249,115,22,.14);
  border-color:rgba(249,115,22,.48);
  box-shadow:0 0 14px rgba(249,115,22,.10);
}
.post-card .status.current-cancelled{
  color:#cbd5e1;
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.40);
}
.post-card .status.current-action{
  color:#fca5a5;
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.48);
  box-shadow:0 0 14px rgba(239,68,68,.10);
}
.post-card .status.current-unknown{
  color:#cbd5e1;
}

/* Help cards: title/body contrast */
#view .card p b{color:#67e8f9;font-weight:800;}
#view .card p{color:#e8f3ff;}

/* ===== One Mate AI for Instagram : Purple Space Theme ===== */
body[data-platform="instagram"]{
  --cyan:#b66cff;
  --accent:#a855f7;
  --color-border:#7137a8;
}

body[data-platform="instagram"] .auth-card,
body[data-platform="instagram"] .card{
  border-color:rgba(190,110,255,.38);
  box-shadow:0 0 28px rgba(150,65,255,.12);
}

body[data-platform="instagram"] .platform-switch{
  display:flex;
  gap:8px;
  justify-content:center;
  margin:0 0 16px;
}

.platform-switch{
  display:flex;
  gap:8px;
  justify-content:center;
  margin:0 0 16px;
}

.platform-switch button{
  border:1px solid rgba(130,170,220,.35);
  border-radius:999px;
  padding:8px 16px;
  background:rgba(4,20,42,.65);
  color:#d9e8f8;
  font-weight:700;
}

.platform-switch button.active{
  border-color:#4fdcff;
  box-shadow:0 0 16px rgba(79,220,255,.25);
}

body[data-platform="instagram"] .platform-switch button.active{
  border-color:#c77dff;
  background:rgba(116,46,160,.28);
  color:#f1dcff;
  box-shadow:0 0 18px rgba(190,100,255,.32);
}

body[data-platform="instagram"] .auth-primary{
  background:linear-gradient(135deg,#7c3aed,#c026d3);
  border-color:#c77dff;
}


/* ===== One Mate AI for Instagram : Full Purple Space Theme ===== */
body[data-platform="instagram"]{
  --cyan:#c77dff;
  --accent:#a855f7;
  --color-border:#7137a8;
}

body[data-platform="instagram"],
body[data-platform="instagram"] .main{
  background-color:#09051a;
}

body[data-platform="instagram"] .sidebar{
  background:linear-gradient(180deg,rgba(25,8,52,.98),rgba(12,5,30,.98));
  border-color:rgba(190,110,255,.32);
}

body[data-platform="instagram"] .card{
  background:linear-gradient(145deg,rgba(39,15,70,.88),rgba(16,8,40,.92));
  border-color:rgba(190,110,255,.42);
  box-shadow:0 0 28px rgba(160,65,255,.14);
}

body[data-platform="instagram"] .btn,
body[data-platform="instagram"] button.active{
  border-color:rgba(190,110,255,.55);
}

body[data-platform="instagram"] .btn.primary{
  background:linear-gradient(90deg,#7c3aed,#c026d3);
  border-color:#c77dff;
}

body[data-platform="instagram"] .nav button.active{
  background:linear-gradient(90deg,rgba(124,58,237,.30),rgba(192,38,211,.18));
  border-color:#a855f7;
  box-shadow:0 0 20px rgba(168,85,247,.20);
}

body[data-platform="instagram"] .platform-switch button{
  border-color:rgba(190,110,255,.48);
}


/* ===== Instagram Purple Theme : Card Inner Override ===== */

body[data-platform="instagram"] .card{
  background:
    radial-gradient(circle at 20% 0%,rgba(168,85,247,.16),transparent 48%),
    linear-gradient(145deg,rgba(39,15,70,.94),rgba(18,7,43,.96)) !important;
  border-color:rgba(192,132,252,.48) !important;
  box-shadow:
    inset 0 0 30px rgba(168,85,247,.06),
    0 0 24px rgba(126,34,206,.12) !important;
}

body[data-platform="instagram"] .metric,
body[data-platform="instagram"] .home-action-list,
body[data-platform="instagram"] .home-action-dialog{
  background:rgba(48,20,82,.58) !important;
  border-color:rgba(192,132,252,.38) !important;
}

body[data-platform="instagram"] .btn{
  border-color:rgba(192,132,252,.52) !important;
  background:rgba(76,29,149,.22) !important;
}

body[data-platform="instagram"] .btn.primary{
  background:linear-gradient(90deg,#7c3aed,#a855f7,#c026d3) !important;
  border-color:#c084fc !important;
  box-shadow:0 0 22px rgba(168,85,247,.24) !important;
}

body[data-platform="instagram"] .platform-switch button{
  background:rgba(76,29,149,.26) !important;
  border-color:rgba(192,132,252,.58) !important;
  color:#f5e9ff !important;
}

body[data-platform="instagram"] input,
body[data-platform="instagram"] textarea,
body[data-platform="instagram"] select{
  border-color:rgba(192,132,252,.38) !important;
}


/* ===== Instagram Purple Theme : Final Blue Cleanup ===== */

body[data-platform="instagram"] .card > div,
body[data-platform="instagram"] .card [style*="border"]{
  border-color:rgba(192,132,252,.42) !important;
}

body[data-platform="instagram"] .card [style*="background"]{
  border-color:rgba(192,132,252,.42) !important;
}

body[data-platform="instagram"] .btn:not(.primary){
  background:rgba(76,29,149,.24) !important;
  border-color:rgba(192,132,252,.52) !important;
  color:#f5e9ff !important;
}

body[data-platform="instagram"] .metric{
  background:rgba(76,29,149,.28) !important;
  border-color:rgba(192,132,252,.38) !important;
}

body[data-platform="instagram"] .card a,
body[data-platform="instagram"] .card .muted{
  border-color:rgba(192,132,252,.32) !important;
}

body[data-platform="instagram"] #refresh{
  border-color:rgba(192,132,252,.60) !important;
  background:rgba(76,29,149,.24) !important;
}


/* ===== Instagram Purple Theme : Residual Blue Final ===== */

/* 左上メニューボタン */
body[data-platform="instagram"] .mobile-menu-toggle{
  background:rgba(76,29,149,.30) !important;
  border-color:rgba(192,132,252,.58) !important;
  box-shadow:0 0 18px rgba(168,85,247,.16) !important;
}

/* サイドバー選択中メニュー */
body[data-platform="instagram"] .nav button.active{
  background:linear-gradient(90deg,rgba(124,58,237,.34),rgba(192,38,211,.18)) !important;
  border-color:rgba(192,132,252,.58) !important;
  box-shadow:0 0 20px rgba(168,85,247,.16) !important;
}

/* ホーム内のインライン指定された青系の小パーツ */
body[data-platform="instagram"] .card [style*="background:#"],
body[data-platform="instagram"] .card [style*="background: #"]{
  border-color:rgba(192,132,252,.50) !important;
}

/* 時計アイコンを含む小枠 */
body[data-platform="instagram"] .card [style*="width:58px"][style*="height:58px"]{
  background:rgba(76,29,149,.32) !important;
  border-color:rgba(192,132,252,.58) !important;
  box-shadow:0 0 16px rgba(168,85,247,.12) !important;
}

/* Scheduled等のバッジ */
body[data-platform="instagram"] .card .status,
body[data-platform="instagram"] .card [class*="badge"]{
  background:rgba(76,29,149,.30) !important;
  border-color:rgba(192,132,252,.55) !important;
  color:#f5e9ff !important;
}

/* 投稿本文を囲む内側の枠 */
body[data-platform="instagram"] .card [style*="border:1px"]{
  border-color:rgba(192,132,252,.42) !important;
}

/* Instagram側のリンク・補助アクセント */
body[data-platform="instagram"] .card a{
  color:#d8b4fe !important;
}


/* ===== INSTAGRAM PURPLE FINAL OVERRIDE ===== */
/* Instagram側だけに適用。X側には影響させない */

body[data-platform="instagram"]{
  --cyan:#c084fc !important;
  --accent:#a855f7 !important;
  --color-border:#7e22ce !important;
}

/* ロゴ：青～シアン部分を紫系へ */
body[data-platform="instagram"] .auth-brand .oma-brand-logo,
body[data-platform="instagram"] .sidebar .oma-brand-logo{
  filter:hue-rotate(70deg) saturate(1.25) !important;
}

/* 「次のステージへ。」 */
body[data-platform="instagram"] .auth-catch strong{
  color:#c084fc !important;
  text-shadow:0 0 18px rgba(192,132,252,.32) !important;
}

/* ログイン・主要CTA */
body[data-platform="instagram"] .auth-primary,
body[data-platform="instagram"] .btn.primary{
  background:linear-gradient(135deg,#7c3aed,#c026d3) !important;
  border-color:#c084fc !important;
  box-shadow:0 0 22px rgba(168,85,247,.22) !important;
}

/* プラットフォーム切り替え */
body[data-platform="instagram"] .platform-switch button{
  border-color:rgba(192,132,252,.55) !important;
}
body[data-platform="instagram"] .platform-switch button.active{
  border-color:#c084fc !important;
  background:rgba(126,34,206,.26) !important;
  box-shadow:0 0 18px rgba(168,85,247,.24) !important;
}

/* ホームカード・メトリック */
body[data-platform="instagram"] .card{
  border-color:rgba(192,132,252,.48) !important;
  box-shadow:
    inset 0 0 28px rgba(168,85,247,.06),
    0 0 24px rgba(126,34,206,.12) !important;
}

body[data-platform="instagram"] .metric,
body[data-platform="instagram"] .home-action-list,
body[data-platform="instagram"] .home-action-dialog{
  border-color:rgba(192,132,252,.40) !important;
  background:rgba(76,29,149,.24) !important;
}

/* サイドバー選択状態 */
body[data-platform="instagram"] .nav button.active{
  background:linear-gradient(
    90deg,
    rgba(126,34,206,.34),
    rgba(192,38,211,.18)
  ) !important;
  border-color:rgba(192,132,252,.58) !important;
  box-shadow:0 0 20px rgba(168,85,247,.18) !important;
}

/* モバイルメニュー */
body[data-platform="instagram"] .mobile-menu-toggle{
  background:rgba(76,29,149,.30) !important;
  border-color:rgba(192,132,252,.58) !important;
  box-shadow:0 0 18px rgba(168,85,247,.16) !important;
}

/* リンク・補助アクセント */
body[data-platform="instagram"] .card a,
body[data-platform="instagram"] #refresh{
  color:#d8b4fe !important;
  border-color:rgba(192,132,252,.48) !important;
}

/* 入力欄 */
body[data-platform="instagram"] input,
body[data-platform="instagram"] textarea,
body[data-platform="instagram"] select{
  border-color:rgba(192,132,252,.42) !important;
}

/* ===== /INSTAGRAM PURPLE FINAL OVERRIDE ===== */

/* ===== INSTAGRAM LOGIN SWITCH HIGHLIGHT ===== */

/* Instagram選択中 */
body[data-platform="instagram"] #loginPlatformSwitch button[data-platform="instagram"]{
  background:linear-gradient(135deg,rgba(124,58,237,.42),rgba(192,38,211,.34)) !important;
  border-color:#c084fc !important;
  color:#ffffff !important;
  font-weight:800 !important;
  box-shadow:
    0 0 0 1px rgba(192,132,252,.22),
    0 0 20px rgba(168,85,247,.35) !important;
  transform:translateY(-1px);
}

/* Xは非選択として少し落とす */
body[data-platform="instagram"] #loginPlatformSwitch button[data-platform="x"]{
  background:rgba(8,18,38,.55) !important;
  border-color:rgba(148,163,184,.28) !important;
  color:rgba(226,232,240,.78) !important;
  box-shadow:none !important;
  opacity:.82;
}

/* ===== /INSTAGRAM LOGIN SWITCH HIGHLIGHT ===== */

/* ===== INSTAGRAM PURPLE CLEANUP FINAL ===== */

/* ログイン下部アイコン・補助テキスト */
body[data-platform="instagram"] .auth-features svg,
body[data-platform="instagram"] .auth-features i,
body[data-platform="instagram"] .auth-features .icon{
  color:#c084fc !important;
  stroke:#c084fc !important;
}

body[data-platform="instagram"] .auth-features a,
body[data-platform="instagram"] .auth-signup a{
  color:#d8b4fe !important;
}

/* 利用開始 */
body[data-platform="instagram"] a[href*="signup"],
body[data-platform="instagram"] a[href*="register"]{
  color:#d8b4fe !important;
}

/* 入力欄の青残りを紫へ */
body[data-platform="instagram"] input,
body[data-platform="instagram"] textarea,
body[data-platform="instagram"] select{
  border-color:rgba(192,132,252,.52) !important;
  box-shadow:0 0 0 1px rgba(168,85,247,.06) inset !important;
}

body[data-platform="instagram"] input:focus,
body[data-platform="instagram"] textarea:focus,
body[data-platform="instagram"] select:focus{
  border-color:#c084fc !important;
  box-shadow:
    0 0 0 1px rgba(192,132,252,.30),
    0 0 16px rgba(168,85,247,.18) !important;
}

/* サイドバー内ロゴ補助色・細線 */
body[data-platform="instagram"] .sidebar .oma-for-x,
body[data-platform="instagram"] .sidebar [class*="for-"]{
  color:#d8b4fe !important;
}

body[data-platform="instagram"] .sidebar hr,
body[data-platform="instagram"] .sidebar [style*="border"]{
  border-color:rgba(192,132,252,.30) !important;
}

/* ホーム内の補助リンク・青アクセント */
body[data-platform="instagram"] .card a,
body[data-platform="instagram"] .muted a,
body[data-platform="instagram"] .metric a,
body[data-platform="instagram"] #refresh{
  color:#d8b4fe !important;
}

/* 成功状態の緑は維持 */
body[data-platform="instagram"] .status-success,
body[data-platform="instagram"] .connection-ok{
  color:inherit;
}

/* ===== /INSTAGRAM PURPLE CLEANUP FINAL ===== */

/* ===== INSTAGRAM LOGIN PURPLE LAST CLEANUP ===== */

/* Instagramログイン画面の入力欄 */
body[data-platform="instagram"] .auth-card input{
  background:
    linear-gradient(180deg,rgba(49,18,78,.72),rgba(30,12,55,.78)) !important;
  border-color:rgba(192,132,252,.54) !important;
  color:#ffffff !important;
  box-shadow:
    inset 0 0 18px rgba(168,85,247,.05),
    0 0 0 1px rgba(168,85,247,.04) !important;
}

body[data-platform="instagram"] .auth-card input:focus{
  border-color:#c084fc !important;
  box-shadow:
    0 0 0 1px rgba(192,132,252,.30),
    0 0 18px rgba(168,85,247,.20) !important;
}

/* パスワード再設定ボタン */
body[data-platform="instagram"] .auth-card .btn:not(.auth-primary){
  border-color:rgba(192,132,252,.50) !important;
  background:rgba(49,18,78,.26) !important;
  color:#f3e8ff !important;
}

/* 利用開始リンク */
body[data-platform="instagram"] .auth-card a{
  color:#d8b4fe !important;
}

/* ログインカード内の区切り線 */
body[data-platform="instagram"] .auth-card hr,
body[data-platform="instagram"] .auth-card [style*="border-top"],
body[data-platform="instagram"] .auth-card [style*="border-bottom"]{
  border-color:rgba(192,132,252,.22) !important;
}

/* ===== /INSTAGRAM LOGIN PURPLE LAST CLEANUP ===== */

/* ===== INSTAGRAM LOGO SUBTITLE PURPLE ===== */

body[data-platform="instagram"] .auth-brand .oma-for-x,
body[data-platform="instagram"] .sidebar .oma-for-x{
  color:#d8b4fe !important;
  text-shadow:0 0 12px rgba(192,132,252,.24) !important;
}

/* ===== /INSTAGRAM LOGO SUBTITLE PURPLE ===== */

/* ===== INSTAGRAM SUBTITLE DIRECT PURPLE FIX ===== */

/* ログイン画面：ロゴ下の for Instagram */
body[data-platform="instagram"] .auth-for-x,
body[data-platform="instagram"] .auth-for-x *,
body[data-platform="instagram"] .auth-brand .oma-x-accent{
  color:#d8b4fe !important;
  text-shadow:0 0 12px rgba(192,132,252,.30) !important;
}

/* サイドバー：ロゴ下の for Instagram */
body[data-platform="instagram"] .sidebar .oma-for-x,
body[data-platform="instagram"] .sidebar .oma-for-x *,
body[data-platform="instagram"] .sidebar .oma-x-accent{
  color:#d8b4fe !important;
  text-shadow:0 0 12px rgba(192,132,252,.30) !important;
}

/* ===== /INSTAGRAM SUBTITLE DIRECT PURPLE FIX ===== */

/* ===== INSTAGRAM SUBTITLE SOFT GLOW ===== */
/* Instagram側だけ適用。X側には影響させない */
body[data-platform="instagram"] .auth-brand .oma-for-x,
body[data-platform="instagram"] .auth-brand .oma-for-x *,
body[data-platform="instagram"] .auth-brand .oma-x-accent,
body[data-platform="instagram"] .sidebar .oma-for-x,
body[data-platform="instagram"] .sidebar .oma-for-x *,
body[data-platform="instagram"] .sidebar .oma-x-accent{
  color:#d8b4fe !important;
  text-shadow:
    0 0 8px rgba(216,180,254,.30),
    0 0 16px rgba(168,85,247,.28),
    0 0 28px rgba(168,85,247,.20) !important;
  filter: drop-shadow(0 0 8px rgba(168,85,247,.18));
}

/* 左右の細いラインも少し発光 */
body[data-platform="instagram"] .auth-brand .oma-for-x::before,
body[data-platform="instagram"] .auth-brand .oma-for-x::after,
body[data-platform="instagram"] .sidebar .oma-for-x::before,
body[data-platform="instagram"] .sidebar .oma-for-x::after{
  background: rgba(216,180,254,.92) !important;
  box-shadow: 0 0 10px rgba(168,85,247,.28) !important;
}
/* ===== /INSTAGRAM SUBTITLE SOFT GLOW ===== */


/* ===== INSTAGRAM LOGIN FINAL ACCENT ===== */

/* 利用開始 */
body[data-platform="instagram"] .auth-card a,
body[data-platform="instagram"] .auth-signup a{
  color:#d8b4fe !important;
  text-shadow:0 0 10px rgba(192,132,252,.18) !important;
}

/* パスワードを忘れた場合 */
body[data-platform="instagram"] .auth-card .btn:not(.auth-primary){
  border-color:rgba(192,132,252,.58) !important;
  background:rgba(49,18,78,.20) !important;
  color:#f3e8ff !important;
  box-shadow:0 0 12px rgba(168,85,247,.08) !important;
}

/* その下の区切り線 */
body[data-platform="instagram"] .auth-card hr,
body[data-platform="instagram"] .auth-features{
  border-color:rgba(192,132,252,.24) !important;
}

body[data-platform="instagram"] .auth-features{
  border-top-color:rgba(192,132,252,.24) !important;
}

/* ===== /INSTAGRAM LOGIN FINAL ACCENT ===== */

/* ===== INSTAGRAM LOGIN TARGET FINAL ===== */

/* 利用開始 */
body[data-platform="instagram"] .auth-switch button[data-auth-tab="register"]{
  color:#d8b4fe !important;
  text-shadow:0 0 10px rgba(192,132,252,.22) !important;
}

/* パスワードを忘れた場合 */
body[data-platform="instagram"] #resetBtn.auth-reset{
  border-color:rgba(192,132,252,.62) !important;
  background:rgba(49,18,78,.22) !important;
  color:#f3e8ff !important;
  box-shadow:0 0 14px rgba(168,85,247,.10) !important;
}

/* 下の区切り線 */
body[data-platform="instagram"] .auth-features{
  border-top-color:rgba(192,132,252,.30) !important;
}

/* ===== /INSTAGRAM LOGIN TARGET FINAL ===== */

/* ===== INSTAGRAM FEATURE DIVIDER PURPLE ===== */

/* ログイン画面下部4項目の縦線3本 */
body[data-platform="instagram"] .auth-features .auth-feature + .auth-feature{
  border-left-color:rgba(192,132,252,.28) !important;
}

/* 念のため既存の左右境界指定も紫へ */
body[data-platform="instagram"] .auth-features .auth-feature{
  border-color:rgba(192,132,252,.28) !important;
}

/* ===== /INSTAGRAM FEATURE DIVIDER PURPLE ===== */

/* ===== INSTAGRAM NEXT WEEK ORANGE ===== */

/* Instagram側の「次週の投稿を作成」だけX側と同じオレンジへ */
body[data-platform="instagram"] #createNextWeek,
body[data-platform="instagram"] .home-next-week{
  background:linear-gradient(135deg,#f59e0b,#f97316) !important;
  border-color:rgba(251,146,60,.78) !important;
  color:#111827 !important;
  box-shadow:0 0 18px rgba(249,115,22,.18) !important;
}

/* ===== /INSTAGRAM NEXT WEEK ORANGE ===== */